/* 
	Template: Greg Villers
	Author: Chad Smith - BC Gurus
*/

/* ===== Universals =========================== */
header{
    padding-bottom: 20px;
}
.alpha{
    background-color: #383838;
    padding-bottom: 20px;
}
.omega{
    background: #eaecee;
}

/* ===== Utility =========================== */
.utility{
    float: right;
}
nav[role="navigation"]{
    float: left;
}

/* ===== Logo =========================== */
.logo{
    display: block;
    height: 116px;
    margin:  20px auto 0;
    width: 111px;
}
.logo:hover{
    opacity: 0.7;

    /* Thank you IE 8! */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

/* ===== Main Search =========================== */
form[role="search"]{
    clear: right;
    margin: 0;
    position: relative;
}
form[role="search"] input[type="text"]{
    margin:  0;
}
form[role="search"] em{
    color: #999;
    position: absolute;
    right: 10px;
    top: 8px;
}

/* ===== Social Icons =========================== */
.social-icons{
    margin: 5px 0;
    overflow: hidden;
    padding: 0;
}
.social-icons li{
    display: inline;
    float: left;
    padding: 0 5px;
}
.social-icons li:last-child{
    padding-right: 0;
}
    .social-icons a:link,
    .social-icons a:visited{
        color: #acacac;
        font-size: 1.0875em;
    }
    .social-icons a.facebook:hover{color: #3B5998;}
    .social-icons a.twitter:hover{color: #00aced;}
    .social-icons a.skype:hover{color: #15adf0;}
    .social-icons a.youtube:hover{color: #be2a2d;}

/* ===== aside =========================== */
aside .side-nav{
    margin: 0 0 20px;
    padding: 0;
}
#home aside .side-nav{
    margin:  20px 0;
}
aside ul{
    padding-left: 0 !important;
}
aside li{
    background: url(images/icon-dots-grey.png) repeat-x scroll left bottom;
    list-style-type: none;
}
    aside li a:link,
    aside li a:visited{
        background: url(images/icon-arrow-right-grey.png) no-repeat scroll left center;
        display: block;
        font-size: .95em;
        margin: 0 0 0 10px;
        padding: 8px 10px;
    }
    aside li a:active,
    aside li a:hover,
    aside .selected a:link,
    aside .selected a:visited{
        color: #555;
        padding-left: 15px;
    }
aside .side-nav li:first-child,
aside li:last-child{
    background: none;
}
    aside .side-nav li:first-child a{
        background: none;
        color: #b78337;
        font-family: 'LatoRegular', Arial, sans-serif;
        font-size: 1.125em;
        margin: 0 0 4px 10px;
        padding: 0;
        text-transform: uppercase;
    }

aside h5 {
    background: url(images/icon-dots-grey.png) repeat-x scroll left bottom;
    color: #B78337;
    font-size: 1.125em;
    margin: 0 0 10px 10px;
    padding: 0 0 5px;
    text-transform: uppercase;
    width: 90%;
}
#home aside h5{
    margin:  20px 0 10px 10px;
}
aside > a{
    font-size: .75em;
    margin-left: 10px;
}
.collapse .side-post,
.collapse .side-nav li{
    width: 92%;
}
aside p{
    font-size: 80%;
    width: 92%;
}

/* ===== aside Blog Post =========================== */
.side-post{
    background: url(images/icon-dots-grey.png) repeat-x scroll left bottom;
    font-family: 'LatoRegular';
    font-size: 80%;
    margin: 0 0 10px;
    padding: 0 10px 10px;
}
.side-post:last-child{
    background: none;
}
.side-post p{
    font-size: 1em;
    margin: 0;
}
.side-post span{
    color: #999;
    display: block;
    font-size: 90%;
    margin: 4px 0;
}

/* ===== Service Box =========================== */
.bg-alt{
    background: #e4e7e9;
    color: #444;
    font-size: .875em;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 25px;
}
.bg-alt p{
    margin: 0 0 5px;
}
.bg-alt.testimonial{
    background: #e4e7e9 url(images/quotes.gif) no-repeat scroll 0 0;
}

/* ===== Inner Page Title =========================== */
.page-title{
    background-color: #3c8cbf;
    background-color: rgba(60, 140, 191, 0.78);
    color: #fff;
    height: 143px;
    margin: -143px 0 30px;
    padding: 31px 0 0 30px;
}
.page-title h2{
    color: #fff;
    font-family: 'LatoBold';
    font-size: 3.25em;
}
.page-title h6{
    color: #fff;
    font-family: 'LatoRegular';
    font-size: 1.25em;
}

/* ===== Client List =========================== */
.box{
    margin: 0 auto 30px;
    position: relative;
    max-width: 375px;
}
.box.gallery{
    margin:  0 auto;
}
.box-info{
    background-color: #3c8cbf;
    background-color: rgba(60, 140, 191, 0.78);
    color: #fff;
    font-family: 'LatoRegular';
    font-size: .875em;
    height: 100%;
    left: 0;
    max-width: 375px;
    opacity: 0;
    padding: 50px 20px 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;

    /* Thank you IE 8! */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    -webkit-backface-visibility: hidden;

    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.box-info:hover{
    opacity: 1;

    /* Thank you IE 8! */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.box-info p{
    margin: 0 0 5px;
}
.box-info h3{
    margin: 0 0 5px;
}
    .box-info a:link,
    .box-info a:visited{
        color: #fff;
    }
    .box-info a:active,
    .box-info a:hover{
        color: #444;
    }
.box-links{
    position:  absolute;
    right: 10px;
    top: 10px;
}
    .box-links a:link,
    .box-links a:visited{
        color: #fff;
    }
    .box-links a:active,
    .box-links a:hover{
        color: #555;
    }

/* ===== Blog Post List View =========================== */
article header{
    padding-bottom: 10px;
}
header h1{
    font-family: 'LatoBold';
    font-size: 1.25em;
}
header p span{
    border-left: 1px solid #999;
    color: #999;
    font-size: 87%;
    padding: 0 6px;
}
header p span:first-child{
    border: none;
    padding-left: 0;
}
article{
    background: url(images/icon-dots-grey.png) repeat-x scroll left bottom;
    margin: 0 0 30px;
    padding:  0 0 10px;
}
article:last-child{
    background: none;
}
article p{
    font-size: 95%;
}
.page-nav{
    margin: 0;
    overflow: hidden;
    padding: 5px 20px;
}
.pagination{
    font-size: .75em;
}
    .pagination a:link,
    .pagination a:visited{
        margin: 0 3px;
    }
    #previouspage,
    #nextpage{
        height: 20px;
        text-indent: -9999em;
        width: 5px;
        position: absolute;
    }
    #previouspage{
        background: url(images/icon-arrow-left-dgrey.gif) no-repeat scroll 0 9px;
        margin: 0 0 0 -10px;
    }
    #nextpage{
        background: url(images/icon-arrow-right-dgrey.gif) no-repeat scroll 0 9px;
        margin: 0 0 0 10px;
    }

/* ===== Blog Comments =========================== */
div[role="main"] .blog-comments{
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.comments{
    list-style:  none;
}
.comment{
    margin: 5px 0;
    overflow: hidden;
}
.comment ul {
    font-size: 1em;
}
.comment-author{
    overflow: hidden;
}
.author-img{
    float: left;
    width: 47px;
}
.author-deets{
    float: left;
    margin: 0 0 0 10px;
    overflow: hidden;
    width: 75%;
}
.author-deets .author{
    font-size: 1.25em;
}
.author {
    margin: 0;
}
.comment-date{
    font-size: .825em;
    padding: 0;
    display: block;
}
.comment-date a{
    color: #999;
}
.comment-text{
    clear: both;
    font-size: .875em;
    margin: 10px 0;
    overflow: hidden;
}
.comment-text p{
    margin: 0;
}
.comment-form{
    margin: 20px 0;
}

/* ===== FAQ's =========================== */
.faq-question{
    background: #fbfbfb;
    border-bottom: 2px solid #efefef;
    margin: 0 0 20px;
    padding: 10px 20px;
}
.faq-question h2{
    line-height: 16px;
}
    .faq-question h2 a:link,
    .faq-question h2 a:visited{
        font-size: 50%;
    }
.faq-question p{
    font-size: 90%;
    margin: 0;
}
.faq-question .answer p,
.faq-question .comment-form{
    font-size: 40% !important;
    margin: 30px 0 0;
    color: #222;
}
.faq-question .comment-form input[type="text"],
.faq-question .comment-form input[type="email"],
.faq-question .comment-form textarea{
    background: #fff;
    width: 100%;
}

/* ===== Team Info =========================== */
.team-info h5{
    background: url(images/icon-dots-grey.png) repeat-x scroll left bottom;
    padding: 0 0 8px;
}
.team-info p,
.team-info ul{
    font-size: 90%;
}

/* ===== because captcha needs help =========================== */
body .row .recaptchatable #recaptcha_response_field {
    bottom: 1px!important;
    margin: 4px 0 0 0!important;
}
.recaptcha_only_if_privacy {
    line-height: 12px;
}

/* ===== Footer =========================== */
footer,
footer h6{
    color: #acacac;
}
footer h6{
    text-transform: uppercase;
}
footer p{
    font-size: .8125em;
}
footer .logo{
    margin: 80px auto 40px;
}
.section{
    padding: 20px 0;
}
footer .social-icons{
    float: none !important;
}

/* ===== Footer Blog =========================== */
.post{
    background: url(images/icon-dots-grey.png) repeat-x scroll left bottom;
    margin: 0 0 10px;
    padding: 0 0 10px;
}
.post:last-child{
    background: none;
}
.post p{
    margin: 0;
}
    .post a:link,
    .post a:visited,
    .blog-date{
        color:  #fff;
        display: inline-block;
    }
    .post a:active,
    .post a:hover{
        color:  #acacac;
    }

/* ===== Facebook Comments =========================== */
.fb_iframe_widget, .fb_iframe_widget iframe, .fb_iframe_widget span {
	width: 100% !important; }
#twitter-widget-0{
    min-width: inherit !important;
}

/* ===== Online Shop =========================== */
.productList,
.productList ul,
.catalogueList{
    margin: 0 0 20px;
    overflow: hidden;
    padding: 0 !important;
}
.productList li,
.catalogueList li{
    display: inline;
    list-style-type: none;
}
.productList ul li{
    display: block;
}
li.price{
    color: #B78337;
    font-size: 2em;
    margin: 0 0 10px;
}

/* ===== Checkout Form =========================== */

.form-row {
    border-bottom: 1px solid #EDEDED;
    overflow: hidden;
    padding: 15px 0;
}

legend {
	font-weight: bold;
}

.info-section {
	width:30%;
	float: left;
}

.info-section p {
	padding-right: 15px;
}

.form-section {
	width: 70%;
	float: left;
}

label.left {
	float: left;
	line-height: 35px;
	margin-right: 5px;
}

.shop-checkout.shop-form label {
	display: block;
}

.form-detail {
    float: left;
    width: 250px;
}
.form-detail legend{
	font-family: 'Open Sans', sans-serif;
	font-size: 1.4em;
	font-weight: 400;
}
.form-detail p{
	font-size: 12px;
}
.form-data {
    float: right;
    width: 450px;
}
#payment-form .form-detail {
    width: 255px;
}
#payment-form .form-data {
    width: 570px;
}
#payment-form label {
    width: auto;
}
#payment-form input.cat_textbox {
	border: 1px solid #999;
	padding: 3px;
}

#payment-form select.cat_dropdown {
    height: 32px;
    margin-top: 3px;
}

select.short,  {
    width: 117px !important;
    float:left;
}

input.cat_textbox.sm {
	width:70px !important;
}
#payment-form input.purchase-amount {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #222222;
    display: inline;
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    width: 53px;
}
#purchase-total {
    background: none repeat scroll 0 0 #FAFAFA;
    border-bottom: 1px solid #EDEDED;
    border-top: 1px solid #EDEDED;
    margin-bottom: 20px;
    padding: 10px;
}

.purchase-amount {
	float: none !important;
	box-shadow: none !important;
}

#purchase-total span {
	font-weight: bold;
	font-size: 16px;
	color: #999;
	padding-left: 10px;
}

/* ===== @Media Queries =========================== */


@media screen and (min-width:48em) and (max-width:60.1875em){ 
    .top-bar-section li a:not(.button) {
      padding: 20px 15px 0; }
    .top-bar-section .has-dropdown > a:after {
        top: 45%; }
}
@media screen and (max-width:60.1875em){ 
    .utility{
        float: none !important; }
    .top-bar{
        height: 45px;
        margin-bottom: 0; }
    .top-bar-section li a:not(.button) {
      padding: 15px; }
}
@media screen and (max-width:47.9375em){  
    header{
        padding-bottom: 0; }
    nav[role="navigation"]{
        float: none !important; }
    .page-title {
        display: none; }
}
@media screen and (max-width:780px){    
	#calendar-container {
		display: none; }
	#shippingSpan {
		display: block;
		clear: both; }
    aside{
        margin: 0 0 30px;
    }
}
@media screen and (max-width: 30.3125em){
  .webform td{
    display: block;
  } 
  #catwebformbutton{
    width: 100%;
  }
}

/* ===== @font-face =========================== */
@font-face {
    font-family: 'LatoBlack';
    src: url('fonts/Lato-Bla-webfont.eot');
    src: url('fonts/Lato-Bla-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lato-Bla-webfont.woff') format('woff'),
         url('fonts/Lato-Bla-webfont.ttf') format('truetype'),
         url('fonts/Lato-Bla-webfont.svg#LatoBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'LatoBold';
    src: url('fonts/Lato-Bol-webfont.eot');
    src: url('fonts/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lato-Bol-webfont.woff') format('woff'),
         url('fonts/Lato-Bol-webfont.ttf') format('truetype'),
         url('fonts/Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'LatoRegular';
    src: url('fonts/Lato-Reg-webfont.eot');
    src: url('fonts/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lato-Reg-webfont.woff') format('woff'),
         url('fonts/Lato-Reg-webfont.ttf') format('truetype'),
         url('fonts/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'LatoHairline';
    src: url('fonts/Lato-Hai-webfont.eot');
    src: url('fonts/Lato-Hai-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lato-Hai-webfont.woff') format('woff'),
         url('fonts/Lato-Hai-webfont.ttf') format('truetype'),
         url('fonts/Lato-Hai-webfont.svg#LatoHairline') format('svg');
    font-weight: normal;
    font-style: normal;

}