/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) - container width = 768 or less */
	@media only screen and (max-width: 959px) {
            .box{ width:100%;}
    }

	/* Tablet Portrait size to standard 960 (devices and browsers) - container width = 768 */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
        #nav .nav-row1 {margin: 0 0 0 0; padding: 0px 0px 0px 2px;}
        #nav .nav-row2 {margin: 0 0 0 0}
        #nav .nav-row1 ul li a{color:#000; text-decoration:none; width:246px; text-align:center; display:block; float:left; padding:10px 0px 10px 0px;} 
        #nav .nav-row2 ul li a{color:#000; text-decoration:none; width:249px; text-align:center; display:block; float:left; padding:11px 0px 11px 0px;}
        #nav .extra-button {display: block;}

        #content {padding: 80px 0 0 0;}
        #content .col-1x {display: none;}

        #footer {line-height:140%;}
        #footer span {font-size:1.3em; line-height:250%;}  
        #footer .indent-footer{
            margin:0 0 0 0;
            padding:5px 5px 5px 5px;
            border-left-style:none;
        }
    }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) - container width = 420 */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
        #header {background:url(../images/top-420.png) no-repeat top center}
        #nav .nav-row1 {margin: 0 0 0 0; padding: 0px 0px 0px 0px;} 
        #nav .nav-row2 {margin: 0 0 0 0}
        #nav .nav-row1 ul li a{color:#000; text-decoration:none; width:208px; text-align:center; display:block; float:left; padding:10px 0px 10px 0px;} 
        #nav .nav-row2 ul li a{color:#000; text-decoration:none; width:200px; text-align:center; display:block; float:left; padding:11px 0px 11px 0px;}
        #nav .extra-button {display: block;}

        #content {padding: 100px 0 0 0;}
        #content .col-1x {display: none;}
        #content .small-map {display: block;}
        #content .wide-map {display: none;}
        #content .services-1-col-text {display: block;}
        #content .services-2-col-text {display: none;}
        .box .border-top {background: #aabfd1}
        .box .border-bottom {background: #aabfd1}
        .box .border-left {background: #aabfd1}
        .box .border-right {background: #aabfd1}
        .box .corner-top-left {background: #aabfd1}
        .box .corner-top-right {background: #aabfd1}
        .box .corner-bottom-left {background: #aabfd1}
        .box .corner-bottom-right {background: #aabfd1}
        .box .indent-box{padding:10px 0 0 0;}
        #content .angieslist .angiesbadge {margin-left:62px;}

        #content .logos{display: block;}
        #content .logos .aad-logo  {padding:0 0 0 18px; max-width: 84px;}
        #content .logos .asds-logo {padding:0 0 0 5px; max-width: 195px;}
        #content .logos .mohs-logo {padding:0 0 0 5px; max-width: 84px;}

        #footer {color:#1f4666; font-size:0.84em; background: #aabfd1}
        #footer span {display:none;}
        #footer span1 {display:block; margin-left:0}
        #footer .indent-footer{
            margin:0 0 0 0;
            padding:5px 5px 5px 5px;
            border-left-style:none;
        }

    }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) - container width = 300 */
	@media only screen and (max-width: 479px) {
        body {font-size:100%; line-height:0.84em; background:#aabfd1;}
        #header {height:109px; background:url(../images/top-300.png) no-repeat top center}
        #header .phone {font-size:30px; color:#FFFFFF; margin:80px 0 0 56px;}
        #nav {font-size:12px;}
        #nav .nav-row1 {margin: 0 0 0 0; padding: 0px 0px 0px 0px;} 
        #nav .nav-row2 {margin: 0 0 0 0}
        #nav .nav-row1 ul li a{color:#000; text-decoration:none; width:148px; text-align:center; display:block; float:left; padding:10px 0px 10px 0px;} 
        #nav .nav-row2 ul li a{color:#000; text-decoration:none; width:150px; text-align:center; display:block; float:left; padding:11px 0px 11px 0px;}
        #nav .extra-button {display: block;}
        #content {padding: 100px 0 0 0;}
        #content .col-1x {display: none;}
        #content .small-map {display: block;}
        #content .wide-map {display: none;}
        #content .services-1-col-text {display: block;}
        #content .services-2-col-text {display: none;}
        .box .border-top {background: #aabfd1}
        .box .border-bottom {background: #aabfd1}
        .box .border-left {background: #aabfd1}
        .box .border-right {background: #aabfd1}
        .box .corner-top-left {background: #aabfd1}
        .box .corner-top-right {background: #aabfd1}
        .box .corner-bottom-left {background: #aabfd1}
        .box .corner-bottom-right {background: #aabfd1}
        .box .indent-box{padding:10px 0 0 0;}
        #content .angieslist .angiesbadge {
            height: 65px;
            width: 256px;
            line-height:100%;
            padding-left:6px;
            padding-top:6px;
            margin-left:6px;
            border-style:solid;
            border-width:1px;
            border-color:#555555;
            background:#4d6d00;
        }

        #content .logos{display: block;}
        #content .logos .aad-logo  {padding:0 0 0 6px; max-width: 62px;}
        #content .logos .asds-logo {padding:0 0 0 5px; max-width: 145px;}
        #content .logos .mohs-logo {padding:0 0 0 5px; max-width: 62px;}

        #footer {color:#1f4666; line-height:140%; background: #aabfd1}
        #footer span {display:none;}
        #footer span1 {display:block; margin-left:0}
        #footer .indent-footer{
            margin:0 0 0 0;
            padding:5px 5px 5px 5px;
            border-left-style:none;
        }

    }


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/