/*
Theme Name: 	TriLube
Theme URI: 		http://www.elevenmedia.com.au
Description: 	WordPress Theme
Version: 		2013
Author: 			Eleven Media 
Author URI: 	http://www.elevenmedia.com.au
*/

/* =============================================================================
   General Styles
   ========================================================================== */
   body { background:#eeeff0;  font-size:12px; line-height:20px; font-family: 'Lato', sans-serif;  
       -webkit-font-smoothing: antialiased;  }
   h1,h2,h3,h4,h5,h6 { font-weight: bold; padding-top: 5px; padding-bottom: 5px; font-family: 'Lato', sans-serif;  }
   h1 { font-size:32px; line-height:42px; color:#12295e; } 
   h2 { font-size:18px; line-height:35px; color:#12295e; }
   h3 { font-size:14px; line-height:26px; color:#636874; text-transform: uppercase;}
   h4 { font-size:13px; line-height:22px; color:#12295e; } 
   h5 { font-size:18px; line-height:22px; color:#12295e; }
   h6 { font-size:18px; line-height:22px; color:#12295e; } 
   p  { font-size:14px; line-height:21px; color:#636874; padding-top: 5px; padding-bottom: 5px; }
   ul { margin: 0; padding: 0; }
   ol { margin: 0; padding: 0;}
   li { font-size:13px; line-height:18px; color:#636874; }
   hr { outline:none; border:none; border-top:1px solid #e8e8e8; margin:10px 0px;}
   
   a:link 		{ color:#12295e; text-decoration: none;} 
   a:visited 	{ color:#12295e000; text-decoration: underline;}
   a:hover 		{ color:#12295e000; text-decoration: underline;}
   a:active 	{ color:#12295e000; text-decoration: underline;}
   a:focus 		{ outline-style: none;}  	
 
/* =============================================================================
   Structure
   ========================================================================== */ 
   .grid-container { margin: 0 auto; max-width: 1200px;}
   .mwmh { max-width: 100%; max-height: 100%;}
      
/* =============================================================================
   Header
   ========================================================================== */    
   .header-wrap { background: #FFF;}
   .page-wrap { width: 100%; background: url(images/sub-page-wrap-bg.jpg) top center no-repeat;}
   .nav-wrap { background: url(images/nav-row-bg.jpg) top center repeat-x; }
   
   .header-wrap .contact span { color:#284985; line-height: 35px; font-size: 17px; padding-left: 40px; 
   display: inline-block;  font-weight: 700; text-align: right; }
   .header-wrap .contact .phone {  background: url(images/icon-phone.jpg) top left no-repeat;  }
   .header-wrap .contact .email {  background: url(images/icon-mail.jpg) top left no-repeat;  }
   .header-wrap .byline p { font-weight: 700; font-size: 22px; text-align: right; line-height: 40px; font-style: italic; color: #fec524;   }

   .desktop-nav { float:left;}
   .desktop-nav ul {text-align:center;} 
   .desktop-nav ul li {float:left;display:inline;position: relative;}
   .desktop-nav ul li a {display:block;padding:0px 10px;color:#FFF; line-height: 78px; font-size: 14px; font-weight: 700;
    background: url(images/nav-row-bg.jpg) top center repeat-x;  }
   .desktop-nav ul li a:hover { text-decoration: none; color: #fec524; } 

   
   .desktop-nav ul li.current_page_item a {  background: #0e2050; }
   .desktop-nav ul li.current_page_item ul li a {  background: #0e2050;  }

.desktop-nav ul li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
}

.desktop-nav ul li:hover ul {
	display: block;
	background-color: #0e2050;
	width: 200px;
}

.desktop-nav ul li ul li a {
	background: none;
	padding: 10px;
	line-height: 14px;
	font-size: 14px;
}
/* =============================================================================
   Home Page Styles 
   ========================================================================== */ 
	.cycle-slideshow { width: 100%; overflow: hidden;}
	.cycle-slideshow img {width: 100%;}
	.cycle-navigation > * { cursor: pointer; }
	.cycle-navigation { position: relative; }
	.cycle-navigation span { position: absolute; background: #222; color: #FFF; width: 80px; height: 80px; line-height: 80px; text-align: center; }
	.cycle-navigation .prev { left: -100px; top:200px; }
   .cycle-navigation .next { right: -100px; top:200px; }
  
  
/* =============================================================================
   Sub Page Styles 
   ========================================================================== */ 
   .content-col { background: #FFF; border: 1px solid #d7d7d7; }
   .sidebar { background: #FFF; border: 1px solid #d7d7d7; }
   
   .side-nav h3 { padding: 0; margin: 0; font-size: 14px; text-transform: uppercase; color: #6c7881; line-height:20px; padding:20px;  }
   
   .side-nav ul li a { font-weight: bold; background: #f1f1f1; display: block; border-bottom: 1px solid #d7d7d7; 
      line-height: 20px;  color: #152a5e;  padding: 10px 20px;   }
      
   .side-nav ul li ul.children li a { display: block; font-weight: normal; background: #FFF; line-height: 20px;  padding: 10px 0 10px 20px;  
      color: #152a5e;  }
      
   .side-nav ul li ul.children li.current_page_item a { background: #fec524;}
      
   .side-nav .children { display: none; }
   .side-nav li.current_page_item .children { display: block;}
   .side-nav li.current_page_ancestor .children { display: block;}
      
/* =============================================================================
   Row Styles
   ========================================================================== */ 
   .row { padding-top: 5px; padding-bottom: 10px; clear: both;   }
   
   .row.banner img { max-width: 100%; }
   .gallery-item { display: block; margin-bottom: 20px; height: 160px; overflow: hidden; border: 1px solid  #d7d7d7;
   background: #f1f1f1; }
   
   .product-gallery-item { border: 1px solid #d7d7d7; background: #FFF; height: 280px; position: relative; margin-bottom: 20px;
   display: block; overflow:hidden; }
   .product-gallery-item .caption { position: absolute; bottom: 0; left: 1px; width: 100%; display:block; 
   color: #FFF; text-transform: uppercase; padding: 5px 10px; background: #102355; font-size: 14px; font-weight: 700;   }
  
   .content ul { padding: 0; margin: 0; margin-left: 10px; padding-bottom: 20px;  }
   .content ul li {  display: inline-block; float: left; width:100%; line-height: 20px; padding-left: 20px;
   margin-top: 5px; margin-bottom: 5px; background: url(images/list-row-li.jpg) top left no-repeat; }
   .content p { clear: both; }
   
   .list-row ul { margin: 0; padding: 0; margin-left:10px; display: block; width: 100%; border-top:1px dashed #d7d7d7; 
   padding-top: 10px; }
   .list-row ul li {  display: inline-block; float: left; width:100%; line-height: 20px; padding-left: 20px;
   margin-top: 5px; margin-bottom: 5px; background: url(images/list-row-li.jpg) top left no-repeat; }
   
   .downloads-row ul li { background: url(images/downloads-row-li.jpg) top left no-repeat; padding-left: 30px;}
   .downloads-row ul li a { font-weight: 700; }
   
   .cta-wrap { background: #f6f6f6; padding: 30px 40px; border: 1px solid #cfd3d6; margin-top: 20px;  }
   .cta-wrap p { font-weight: 700; font-size: 18px; line-height: 52px; color: #12285e; }
   .cta-wrap a { line-height: 52px; color: #FFF; padding: 0 40px; background: url(images/cta-btn-bg.jpg) top center repeat-x;
      display: inline-block; float: right; font-size: 13px; 
       -moz-border-radius: 5px;  -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;    }
       
   .featured-product { padding-bottom: 10px;  border-bottom: 1px solid  #d7d7d7;  }
   .featured-product img {   border: 1px solid  #d7d7d7;  }
       
    .brand-row { padding-bottom: 10px;  border-bottom: 1px solid  #d7d7d7;  }

/* =============================================================================
   Footer Styles
   ========================================================================== */ 
   .copyright p { font-size: 12px; line-height: 40px; margin-bottom: 20px; color: #ababab;}  

/* =============================================================================
   Flexnav styles  
   ========================================================================== */  
   .mobile-nav { display: inherit; clear: both; position: relative; width: 100%; z-index: 6000;}
   .flexnav { *zoom: 1; -webkit-transition: 0; -moz-transition: 0; -o-transition: 0;  transition: 0; clear: both;
     -webkit-transform-style: preserve-3d; overflow: hidden; margin: 0 auto; width: 100%; max-height: 0; }
   .flexnav:after { content: "";   display: table;  clear: both; }
   .flexnav.show { max-height: 2000px; -webkit-transition: 1s;  -moz-transition: 1s; -o-transition: 1s;  transition: 1s; } 
   .flexnav li { font-size: 100%; position: relative;  overflow: hidden; line-height: 50px; }
   
   /* first level  */
   .flexnav li a { position: relative; display: block; z-index: 2;  overflow: hidden; color: #FFF; background: #333;
    border-bottom: 1px solid #111;   padding-left: 20px; font-family: 'Ropa Sans',Arial, Helvetica, sans-serif; 
    font-size: 14px;}
   .flexnav li a:hover { text-decoration: none; }
   .flexnav li ul { width: 100%; }
   .flexnav li ul li { font-size: 100%;  position: relative;  overflow: hidden; }
   .flexnav li ul.show li { overflow: visible; }
   
   /* second level  */
   .flexnav li ul li a {  display: block;  background: #222; padding-left: 30px; }
   
   /* third level  */
   .flexnav ul li ul li a {   background: #000; padding-left: 40px; border-bottom: 1px solid #777;  }
   
   /* rhs button styles level  */
   .flexnav .touch-button { position: absolute;  z-index: 999;  top: 0; right: 0;  width: 50px; height: 50px; display: inline-block;     background: #111;   text-align: center; } 
   .flexnav .touch-button:hover { cursor: pointer; }
   .flexnav .touch-button .navicon {  position: relative;  line-height: 50px;   font-size: 12px;  color: #FFF; }
   
   /* menu button */
   .menu-button { display: block; padding-left: 20px; line-height: 50px;  background: #222; color: #FFF; cursor: pointer; 
   border-bottom: 1px solid #021f36; font-family: 'Ropa Sans',Arial, Helvetica, sans-serif;  font-size: 14px; }
   .menu-button .touch-button {  background: #111;  position: absolute;  z-index: 999; top: 0;  right: 0;
   width: 50px;  height: 50px; display: inline-block; text-align: center; }
   .menu-button .touch-button .navicon {  font-size: 14px;  position: relative; line-height: 50px; color: #FFF; }
   

   	
/* =============================================================================
   Gravity form styles  
   ========================================================================== */ 
   .gform_body {}
   .gform_body ul {}
   .gform_body li  { margin-top: 10px;}
   .gfield label { font-weight: bold; }
   .gfield input[type=text] 	{ box-sizing: border-box; font-size: 14px !important;  height:35px; padding:10px; 
   border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
   -webkit-box-shadow: inset 0 3px 4px #f8f8f8;-moz-box-shadow: inset 0 3px 4px #f8f8f8; box-shadow:
   inset 0 3px 4px #f8f8f8; width:100%;  }
   
   .gfield  select	{ box-sizing: border-box; font-size: 13px !important;  height:35px; padding:10px; border: 1px solid #ccc;
   -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; width:100%; }
   
   .gfield textarea 	{ box-sizing: border-box;  font-size: 13px !important;    padding:10px;  border: 1px solid #ccc; 
   -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;  width:100%;}
   
   .gform_footer input[type=submit] {  box-sizing: border-box;  background-color:#555;    border:1px solid #000; 
   color:#ffffff;    -moz-border-radius:3px;   -webkit-border-radius:3px; border-radius:3px;  display:inline-block;  
   font-size:15px;   font-weight:normal; padding:10px 30px; margin-bottom: 20px; margin-top: 10px; }
   
   .gform_footer input[type=submit]:hover {    cursor:pointer;    background-color:#222;  }   
   .gform_wrapper .gform_footer { margin: 0; padding: 0;}
   .gform_description { font-size: 12px; line-height: 25px; color: #5c5c5c; margin-bottom: 15px;}
   .gform_heading {  margin-bottom: 20px;}
   
/* =============================================================================
   small / mobile media query
   ========================================================================== */
   @media only screen and (min-width: 320px) and (max-width: 1023px)   {	
   .content-col-wrap { padding: 0;}
   .grid-container { padding: 0;}
   
   .header-wrap .contact span { display: block; width: 250px; float: none; margin: 0 auto; text-align: left;}
   
   .home-headline p { text-align: center; color: #FFF; font-weight: 700; font-size:16px; line-height: 26px; padding:20px; }
   .home-slider-caption { width: 100%; background: #061e5a; padding: 0 10px; line-height: 40px; color: #FFF; display: block;
   font-size: 14px; font-weight: 700; margin-bottom: 20px; text-align: center; }
   a:hover.home-slider-caption { text-decoration: none; color: #fec524; }
   
   .logo {width: 280px; display:block; margin: 0 auto; float: none} 
   .contact span { color:#284985; line-height: 3r5px; font-size: 14px; padding-left: 40px; 
   display: inline-block; margin-top: 0px; font-weight: 700; text-align: right; }
   
   .sidebar { display: none;}
   
   }
   
   

     
/* =============================================================================
   large / desktop media query
   ========================================================================== */
   @media only screen and (min-width: 1024px) {
   
   .home-headline p { text-align: center; color: #FFF; font-weight: 400; font-size: 28px; line-height: 45px; padding: 60px 100px; }
   .home-slider-caption { width: 100%; background: #061e5a; padding: 0; line-height: 70px; color: #FFF; display: block;
   font-size: 24px; font-weight: 700; text-align: center; }
   a:link.home-slider-caption { color: #FFF;}
   a:hover.home-slider-caption { text-decoration: none; color: #fec524; }
   
   .header-wrap .contact span { margin-top: 30px; }
   
   .sub-page-container { margin-top: 30px;}
   .content-col { background: #FFF; border: 1px solid #d7d7d7; padding: 40px; }
   
   .logo { display: block; margin:10px 0;}

   .list-row ul { margin: 0; padding: 0; margin-left:10px; display: block; width: 100%; border-top:1px dashed #d7d7d7; 
   padding-top: 10px; }
   .list-row ul li { float: left; width: 48%; line-height: 20px;
   margin-right: 2%; margin-top: 5px; margin-bottom: 5px;  }
   
   }
      

/* =============================================================================
   End of CSS file
   ========================================================================== */

.wpcf7-form {
	margin: 0;
}

.wpcf7-form label {
	font-weight: bold;
}

.wpcf7-form label input, .wpcf7-form label textarea {
	border: 1px solid #ccc;
	width: 100%;
	padding: 5px;
	margin-top: 5px;
	box-sizing: border-box;
}

.wpcf7-form input[type=submit] {
	background-color: #12295e;
	color: #fff;
	font-size: 110%;
	border-radius: 3px;
	border: none;
	padding: 10px 20px;
}