/*
Theme Name:     Wonthaggie Electronics
Theme URI:      http://wonthaggielectronics.com.au/
Author:         Christine Sese

*/

/* =============================================================================
   Import Fonts
   ========================================================================== */
  @import url("../twentytwelve/style.css");
 
 
/************************************************************************************
*								                                     SITE LAYOUT    *
************************************************************************************/
	 body { background: #fff; font-family:Arial; color:#898989; padding:0; margin:0; }
	
	.header-wrapper,
	.content-area,
	.middle-wrapper,
	.bottom-wrapper,
	.footer-wrapper { width:960px; margin:0 auto;}
	
	h1 { color:#FFF; background:#022959; text-transform:uppercase; margin:0 0 30px 0; padding: 11px 15px;font-weight: normal;font-size: 28px;letter-spacing: -1px; word-spacing:2px;}
	h2 { text-transform:uppercase;}
	h3 { text-transform:uppercase;}
	h4 { color:#F70315;}
	a { color:#f70315; text-decoration:none;}
	a:hover { color:#f70315;}
	
	 .clear { clear:both;height:0;font-size: 1px;line-height: 0px;}
	 .left  { float:left; }
	 .right { float:right;}
	 
	/* * ---------------------- COLORING ELEMENTS ------------------------* */
	.header { background:#FFF;}
	.content-wrapper { background-color:#eeeeee;background-image: url(../img/contents-bk.jpg);background-repeat: no-repeat;background-position: center; }
	.content-area .vertical-menu h3 {color:#FFF; background:#f70315;}
	.middle-wrap .block .top .lbel,.bottom-wrap,h1 { background:#000183; }
	.middle-wrap { background:#FFF;}
	.footer { background:#f70315; color:#FFF;}
	
	.yellow { color:#fdd000; }
	.red,
	  strong { color:#F70315; }
	.bluelink { color:#f70315; }
	.big { color:#000; font-size:30px; margin:0 0 0 20px;}
	.white-bk { background:#FFF; padding: 0 22px 0 0; width:985px;}
	 
	/* * ---------------------- HIDDEN ELEMENTS ------------------------* */


  
/************************************************************************************
*								                                          HEADER    *
************************************************************************************/
	.header { height:152px; overflow:hidden;}
	.header-wrapper .logo { padding:24px 0; width:400px;}
	
	.header-wrapper .top-block1 { width:156px; height:150px;}
	.header-wrapper .top-block1 .top-links{ height:50px; padding:12px 2px; text-align:right;}
	.header-wrapper .top-block1 .top-links ul {list-style:none; margin:0; padding:0; }
	.header-wrapper .top-block1 .top-links ul li { display:inline-block; float:right;line-height: 48px; margin:0;}
	.header-wrapper .top-block1 .top-links ul li:nth-child(2) { margin:0 14px;}
	.header-wrapper .top-block1 .top-links ul li a { font-size:12px; color:#000183; text-decoration:none;text-transform: uppercase;letter-spacing: -1px;}
	
/* * ---------------------- SOCIALS TOP ------------------------* */
	.header-wrapper .top-block1 .socials{ height:50px; padding:5px 0;} 	
	.header-wrapper .top-block1 .socials ul {list-style:none; margin:0; padding:0; }
	.header-wrapper .top-block1 .socials ul li { display:inline-block; float:right;line-height: 48px; margin:0 2px;}
	.header-wrapper .top-block1 .socials ul li:nth-child(2) { margin:0 6px;}
	.header-wrapper .top-block1 .socials ul li a { font-size:12px; color:#000; text-decoration:none;}
	.header-wrapper .top-block1 .socials ul li a img { border:none;}
    .header-wrapper .top-block1 .socials ul li a img:hover { background:#f70315;}
    .header-wrapper .top-block1 .socials ul li:nth-child(2) a img:hover { background:#000183;}
	/* * ---------------------- END SOCIALS TOP ------------------------* */
	
	.header-wrapper .top-block2 { width:316px; height:150px; margin:0 10px;}
	.header-wrapper .top-block2 .contact-phone { height:50px; padding:0 12px 0px 45px; font-size:34px; color:#000183; background: url(../img/phone.png) no-repeat top left; margin-top:-16px;}
	.header-wrapper .top-block2 .search-box { margin-top:11px; background:#F5F5F5; height:48px;} 
	.header-wrapper .top-block2 .search-input { padding:14px 12px; background:#F5F5F5; border:none;width: 250px;}
	.header-wrapper .top-block2 .search-box .search-button { background:#f5f5f5 url(../img/search.gif) no-repeat top right; width:38px; height: 48px;border-style: none;text-indent: -9999em;
																float: right;margin: 0;cursor: pointer;}
	

 
/************************************************************************************
*								                                          CONTENT   *
************************************************************************************/
	.contents-bk { /*background:url(../img/contents-bk.gif) left top; width:1580px;*/ margin:0 auto; border-left:10px solid #FFF;border-right:10px solid #FFF; }
	.content-area { min-height:554px; padding-top:22px; padding-bottom:0;}
	.content-area .contents { width:710px; }
	.white-bk .contents { width:711px !important;padding: 0 21px 30px; }
	.content-area .contents h3,
	.content-area .contents h4 { color:#f70315; }
	.content-area .contents p,
	.content-area .contents h3,
	.content-area .contents h2  {}
	.content-area .contents p { margin:18px 0 18px 0;font-size: 14px;line-height: 21px;}
	.content-area .contents li { font-size: 14px;line-height: 18px; margin:5px;}
	.content-area .contents a { color:#f70315;}
	
	.content-area .layer1 { height:82px; }
	/*.content-area .layer1 .slogan-bk { width:93px; height:82px; background:url(../img/slogan-cut-bk.png) no-repeat top left; float:left;margin-bottom:21px;}*/
	.content-area .layer1 .slogan { width:670px;height:62px; color:#FFF;  background:#8f8f8f url(../img/slogan-bk.png) repeat top left; float:left;text-align:right; line-height:30px; 
	                                font-size:27px; padding:10px 20px; position:relative; left:-1px; }
	.content-area .layer1 .slogan img { border:none; margin-top:-10px;}
	.content-area .layer2 { height:405px; background:#FFF; margin:0 0 42px;}
	
/* * ---------------------- BANNER ------------------------* */
	.content-area .layer2 .banner{ background:#FFF; display:block; height:346px;}
	.content-area .layer2 .nav { height:43px; background:#000183; margin:38px 0;}
	.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom:-69px;}
/* * ---------------------- END BANNER ------------------------* */

	.content-area .layer3 { height:156px; background:#909090;}
	
/* * ---------------------- CONTACT US ------------------------* */
	.content-area .contactdet { margin:0 21px; width:290px;}
	.content-area .contactform { width:365px;}
	.content-area .contactform input[type=text],textarea { width:300px; padding:8px; background:#f2f2f2; border:none; font-family:arial;}
	.content-area .contactform td { font-size:14px;font-family:arial; margin:4px;}
	.content-area .contactform input[type=submit] { background:#f70315; width:120px; padding:10px; text-transform:uppercase; color:#fff; border-radius:10px; border:none; margin-top:20px;}
	.content-area .contactdet h3,
	.content-area .contactform h3{ color:#f70315; margin:15px 0 5px;}
	.content-area .contactdet p { margin:0;}
/* * ---------------------- CONTACT US ------------------------* */

/* * ---------------------- MENU ------------------------* */	
	.content-area .vertical-menu { width:230px; min-height:531px; background:#000183;}
	.content-area .vertical-menu h3 { height:54px; line-height:54px; margin:0; padding:0 15px;}
	.content-area .vertical-menu ul { list-style:none; margin:0; padding:0;}
	.content-area .vertical-menu ul ul{ display: none; }
	.content-area .vertical-menu ul li { padding:15px 0 0; border-bottom:1px solid #FFF; }
	.content-area .vertical-menu ul li:last-child { border:none;}
	.content-area .vertical-menu ul li a { text-decoration:none; color:#FFF; padding:0 15px 15px; font-size:14px; display:block;}
	.content-area .vertical-menu ul li:hover { background:#2260B7; }
	.content-area .vertical-menu ul li:hover > ul { display:block;
			-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;}
	.content-area .vertical-menu ul ul { }
	.content-area .vertical-menu ul ul li {  padding:10px 0 0; border-top:1px solid #FFF; border-bottom:none; background:#0001B2; }
	.content-area .vertical-menu ul ul li:last-child { border-top:1px solid #FFF;}
	.content-area .vertical-menu ul ul li a { padding:0 30px 10px;}
	.content-area .vertical-menu ul ul li li {  padding:8px 0 0; border-top:1px solid #FFF; border-bottom:none; background:#0002FF;  }
	.content-area .vertical-menu ul ul li li a { padding:0 40px 10px;}
/* * ---------------------- END MENU ------------------------* */

/* * ---------------------- PRODUCT ------------------------* */
	.content-area .products { margin:5px 21px; display:block; width:100%; clear:both;}
	.content-area .products .product { width:217px; height:220px; display:inline-block; float:left; margin:0 15px 20px 0; border:1px solid #fff;}
	.content-area .products .product img { width:217px; height:180px; overflow:hidden; margin:21px 25px 0 0;}
	.content-area .products .product h3 { background:#022959; display:block;margin: -4px 0 0 0;padding: 10px 0;text-align: center;line-height: 21px; color:#FFF; font-weight:normal;}
	.content-area .products .descrptn {}
	
	.content-area .prod { margin:21px 0; clear:both;}
	.content-area .prod .prodImg { margin:21px; width:220px; float:left;}
	.content-area .prod .prodImg img { width:220px; height:180px; overflow:hidden;}
	.content-area .prod .prodImg h3 { background:#022959; display:block;margin: -4px 0 0 0;padding: 10px 0;text-align: center;line-height: 21px; color:#FFF; font-weight:normal;}
	.content-area .prod .prodDesc { width:300px; float:left;}
	
	.content-area .prods { width: 280px;margin: 21px;min-height: 555px;display: inline-table;}
	.content-area .prods img { margin:0 21px;}
	
	.content-area  .product h3 { color:#000183; text-transform:capitalize;}
	.content-area  .product img { margin:21px 25px 21px 0; }
/* * ---------------------- END PRODUCT ------------------------* */
	
	.middle-wrap { height:482px; margin:21px auto;}
	.middle-wrap .block { height:458px; display:inline-block; float:left; margin:0 15px; background:#FFF; width:300px}
	.middle-wrap .block:nth-child(1) { margin-left:0;}
	.middle-wrap .block:nth-child(3) { margin-right:0;}
	.middle-wrap .block .top { height:156px; margin-bottom:21px;}
	.middle-wrap .block .top .img { height:108px; width:300px; overflow:hidden;}
	.middle-wrap .block .top .lbel{ height:48px;line-height: 48px;padding: 0 15px;text-transform: uppercase;color: #FFF;}
	.middle-wrap .block .bottom { height:281px; margin-bottom:21px; background:#eeeeee;}
	.middle-wrap .block .bottom h3 { padding:10px 10px 0; color:#333333; font-weight:600; margin:0;}
	.middle-wrap .block .bottom  ul { list-style:url(../img/list-icon.gif);}
	.middle-wrap .block .bottom  ul li { margin:10px 0;}
	.middle-wrap .block .bottom  ul li a { text-decoration:none; color:#898989;}
	.middle-wrap .block .bottom  ul li .bluelink { color:#000183; }
	
	.middle-wrap .block .bottom  .contact-us{ list-style:none; margin-left:50px; padding-top:3px; }
	.middle-wrap .block .bottom  .contact-us li { height:73px;}
	.middle-wrap .block .bottom  .contact-us li:nth-child(1) { list-style:url(../img/call.gif);}
	.middle-wrap .block .bottom  .contact-us li:nth-child(2) { list-style:url(../img/email.gif);}
	.middle-wrap .block .bottom  .contact-us li:nth-child(3) { list-style:url(../img/free.gif);}
	.middle-wrap .block .bottom  .contact-us li div { width:197px; display:inline-block;}
	.middle-wrap .block .bottom .contact-us h3 { padding:0; color:#000183; margin:0 0 16px 0; font-weight:bold; font-size:16px;}
	.middle-wrap .block .bottom .contact-us p { padding:0; margin:4px 0;line-height: 16px; font-size:13px;position: relative;top: -13px;}
	
	.bottom-wrap { height:239px; color:#FFF;}
	.bottom-wrapper { padding:10px;}
	.bottom-wrap .block { width:232px; height:239px; display:inline-block; float:left;margin: 0 2px;}
	.bottom-wrap .block h3{ padding:15px; margin:0;}
	.bottom-wrap .block p { padding:0 15px; margin:0; line-height:21px;}
	.bottom-wrap .block ul {list-style:none; margin:0; padding:0 15px; }
	.bottom-wrap .block ul li a { text-decoration:none; line-height:25px; color:#FFF;}
	.bottom-wrap .block:nth-child(3) li { float:left; margin:0 2px;}
	.bottom-wrap .block ul li a img:hover { background:#f70315;}
	.bottom-wrap .emailme { position:absolute; margin:0 10px; color:#FFF; text-decoration:none;}



/************************************************************************************
*								                                          FOOTER    *
************************************************************************************/
	.footer { height:60px; line-height:42px; font-size:14px;}
	.footer a { color:#fff; text-decoration:none;}


/************************************************************************************
*								                                    MEDIA QUERIES    *
************************************************************************************/