/*
* Skeleton V2.0.2
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/15/2014
*/


/* Table of contents
–––––––––––––––––––––––––––––––––––––––––––––––––– 
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative; 
  width: 100%; 
  max-width: 960px; 
  margin: 0 auto; 
  padding: 0 2rem;
  box-sizing: border-box; }
.column,        
.columns { 
  width: 100%; 
  float: left; 
  box-sizing: border-box; }

/* For devices larger than 750px */
@media (min-width: 750px) {
  .container {
    width: 90%; padding: 0 3rem; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,        
  .columns:first-child { 
    margin-left: 0; }
  
  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton 
are based on 10px sizing. So basically 1.5rem = 15px :) */
html { 
  font-size: 62.5%; } 
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  background: #f6f6f6;
  color: #000; }



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { 
  margin-top: 0;
  margin-bottom: 2rem;
  font-family: 'Roboto Slab', serif;
  font-weight: 400; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

@media (min-width: 2000px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { 
  color: #6e82aa;
  text-decoration: none;
  transition: 0.3s; }
a:hover { 
  color: #194073; }
  
strong {
	
}

header nav.login ul li a {
	display: inline-block;
	background: #194073;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	padding: 0.5rem 1.5rem;
	-moz-border-radius:    3px;
	-webkit-border-radius: 3px;
	border-radius:         3px;
	-khtml-border-radius:  3px;
	-moz-box-shadow:    0 1px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
	box-shadow:         0 1px 5px 0 rgba(0, 0, 0, 0.5);
	margin: 0 0 0 1rem;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
}

@media (max-width: 749px) {

header nav.login ul li a {
	background: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

}


/* Buttons 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  	display: block;
	padding: 0.5rem 1.5rem;
	color: #fff;
	text-align: center;
	font-size: 1.5rem;
    line-height: 1.6;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
  	letter-spacing: 0.2rem;
 	text-transform: uppercase; 
 	text-decoration: none;
 	white-space: nowrap;
 	background-color: #194073;
 	border-radius: 3px;
 	border: 1px solid #194073;
 	cursor: pointer;
 	box-sizing: border-box;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
	margin: 0 0 2rem 0;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
 }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color: #194073;
	background: #fae80c;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
	outline: 0; 
}

.button.alt, 
.sidebar .button {
 	background-color: #6e82aa;
}

.button.alt {
  	display: inline-block;
}

.button.alt:hover,
.button.alt:focus,
.sidebar .button:hover,
.sidebar .button:focus {
 	background-color: #fae80c;
}

 
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  width: 100%;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkard default styles on some inputs for iOS */
input[type="email"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
textarea {
	width: 100%;
	display: block;
  min-height: 150px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  	display: block;
  	margin-bottom: .5rem;
  	font-weight: 600;
}
label.optional {
	color: #666;
} 
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

fieldset {
	padding: 0;
	border: none;
	margin: 0 0 1rem 0;
}

fieldset h4 span {
	color: #666;
}



.radios .radiogroup {
	display: block;
}

.radios label {
	display: inline;
	margin-left: 1rem;
}

.reveal-if-active {
  	opacity: 0;
  	max-height: 0;
  	overflow: hidden;
  	transition: 1s;
}

.reveal-if-active.show {
  	opacity: 1;
  	max-height: inherit;
  	overflow: auto;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul { 
  list-style: square outside;
  margin-left: 2rem;
   }
ol { 
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
li {
  margin-bottom: 1rem; }

/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

nav {
	margin: 0;
	font-family: 'Roboto Slab', serif;
}

nav ul {
	margin: 0;
	list-style: none;
}

nav ul li {
	margin: 0;	
}


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
p,
ul,
ol {
  margin-bottom: 2.5rem; }
p {
  margin-top: 0; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }
  
@media (max-width: 749px) {
.mobilehide {
	display: none;
}
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}

img {
	max-width: 100%;
	height: auto;
}

/* Responsive Nav Overlay
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #194073;
    background-color: rgba(25,64,115, 0.95);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay .closebtn {
    position: absolute;
    top: 0;
    right: 2rem;
    font-size: 4rem;
	text-decoration: none;
}

.overlay .closebtn:hover {
	color: #fae80c;
	cursor: pointer;
}

.overlay-content {
    width: 100%;
    text-align: center;
    margin: 3rem 0 0 0;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf { 
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries 
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it 
there. 
*/

header {
	padding: 0.5rem 0;
	background: #6e82aa url(images/texture-blue.jpg) repeat center top;
	border-bottom: 1px solid #194073;
	-moz-box-shadow:    0 1px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
	box-shadow:         0 1px 5px 0 rgba(0, 0, 0, 0.5);
}

header .openbtn {
	color: #fff;
    font-size: 3rem;
    position: absolute;
    right: 2rem;
    z-index: 1;
}

header .openbtn span:hover {
	color: #fae80c;
	cursor: pointer;
}

header .logo h2 {
	margin: 0;
}

header .logo h2 a {
	margin: 0 auto;
	display: block;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background: url(images/logo-shadow-320px.png) no-repeat center center;
	width: 160px;
	height: 90px;
	background-size: 160px 90px;
}

header nav.login, header nav.primary {
	display: none;
}

header nav.mobile nav.login, header nav.mobile nav.primary {
	display: block;
}

header nav.mobile nav.login ul li a, header nav.mobile nav.primary ul li a {
	display: block;
	text-decoration: none;
	padding: 1rem 0;
	width: 90%;
	border-bottom: 1px solid #fae80c;
	margin: 0 auto;
}

header nav.mobile nav.login ul li:last-child a, header nav.mobile nav.primary ul li:last-child a {
	border-bottom: none;
}

header nav.mobile nav.login ul li a:hover, header nav.mobile nav.primary ul li a:hover {
	color: #fae80c;
}

header nav.mobile nav.login {
	margin: 0 0 2rem 0;
}

header nav.mobile nav.login ul li a {
	font-size: 2rem;
	color: #ccc;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	border-bottom: 1px solid #666;
}

header nav.mobile nav.primary ul li a {
	font-size: 2.5rem;
	color: #fff;
}


header nav.mobile nav.primary ul ul {
	display: none;
}

.main {
	z-index: 5;
}

.main .container {
	padding-top: 1rem;
	padding-bottom: 4rem;
}

.main .zipbox {
	background: #fff;
    border: 1px solid #ccc;
    padding: 2rem 2rem 0 2rem;
    margin: 0 0 2rem 0;
}

.main.schedule h1 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.main .handyman-profile .contactdetails {
	margin: 0 0 2rem 0;
}

.main .handyman-profile .contactdetails h2 {
	margin: 0;
}

.main .handyman-profile .contactdetails h4 {
	margin: 0 0 0.5rem 0;
}

.main .handyman-begin .time .timelist {
	height:125px;
	width:100%;
	overflow: scroll;
	background: #fff;
	border: 1px solid #D1D1D1;
    border-radius: 4px;
    padding: 1rem;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}

.main .handyman-begin .time .timelist > span {
	display: block;
	margin-bottom: 1rem;
}

.main .handyman-begin .time .timelist span input, .main .handyman-begin .time .timelist span label, .main .handyman-begin .time .timelist span span {
	display: inline;
}

.main .handyman-begin .time .timelist span input {
	margin: 0 0.5rem 0 0;
}

.sidebar > ul {
	list-style: none;
	margin: 0;
}

.sidebar > ul > li {
	background: #eee;
	padding: 1.5rem 1.5rem 0.5rem 1.5rem;
	margin: 0 0 2rem 0;
	font-size: 90%;
	border: 1px solid #ccc;
	color: #666;
}

.sidebar h4, .sidebar p {
	margin-bottom: 1.5rem;
}

.sidebar h4 {
	color: #194073;
}

.sidebar ul ul li span {
	text-transform: uppercase;
	color: #999;
}

.sidebar p {
}

footer {
	position: relative;
	top: 45px;
	margin-top: -45px;
}

footer .logo h4 {
	margin: 0 0 -4rem 0;
}

footer .logo h4 a {
	margin: 0 auto;
	display: block;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background: url(images/logo-shadow-320px.png) no-repeat center center;
	width: 160px;
	height: 90px;
	background-size: 160px 90px;
	position: relative;
	top: -4.5rem;
}

footer {
	padding: 0 0 2rem 0;
	background: #6e82aa url(images/texture-darkblue.jpg) repeat center top;
	color: #fff;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer a:hover {
	color: #fae80c;
}

footer nav ul {
	margin: 0;
}

footer .smallprint {
	border-top: 1px solid #6e82aa;
	padding: 1rem 0 0 0;
	margin: 1rem 0 0 0;
	font-size: 80%;
	text-align: right;
}

footer .smallprint p {
	margin-bottom: 0.8rem;
	color: #ccc;
}

footer .smallprint p:last-child {
	margin: 0;	
}

/* Larger than tablet (also point when grid becomes active) */
@media (min-width: 750px) {
	
header {
	padding: 0.5rem 0;
	background: #6e82aa url(images/texture-blue-split.jpg) repeat center center;
}

header .openbtn {
	display: none;
}

header .logo h2 a {	
	width: 194px;
	height: 109px;
	background-size: 194px 109px;
}

header nav.login, header nav.primary {
	display: block;
	text-align: right;
}

header nav.login {
	margin: 0.75rem 0 0 0;
}

header nav.login .button {
	display: inline-block;
	margin: 0 0 0 0.5rem;
}

header nav.login span.zipsearch {
	margin: 0;
	display: inline;
}

header nav.login span.zipsearch input[type="text"] {
	width: 100px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.4rem;
	color: #666;
	padding: 0 1rem;
	height: 36px;
	border: 1px solid #194073;
	-moz-box-shadow:    0 1px 5px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
	box-shadow:         0 1px 5px 0 rgba(0, 0, 0, 0.5);
	display: inline-block;
	position: relative;
    top: -1px;
}

header nav.login span.zipsearch input[type="text"]::-webkit-input-placeholder {
	color: #ccc;
}

header nav.login span.zipsearch input[type="text"]::-moz-placeholder {
	color: #ccc;
}

header nav.login span.zipsearch input[type="text"]:-ms-input-placeholder {
	color: #ccc;
}

header nav.login span.zipsearch input[type="text"]:-moz-placeholder {
	color: #ccc;
}

header nav.login span.zipsearch input[type="submit"] {
	background: #6e82aa;
}

header nav.login span.zipsearch input[type="submit"]:hover, header nav.login span.zipsearch input[type="submit"]:focus {
	background: #fae80c;
}

header nav.login ul {
	display: inline;
	border-left: 1px solid #194073;
	margin: 0 0 0 0.5rem;
	padding: 0 0 0 0.3rem;
	height: 36px;
}

header nav.login ul li {
	display: inline;
	position: relative;
}

header nav.login ul li.login a {
	z-index: 15;
	position: relative;
}

header nav.login ul li span.login {
	margin: 0;
	position: absolute;
	top: -2.1rem;
	left: -1.5rem;
	width: 200px;
	background: #6e82aa url(images/texture-darkblue.jpg) repeat center top;
	padding: 6.4rem 2rem 2rem 2rem;
	z-index: 10;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	visibility: hidden;
	opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
}

header nav.login ul li:hover span.login {
	visibility: visible;
	opacity: 1;
}

header nav.login ul li span.login input[type="submit"] {
	background: #6e82aa;
	margin: 0;
}

header nav.login ul li span.login input[type="submit"]:hover, header nav.login ul li span.login input[type="submit"]:focus {
	background: #fae80c;
}

header nav.primary ul {
	margin: 1rem 0 0 0;
}

header nav.primary ul li {
	display: inline;
	margin: 0 0 0 1rem;
}

header nav.primary ul li:first-child {
	margin: 0; 
}

header nav.primary ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 1.7rem;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
}

header nav.primary ul li a:hover {
	color: #fae80c;
}

header nav.primary ul ul {
	display: none;
}

.main {
	background: url(images/pagebg01-1200px.jpg) no-repeat center center fixed;
	background-size: cover;
	padding: 0;
	margin: 0 0 -4.5rem 0;
}

.main .container {
	background: rgba(255, 255, 255, 0.95);
	padding-top: 2rem;
	padding-bottom: 6rem;
}

.sidebar h4 {
	font-size: 2.5rem;
}

footer .smallprint {
	border-top: none;
	padding: 0;
	margin: 0;
}
	
}

/* Larger than desktop */
@media (min-width: 1000px) {
	
header .logo h2 a {	
	width: 264px;
	height: 149px;
	background-size: 264px 149px;
}

header nav.login {
	margin: 1.75rem 0 0 0;
}

header nav.login span.zipsearch input[type="text"] {
	width: 150px;
}

header nav.login ul {
	margin: 0 0 0 1.5rem;
    padding: 0 0 0 1.3rem;
}

header nav.login ul li a {
	padding-right: 4rem;
}

header nav.login ul li.login a {
	background: #194073 url(images/icon-navlogin-lock-blue.png) no-repeat right center;
}

header nav.login ul li.register a {
	background: #194073 url(images/icon-navlogin-person-blue.png) no-repeat right center;
}

header nav.login ul li.login a:hover {
	background: #fae80c url(images/icon-navlogin-lock-darkblue.png) no-repeat right center;
}

header nav.login ul li.register a:hover {
	background: #fae80c url(images/icon-navlogin-person-darkblue.png) no-repeat right center;
}

header nav.login ul li span.login {
	top: -3.1rem;
    padding: 7.4rem 2rem 2rem 2rem;
}

header nav.primary ul {
    margin: 2.5rem 0 0 0;
}

header nav.primary ul li {
	margin: 0 0 0 2rem;
}

header nav.primary ul li a {
	font-size: 2rem;
}

.main .container {
	padding-top: 3rem;
}

.main h1 {
	margin-bottom: 3rem;
}

.sidebar > ul > li {
	padding: 2rem 2rem 1rem 2rem;
	margin: 0 0 3rem 0;
}

footer {
	padding-bottom: 4rem;
}
	
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

header .logo h2 a {	
	width: 282px;
	height: 159px;
	background-size: 282px 159px;
}

header nav.login {
	margin: 1.85rem 0 0 0;
}

header nav.primary ul {
    margin: 3.4rem 0 0 0;
}

header nav.primary ul li {
    margin: 0 0 0 3rem;
}

.main {
	background: url(images/pagebg01-1800px.jpg) no-repeat center center fixed;
	background-size: cover;
}
	
}

.Valid1 {
    color: #CC0000;
    font-weight: bold;
}

#cont1 {
    min-height: 300px;
}

iframe {
    max-width: 100%;
}