/*   
Theme Name: Berwick Village Vet 
Theme URI: http://www.elevenmedia.com.au
Description: WordPress theme 
Author: Eleven Media 
Author URI: http://www.elevenmedia.com.au 
Version: 2011
*/



/* main layout */
  * {margin:0px; padding:0px;}
  img { border:0px;}
  body { margin:0px; padding:0px; background: url(images/bg.jpg) top center repeat-x #bbe0ea;  font-size:12px; line-height:20px; font-family: 'Questrial', sans-serif;   }

/* font styles */	
  h1 { font-size:30px; line-height:50px; color:#926f16; padding:0px; margin:0px; font-weight:normal; text-shadow: 0 2px 2px #FFF;  font-family: 'Questrial', sans-serif;  } 
  h2 { font-size:18px; line-height:40px; color:#125f7a; padding:0px; margin:0px; font-weight:normal; font-family: 'Questrial', sans-serif;}
  h3 { font-size:16px; line-height:30px; color:#125f7a; padding:0px; margin:0px; font-weight:normal; }
  h4 { font-size:18px; line-height:22px; color:#125f7a; padding:0px; margin:0px; font-weight:normal; } 
  h5 { font-size:18px; line-height:22px; color:#125f7a; padding:0px; margin:0px; font-weight:normal; }
  h6 { font-size:18px; line-height:22px; color:#125f7a; padding:0px; margin:0px; font-weight:normal;} 
  p  { font-size:14px; color:#111; line-height:26px; margin:0px; padding:0px; padding-top:5px; padding-bottom:10px;}
  ul { padding:0px; margin:0; margin-left:00px;   }
  ol {padding:0px; margin:0px; padding-left:5px; }
  li { font-size:12px; color:#111; list-style:none; background:url(images/li.png) top left no-repeat; line-height:24px; padding-left:15px; }
	
  .slide-copy p,.banner-copy p 	{ color:#7a5d13; font-size:14px; line-height:25px;   }	
   .banner-copy h2  { color:#7a5d13;   }	
 
/* link styles */	
  a:link 		{color:#125f7a;	text-decoration: none;} 
  a:visited 	{color:#125f7a; text-decoration: underline;}
  a:hover 		{color:#125f7a; text-decoration: underline;}
  a:active 		{color:#125f7a; text-decoration: underline;}
  a:focus 		{outline-style: none;}  	
 
 .wrap {width:960px; margin-left:auto; margin-right:auto; overflow:hidden; }
  
/* header nav styles */ 
   #header { width:960px; height:181px; background:url(images/header-bg.jpg) top center no-repeat; display:block;}
  
  .logo { width:219px; height:115px; display:inline; float:left;}
  .facebook { width:44px; height:44px; display:inline; float:right; position:relative;  margin-top:41px; background:url(images/icon-fb.png) top center no-repeat; opacity: 0.8;}
  .twitter { width:44px; height:44px; display:inline; float:right; position:relative; margin-right:5px; margin-top:41px; background:url(images/icon-twitter.png) top center no-repeat; opacity: 0.8;}
  .mobmenu { display: block; }
  a:hover.facebook { opacity:1;}
  a:hover.twitter { opacity:1;}
  
  .nav { width:940px; height:51px; float:left;  overflow:hidden; margin-left:10px; margin-bottom:15px;  }
  .nav ul {	display: inline; list-style: none;  margin:0px; padding:0px; width:940x; height:51px; float:left;   }
  .nav ul li { float: left;  display: inline;  font-size: 13px; margin:0px; padding:0;  }
  .nav ul li a { display:block; color:#FFF;  height:51px; line-height:51px; text-decoration:none; background: url(images/main-nav-li.png) top right no-repeat; padding-left:15px; padding-right:15px; _display:inline; *display:inline; }
  .nav ul li a:hover {  color:#FFF;   text-decoration:none;  margin-top:0; background: url(images/main-nav-li.png) bottom right no-repeat;}
   .nav ul li ul {position:absolute;width:240px;background:#0F5066; z-index: 2000; padding-top: 20px;} 
   .nav ul li ul li {width:240px;}
   .nav ul li ul li a {ine-height: 20px; background: #0F5066; }
   .nav ul li ul li:hover a {background:#004A73; }
   .nav ul li ul.children {display:none;}
   .nav ul li:hover ul.children {display:block;}
   .nav2 { display: none; }


/* home page styles */ 

.home-slider { clear:both; height:404px; width:960px; }
 
.slide { height:404px; } 
.slide-copy { display:inline; float:left; margin-top:60px; margin-left:50px; position:absolute; z-index:10; width:450px; background:#fff; border-radius: 25px;
   padding:20px; }

.promo-wrapper { clear:both;  width:1005px; margin-left:-44px; height:220px; margin-top:60px;}
.promo { display:inline; float:left; width:291px; height:170px; margin-left:44px; }
.thumb { width:291px; height:170px; overflow:hidden; }


.home-content { width:950px; border:5px solid #edf7fa; background:#FFF; clear:both;}
.home-col-1 { display:inline; float:left; margin-top:20px; margin-left:20px; width:400px; }
.home-col-2 { display:inline; float:right; margin-top:20px; margin-right:20px; width:400px; }


/* sub page styles  */

.banner { width:960px; height:310px; overflow:hidden; clear:both;}
.banner-copy {  display:inline; float:left; margin-top:35px; margin-left:50px; width:620px; } 

.sub-content { width:950px; border:5px solid #edf7fa; background:#FFF; clear:both; border-top:none;}
.sub-col-1 { display:inline; float:left; margin-left:20px; width:550px; }
.sub-col-wide { display:inline; float:right; margin-right:20px; width:890px; }

.sidebar { width:291px; display:inline; float:right; margin-right:30px; margin-top:20px;}


.contact-form { width:425px; hdisplay:inline; float:left; margin-left:20px; overflow:hidden; margin-bottom:10px;  }
.contact-map { width:425px; height:425px; display:inline; float:right; margin-right:20px; border:1px solid #125f7a; overflow:hidden; margin-bottom:10px;  }

/* footer styles */ 
    #footer  {width:960px; height:80px; border-top:1px solid #78c7dd; clear:both; margin-top:20px; } 
	
   .footer-col-1 { display:inline; float:left; margin-top:10px;  width:500px; color:#125f7a; text-align:left; }
   .footer-col-1 p { color:#125f7a; text-align:left; font-size:12px; line-height:30px;}
	
   .footer-col-2 { display:inline; float:right; margin-top:10px; width:400px; }
   .footer-col-2 p { color:#125f7a; text-align:right; font-size:18px; line-height:30px;}


/* grvity form styles */
   .gform_title { display:none;} 
   .gform_description  { display:none;} 
	.gform_wrapper ul { margin:0; padding:0;}
	.gform_wrapper li  { margin:0; padding:0; font-size:16px; color:#555; line-height:30px;  } 
	
	.gfield_label { clear:both; margin-top:20px; color:#555; font-size:14px;}
	.ginput_container input { border:1px solid #ccc; width:400px; height:30px; line-height:30px; font-size:16px; padding:5px; margin-bottom:10px; background-color:#f1f1f1;}
	.ginput_container select { border:1px solid #999; width:400px; height:30px; line-height:30px; font-size:16px; padding:5px; margin-bottom:10px;} 
	.ginput_container textarea { border:1px solid #ccc;background-color:#f1f1f1; width:400px; line-height:18px; font-size:14px; padding:5px; margin-bottom:10px; font-family: Arial, Helvetica, sans-serif; height:100px;} 
	.gfield_checkbox input { width:20px; height:20px; margin-right:20px;}
	
	.gform_button 			{ width:200px; height:30px; margin-top:5px; font-size:12px; border:1px solid #ccc; }
	.gfield_description 	{ font-size:12px; color:#8d8d8d; line-height:22px; margin:0px; padding:0px; padding-top:5px; padding-bottom:10px; }
	.gsection_description	{ font-size:12px; color:#8d8d8d; line-height:22px; margin:0px; padding:0px; padding-top:5px; padding-bottom:10px; }
	
/* content styles */
	.clear { clear:both;}
	
	.gallery-image { width:170px; height:120px; overflow:hidden; display:inline; float:left; margin-right:10px; margin-bottom:10px; border:1px solid #999; }
	
	.line { border-top:1px solid #78c7dd; margin-top:20px; }
	.alignleft { float: left; display: inline; margin-right: 20px; margin-top: 20px; margin-bottom: 20px; }
	.alignright { float: right; display: inline; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; }
	#subForm input{ padding: 10px; border: 1px solid #125F7A; outline: none; margin-left: 5px; margin-right: 5px; }
/* end of CSS file */

@media screen and (min-width: 320px) and (max-width: 720px) {
	
	.wrap {
		width: 100%;
	}
	
	#header {
		width: 100%;
		background: #c2e0ea;
		height: 120px;
	}
	
	#header a.logo {
		background-image: url(images/mobile-logo.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		height: 120px;
		width: 175px;
	}
	
	.nav {
		display: none;
	}
	
	.nav2 {
		width: 100%;
		height: auto;
		margin: 0;
		z-index: 1000;
		overflow: inherit;
		display: none;
	}
	
	.nav2 ul {
		width: 100%;
		height: auto;
		float: left;
	}
	
	.nav2 ul li {
		width: 100%;
		float: left;
		display: block;
		background: #285d75; 
		display: inline;
		font-size: 13px;
		margin:0px;
		padding:0;
	}
	
	.nav2 ul li a {
		background: #285d75;
		border-bottom: 1px solid #2c6780;
		line-height: 45px;
		height: 45px;
		margin: 0;
		padding-left:15px;
		padding-right:15px;
		color: #fff;
		text-decoration: none;
		display: block;
	}
	
	.nav2 ul li ul {
		width: 100%;
		position: relative;
		padding: 0;
	}
	
	.nav2 ul li ul li {
		width: 100%;
		float: left;
		display: block;
		background: #3d819f;
		position: relative;
	}
	
	.nav2 ul li:hover ul {
		display: block;
	}
	
	.nav2 ul li ul li a {
		background: #2A617A;
	}
	
	.nav2 ul li a:hover {
		width: 100%;
		float: left;
		display: block;
		background: #2c6780;
	}
	
	.facebook {
		margin-right: 7px;
		opacity: 1;
	}
	
	.call {
		width:44px;
		height:44px;
		display:inline;
		float:right;
		position:relative;
		margin-top:41px;
		background:url(images/call.png) top center no-repeat;
		opacity: 1;
		margin-right: 15px;
	}
	
	.mobmenu {
		width:44px;
		height:44px;
		display:inline;
		float:right;
		position:relative;
		margin-top:41px;
		background:url(images/mobmenu.png) top center no-repeat;
		opacity: 1;
		margin-right: 7px;
	}
	
	.banner {
		width: 100%;
		height: auto;
		background: #fbe8c4 !important;
		border-top: 1px solid #fdf7ed;
	}
	
	.banner-copy {
		width: calc(100% - 40px);
		padding: 0 20px;
		margin: 25px 0;
	}
	
	.banner-copy h1 {
		font-size: 24px;
		line-height: 32px;
	}
	
	.sub-content {
		width: 100%;
		border: 0;
	}
	
	.sub-col-1, .sub-col-wide {
		width: calc( 100% - 40px );
		margin: 0;
		padding: 20px;
	}
	
	.sub-col-1 h2 {
		line-height: 30px;
	}
	
	.sub-col-1 iframe {
		width: 100%;
	}
	
	.sub-col-1 p {
		line-height: 24px;
	}
	
	.sidebar {
		width: 100%;
		margin: 0;
		text-align: center;
		padding-bottom: 20px;
	}
	
	.contact-form {
		width: calc(100% - 40px);
		padding: 20px;
		margin: 0;
	}
	
	.contact-map {
		width: 100%;
		float: left;
		margin: 0;
		border: 0;
		height: 250px;
	}
	
	.ginput_container textarea {
		width: calc( 100% - 10px );
	}
	
	.contact-map iframe {
		height: 250px;
	}
	
	.ginput_container input {
		width: calc( 100% - 10px );
	}
	
	.sidebar .thumb {
		margin: 20px auto 5px;
	}
	
	.home-slider {
		width: 100%;
	}
	
	.meteor-slides .mslide img {
		margin: auto -135px auto auto !important;
		float: right;
		max-width: none;
	}
	
	.slide-copy {
		margin-left: 25px;
	    width: 225px;
	    margin-top: 40px;
	}
	
	.slide-copy h1 {
		font-size: 20px;
		line-height: 32px;
	}
	
	.slide-copy p, .banner-copy p {
		line-height: 20px;
	}
	
	.promo-wrapper {
		width: calc( 100% - 40px);
		margin: 0 20px;
		height: auto;
	}
	
	.promo {
		width: 100%;
		height: auto;
		text-align: center;
		margin: 0 0 20px;
	}
	
	.thumb {
		width: 291px;
		margin: 0 auto;
		height: auto;
	}
	
	.footer-col-1 {
		width: 100%;
	}
	
	#footer {
		width: calc( 100% - 40px ) !important;
		margin: 0 20px;
	}
	
	#footer, .footer-col-1, .footer-col-1 p, .footer-col-2, .footer-col-2 p {
		width: 100%;
		text-align: center;
		line-height: 22px;
		float: left;
		height: auto;
	}
	
	#footer label {
		width: 45px;
	}
	
	#footer input[type="text"] {
		width: calc(100% - 165px) !important;
		-webkit-appearance: none;
	}
	
	#footer input[type="text"] {
		width: 75px;
		-webkit-appearance: none;
	}
		
}