/*
Theme Name: Skylights Plus
Theme URI: http://wordpress.org/extend/themes/skylightsplus
Author: Marcus Whitworth
Author URI: http://www.marcuswhitworth.com
Description: Based on the twentytwelve theme
Version: 1.0
Template: twentytwelve
License: GNU General Public License
License URI: license.txt
Tags: 
*/

@import url("../twentytwelve/style.css");

body {
    background: #0771a5; /* Old browsers */
    background: url('images/clouds.png'), -moz-linear-gradient(top,  #0771a5 0%, #f8f8f8 100%); /* FF3.6+ */
    background: url('images/clouds.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0771a5), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */
    background: url('images/clouds.png'), -webkit-linear-gradient(top,  #0771a5 0%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */
    background: url('images/clouds.png'), -o-linear-gradient(top,  #0771a5 0%,#f8f8f8 100%); /* Opera 11.10+ */
    background: url('images/clouds.png'), -ms-linear-gradient(top,  #0771a5 0%,#f8f8f8 100%); /* IE10+ */
    background: url('images/clouds.png'), linear-gradient(to bottom,  #0771a5 0%,#f8f8f8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0771a5', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-8 */
    background-position: top center;
    background-repeat: no-repeat;
}


h3 {
    color: #2a5397;
    font-size: 18px;
    font-weight: normal;
    margin: 10px 0;
}

.clear {
    clear: both;
}

#masthead {
    background: #D1E8F5;
    background-image: linear-gradient(top, #EBF3F8 30%, #D1E8F5 100%);
    background-image: -o-linear-gradient(top, #EBF3F8 30%, #D1E8F5 100%);
    background-image: -moz-linear-gradient(top, #EBF3F8 30%, #D1E8F5 100%);
    background-image: -webkit-linear-gradient(top, #EBF3F8 30%, #D1E8F5 100%);
    background-image: -ms-linear-gradient(top, #EBF3F8 30%, #D1E8F5 100%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.3, #EBF3F8), color-stop(1, #D1E8F5) );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBF3F8', endColorstr='#D1E8F5',GradientType=0 ); /* IE6-8 */
    padding-bottom: 5px;
}

.site-header {
    padding: 0;
}

.site-width {
    margin: 0 auto;
    max-width: 1000px;
}

#logo {
    max-height: 27px;
    max-width: 287px;
    padding-top: 11px;
}

#site-navigation {
    float: right;
    margin: 7px 0 0 0;
}

.main-navigation li {
    margin: 0 1.8em 0 0;
    font-weight: bold;
}

    .main-navigation li a {
        color: #3e629f;
        line-height: 3em;
        padding: 0 8px;
    }

    .main-navigation li ul li a {
        background: #1188ba;
        color: #FFF;
        border-bottom: 1px solid #2f9ecd;
    }

    .main-navigation li:hover > a,
    .main-navigation li a:hover,
    .main-navigation .current_page_item > a {
        background: #1188ba;
        color: #fff200;
    }

    .main-navigation li ul li a:hover {
        background: #fff200;
        color: #3e629f;
    }

.main-navigation .sub-menu {
    z-index: 100;
}

#page {
    background: none;
    box-shadow: none;
    margin: 5px auto 0 auto;
}

#subHead {
    font-weight: bold;
    margin: 5px;
    text-transform: uppercase;
}

    #subHead h2 {
        color: #FFF;
        font-size: 15px;
        font-weight: normal;
        float: right;
        clear: none;
        padding: 7px 10px 0 0;
    }

    #subHead > div {
        border-left: 1px dotted #76b9da;
        float: right;
    }

    #subHead img {
        height: 28px;
        width: 28px;
        margin: 0 10px;
        float: left;
    }

    #subHead div div {
        margin: 7px 0 0;
        color: #fff200;
        float: right;
        font-size: 16px;
    }

#main {
    padding-top: 10px;
    clear: both;
}

.site-content {
    float: none;
    width: 100%;
    margin: 0;
}

/* Home page styles */
#imageBanner {
    background: #FFF;
    margin-bottom: 25px;
    position: relative;
}

.promo {
    position: absolute;
    right: 0;
    z-index: 1;
    float: right;
    margin: 3em 2em 0 0;
    background: #fff200;
    color: #000;
    width: 16em;
    height: 14em;
    transform: rotate(-7deg);
    -ms-transform: rotate(-7deg); /* IE 9 */
    -moz-transform: rotate(-7deg); /* Firefox */
    -webkit-transform: rotate(-7deg); /* Safari and Chrome */
    -o-transform: rotate(-7deg); /* Opera */
    box-shadow: 0 0.2em 0.3em #666;
}

    .promo .note {
        margin-top: -1em;
        background: url('images/pin.png') center top no-repeat;
        padding: 3.5em 1em 1em;
        line-height: 1.4em;
    }

        .promo .note h3 {
            color: #000;
            font: bold 1.6em 'Annie Use Your Telescope', cursive, Arial;
            margin: -0.4em 0 0.3em;
        }

        .promo .note p {
            font-size: 0.9em;
        }

#content {
    background: #FFF;
    padding: 7px;
}

#homeContent {
    width: 65%;
    float: left;
    padding: 15px;
}

.site-content article {
    margin-bottom: 0;
    padding-bottom: 1em;
    border-bottom: none;
}

#rightPanel {
    float: right;
    width: 28%;
}
	#rightPanel #premDealer {
		margin: 1em 1em 2em;
	}

    #rightPanel p {
        margin: 1em 0;
        line-height: 1.5em;
        font-size: 0.9em
    }

    #rightPanel #map-canvas {
        margin-top: 1em;
        height: 20em;
        border: 1px solid #CCC;
    }

#testimonials .testim {
    margin: 25px 0 10px 0;
}

.testim .quote {
    background: #e8f3f8;
    border: 1px solid #d6e8f0;
    padding: 10px;
    line-height: 1.6em;
    font-size: 0.9em;
    font-style: italic;
}

    .testim .quote div {
        font-size: 90px;
        font-family: Georgia, Arial;
        margin: 5px 0 -20px -12px;
        color: #b9ccd5;
        opacity: 0.7;
    }

.testim .customer {
    text-align: right;
    padding: 1em 4em 0 0;
    color: #666;
    font-style: italic;
    font-size: 0.9em;
}

#reCaptchaDiv_6_1 {
    line-height: 1;
}

/* Products page */
#contentBanner {
    height: 10em;
}

    #contentBanner h1 {
        color: rgba(255, 255, 255, 0.5);
        font-size: 50px;
        margin: 1.8em 0 0 0.3em;
        float: left;
    }

    #contentBanner #promoArea {
        float: right;
        margin: 4em 0 0 0;
        width: 25%;
        position: relative;
    }

        #contentBanner #promoArea .promo {
            right: 2em;
            margin: -1.5em 0 0;
        }

        #contentBanner #promoArea .testim {
            width: auto;
            margin: 16em 2em 0 0;
        }

#breadcrumbs {
    background: #f3f3f3;
    padding: 8px;
    margin: 10px 0;
    font-size: 0.8em;
    text-transform: uppercase;
}

#productContent article {
    float: left;
    width: 70%;
}

article {
    margin: 0 0.5em;
}

.entry-content h3 {
    margin: 0.6em 0;
}
.entry-content p {
    margin: 0 0 1em;
}

.brochure {
    margin-top: 20px;
}
    .brochure a {
        text-decoration: none;
        font-weight: bold;
    }
    .brochure img {
        vertical-align: middle;
    }

#productList {
    clear: both;
    list-style: none;
    margin: 0 10px;
}

    #productList .prodItem {
        border-bottom: 2px dotted #CCC;
        padding: 15px 0;
    }

    #productList .prodImages {
        width: 30%;
        float: left;
        background: #f3f3f3;
        padding: 10px;
    }

        #productList .prodImages .lgeProdImg img {
            width: 100%;
        }

        #productList .prodImages div img {
            width: 32.3%;
        }

    #productList h2 {
        clear: none;
    }

    #productList .prodContent {
        margin-left: 35%;
    }

        #productList .prodContent p {
            line-height: 1.7em;
            margin: 20px 0 0;
        }

            #productList .prodContent p br {
                line-height: 2.5em;
            }

        #productList .prodContent h2 {
            font-size: 20px;
            font-weight: normal;
            color: #3e629f;
            margin: 0 0 15px;
        }

        #productList .prodContent ul {
            /*width: 70%;*/
            margin: 15px 0 15px 30px;
            /*list-style: inside url('images/tick.png');*/
            list-style: disc;
        }

            #productList .prodContent ul li {
                padding: 3px 20px 3px 10px;
                line-height: 1.4em;
                /*border-bottom: 1px dotted #CCC;*/
            }

        #productList .prodContent h4 {
            clear: none;
            margin: 25px 0 15px;
            color: #3e629f;
        }

/* Footer */

footer#colophon {
    background: #212121;
    color: #888;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    height: 50px;
}

    footer#colophon #solatube {
        float: right;
        padding-right: 3em;
    }

    footer#colophon #copyright {
        float: left;
        padding: 2em 0 0 3em;
    }

/* Responsive styles */
@media screen and (max-width: 920px) {
    .site {
        overflow: visible;
    }

    .promo {
        font-size: 0.8em;
    }

    #newProducts img {
        width: 10em;
        max-height: 8em;
    }
}
@media screen and (max-width: 600px) {
    
    .site {
        padding: 0 1rem;
    }
	
	.site-width {
		text-align: center;
	}
	
	#subHead div {
		float:none;
		border:none;
		margin: 10px 0 0 -10px;
		
	}

	#subHead div div {
		float:none;
		padding-top: 5px;
		margin-bottom: 10px;
	}	
	
	#subHead h2 {
		line-height: 1.3em;
		font-size:0.9em;
		float:none;
	}
	
	#subHead h2 .dash {
		display:none;
	}
	
	#subHead h2 .location {
		display:block;
	}
	
    #menu-default {
        position: absolute;
        z-index: 100;
        background: #1188ba;
		margin: -7px 0 0 -95px;
		border: 3px solid #2f9ecd;
		width:200px;
    }
	
	.menu-toggle, .menu-toggle:hover, .menu-toggle.toggled-on {
		background:#F3F6F8 url('images/responsive_arrow.png') no-repeat 10px center;
		font-weight:bold;
		font-size:12px;		
		padding: 6px 14px 6px 35px;
	}
	
	#site-navigation {
        float: none;
		margin:0;
    }

	.main-navigation ul.nav-menu {
		text-align: left;
	}
	
    
    .main-navigation li {
        font-size: 1em;
        font-weight: normal;
		margin:0;
    }

    .main-navigation li a {
        color: #FFF;
        line-height: 1em;
        text-decoration: none;
		display: block;
		border-bottom: 1px solid #2f9ecd;
		padding: 8px 10px;
    }
	
	.main-navigation>li>a {
        color:#fff200;
    }
	
    .main-navigation li ul li a {
        background: none;
		padding-left: 25px;
    }

    #productContent article {
        width: auto;
    }

	#contentBanner {
		height:6em;
		background-size: 100% 100% !important;
	}
	
	#contentBanner h1 {
		overflow:hidden;
		font-size: 28px;
		margin-top: 1.9em;
	}
	
	#contentBanner #promoArea {
		width:auto;
	}
	
    #contentBanner #promoArea .testim {
        display: none;
    }
	
	#contentBanner #promoArea .promo {
		right:-5px;
	}
    
    .promo {
        font-size: 0.7em;
		top: -125px;
		margin-right:0;
		right:-5px
    }
	
	.gallery {
		display:none;
	}
	
	.gallery-single {
		display:block !important;
	}
	
	.gallery-single img {
		width:99%;
		border:2px solid #FFF;
		border-bottom:none;
	}
	
	#content {
		padding:0;
	}

}
@media screen and (max-width: 480px) {
    .site {
        overflow: visible;
    }
    
    #rightPanel {
        display: none;
    }

    #homeContent {
        width: auto
    }
}

@media screen and (max-width: 360px) {
    .promo{
		display:none;
    }
}

/* IE hacks */

html.ie8 body {
    background: #0771a5 url('images/clouds.png') top center no-repeat;
}

html.ie8 .main-navigation ul.nav-menu {
    border-bottom: none;
}

html.ie8 .main-navigation li {
    margin-right: 20px;
}

html.ie8 .main-navigation li ul li a {
    background: #1188ba;
    color: #FFF;
    border-bottom: 1px solid #2f9ecd;
}

html.ie8 .main-navigation li a:hover,
html.ie8 .main-navigation .current_page_item > a {
    background: #1188ba;
    color: #fff200;
}