/*********************************
*
*	NORTHERN SOUTHLAND VETERINARY SERVICES
*	MAIN STYLESHEET
*  
*	Created: 19/02/2009
*	Author:  mark@cwc.co.nz
*
**********************************

-----------------------
-  TABLE OF CONTENTS  -
-----------------------
	->universal styles & resets
	->library styles
	->layout styles
	->form styles
	->helper styles	
	->@media

	
************************************/

/*----------------------------------------
 * UNIVERSAL STYLES AND RESETS
----------------------------------------*/
html,body {
	margin: 0; 
	padding: 0; 
	border: none;
}
body {
	background: #A4A391 url(../images/bg_body.jpg) 50% 0 repeat-y; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 76%;
	line-height: 1.6;
	text-align: center;
	margin: 0 auto;
}

/*Resets*/
em {
	font-style: italic;
}
form,ul,li {
	padding: 0; 
	margin: 0;
}
a img,
:link img,
:visited img {
	border: none;
}
p {
	margin: 0 0 1.5em 0; 
	padding: 0;
}
h1,h2,h3,h4,h5 {
	font-family: "trebuchet MS","gill sans",arial,verdana,helvetica,sans-serif;
	margin: 0;
	padding: 0;	
}
h1 		{font-size: 3em;}
h2 		{font-size: 2em;}
h3 		{font-size: 1.7em;}
h4 		{font-size: 1.4em;}
h5 		{font-size: 1.2em;}
h1,h3 	{font-family: arial,verdana,helvetica,sans-serif;}

address,form,ul,li {
	margin: 0;
	padding: 0;
}
ul,ul li {
	list-style: none;
}
ol {
	margin-left: 0;
	padding-left: 10px;
}
ol li {
	margin-left: 10px;
	padding-left: 10px;
	list-style-type: decimal;
}
div,p,table,td,a,ul,ol,form,input,textarea {
	font-size: 1em;
}
form,input,textarea,select {
	font-family: Arial, Helvetica, sans-serif;
}

/*links*/
a:link 		{color: #537b00;}
a:visited 	{color: #537b00;}
a:hover 	{color: #000;}
a:active 	{color: #800000;}

/*float clearing*/
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {display: inline-block;}



/*----------------------------------------
 * LIBRARY STYLES (GENERIC SITE WIDE)
----------------------------------------*/
p.note {
	font-size: .8em;
	font-style: italic;
}
p.large {
	color: #EBF1ED;
	font-size: 1.4em;
	margin-top: 7px;
	border-top: dotted 1px #999;
}
p.tight {
	margin-bottom: 0;
	padding-bottom: 5px;
}
p.shrink-bottom {
	margin-bottom :0;	
	padding-bottom: 0;
}
p.adobe-reader {
	padding-top: 20px;
}
.photo-right {
	float: right;
	padding-left: 10px;
}
.photo-left {
	float: left;
	padding-right: 10px;
}
.bold {
	font-weight: bold;
}
.emphasis {
	font-style: italic;
}
.center {
	text-align: center;
}
.pad5 {
	padding: 5px;
}
.pad10 {
	padding: 10px;
}

/*Drop shadows on images*/
.img-shadow {
	float:right;
	display: inline;
	/*kill dbl margin on IE*/
	background: url(../images/shadowalpha.png) no-repeat bottom right !important;
	background: url(assets/images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 0 10px;
}
.img-shadow img {
	display: block;
	position: relative;
	background-color: #fff;
	margin: -6px 6px 6px -6px;
	padding: 4px;
	border: solid 1px #A9A9A9;
}

/*Wrapper to contain float spans*/ 
div.rowwrapper {  
	padding-bottom: 5px; 
	overflow: hidden;
}

/*Used on contact and staff pages.
Always inside a rowwrapper class*/
span.title {
	float: left;
	width: 27%;	
	font-weight: bold;
	margin-right: 5px
}
span.details {
	float: left;
	width: 69%;
}

/*Icon links. IE8 & other standard compliant browsers understand this*/
a[href $='.pdf'] { 
   background: transparent url(../images/icons/pdf.gif) no-repeat center right;
   padding-right: 18px;
}
a[href ^="mailto:"] {
   background: transparent url(../images/icons/mailto.gif) no-repeat center right;
   padding-right: 20px;
}
a[class ="popup"] {
   background: transparent url(../images/icons/popup.gif) no-repeat center right;
   padding-right: 18px;
}



/*--------------------------------------
 * lAYOUT
--------------------------------------*/
#wrapper {
	position: relative;
	width: 747px;
	text-align: center;
	margin: 0 auto;
	border-bottom: solid 1px #000;
}

/*Secondary wrapper for content & sidebar*/
#container {
	background: #E3E3D5;
}

/*header, using FIR image replacement*/
#header {
	height: 173px;
	position: relative;
}
#header h1, 
#header h1 span {
	width: 747px;
	height: 173px;
	background: url(../images/masthead-opt.jpg) no-repeat 0  0;
	letter-spacing: -1px;
}
#header h1 span {
	position: relative;
	display: block;
	z-index: 1;
	margin-bottom: -130px;
}

/*Horizontal Nav*/
ul#nav {
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 100%;
	z-index: 100;
	font-size: 1em;
	line-height: normal;
	text-align: center;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}
ul#nav li {
	display: inline;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
ul#nav li a {
	display: inline-block; 
	background: #537b00 url(../images/bg-nav.png) 0 -4px repeat-x;
	/*background: #537B00 url(../images/paw.gif) no-repeat 5px 5px;*/
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	padding: 5px 25px;
	border-right: solid 1px #000;
	border-left: solid 1px #BEC7B9;
}
ul#nav li#n-contact a {
	border-right: solid 1px #ccc;	
}
ul#nav li a:hover {
	background: #537b00 url(../images/bg-nav-hover.png) 0 -30px repeat-x;
}

/*active tab*/
body#home li#n-home a, 
body#about li#n-about a, 
body#staff li#n-staff a,
body#newsletter li#n-newsletter a, 
body#contact li#n-contact a, 
body#services li#n-services a 
{
	background: #84a54a;
}

/*---[ Banner Ad ]------------------*/
#banner {
	background: #A4A391;
	border: solid 13px #A4A391;
	overflow: hidden;
}
#banner img {
	display: block;
	overflow: hidden;
}


/*---[ MAIN BODY CONTENT ]-----------*/
#content {
	float: left;
	width: 485px;
	min-height: 195px;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 1em;
	text-align: left;
	padding: 0 5px 10px 15px;
}
#content a {
	font-weight: bold;
}
#content h2 {
	color: #500;
	font-size: 2em;
	font-weight: bold;
	letter-spacing: -1px;
	padding-top: .6em;
}
#content h3 {
	color: #537b00;
	font-size: 1.5em;
}
#content h4 {
	padding-top: 0;
}
#content ul {
	margin-top: 0;
	margin-bottom: 15px;
	padding-top: 0;
}
#content ul li {
	list-style-type: square;
	margin-left: 15px;
	padding-left: 10px;
}
#content dt {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	margin: 10px 0 7px 0;
}
#content dd {
	margin: 0 0 0 10px;
	padding: 0;
}
#content dd ul {
	padding-bottom: 7px;
	padding-left: 5px;
}

#content p#intro {
	padding-top: .5em;
	padding-right: 20px;
}
/*Drop Cap fake seems to work better than first-letter across browserland*/
#content p#intro span.dropcap {
	float : left;
	width: 1.2em;
	color : #537b00;
	font-size : 3em;
	font-weight : bold;
	margin-top: -10px;
}


/*---[ The Sidebar] ------------------*/
#sidebar {
	float: left;
	width: 220px;
	background: transparent;
	text-align: left;
	padding: 20px 0 30px 5px;
}
#sidebar h3 {
	color: #666;
	font-size: 1.2em;
	text-align: center;
	letter-spacing: 5px;
	padding-right: 4px;
}


/*---[ Footer and Copyright ]---------*/
#footer {
	background: #000;
	color: #fff;
	font-weight: normal;
	font-size: .9em;
	text-align: center;
	margin: 0 auto;
	padding: 15px 0 0 0;
	overflow: hidden;
	border-top: solid 10px #a4a391;
	border-bottom: solid 1px #000;
}
#footer ul { 
	padding: 5px 0 10px 0;
	margin: 0; 
	text-align: center; 
	overflow: hidden; 
}
#footer ul li { 
	display: inline;
	list-style: none; 
	padding: 0;
}
#footer ul li a {
	display: inline-block; 
	color: #e3e3d5; 
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; 
	font-weight: bold; 
	font-size: 1.1em; 
	text-decoration: none;
	padding: 0 5px; 
	line-height: 1.1; 
	border-right: solid 1px #fff; 
}
#footer ul li a:hover, 
#footer ul li a:focus, 
#footer ul li a:active {
	background-color: #d6d6c8;
	color: #59593b;
}
#footer ul li.last a {
	border-right-width: 0;
}

#footer #foot-address {
	text-align: center;
	padding: 1.5em 0;
}
#footer span.copy {
	float: right;
	width: 55%;
	text-align: right;
	margin-right: 10px;
}
#footer .valid {
	float: left;
	width: 35%;
	text-align: left;
	margin-left: 10px;
}
#footer .valid ul {
	margin-bottom: 0;
	padding-bottom: 5px;
}
#footer .valid li {
	float: left;
}
#footer .valid a {
	color: #fff;
	padding: 0 5px;
	border-right-color: #ceceb7;
}



/*---------------------------------------
 *  FORMS 
---------------------------------------*/

/*search box*/
form#search {
	width: 170px;
	text-align: center;
	margin: 0 auto;
}
form#search fieldset {
	background: #D6D6C8 !important;
	margin: 0 0 5px 0;
	padding: 5px 0;
	border: solid 1px #a4a391;	
}
form#search input.searchbox {
	width: 150px;
	border: solid 1px #59593b;
}
form#search input#submit-search {
	width: 150px;
	background: #84a54a;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-top: 3px;
	border-width: 1px;
	border-style: outset;
	cursor: pointer;
}
/*pages to display the search box*/
body#newsletter #site-search,
body#sitesearch #site-search {
	display: block !important;
	margin-left: 44px;
}

/*Generic layout*/
div.genericform {
	width: 22em;
	text-align: left;
	margin: 0 auto;
}
div.genericform input {
	margin-bottom: 5px;
}
div.genericform fieldset {  
	padding: 0.5em 0;
	margin-bottom: 1em;
	border: none!important;
}
div.genericform h4 { 
	text-transform: uppercase;
	margin-bottom: 10px;
}

/*My preferred simple form layout: 
used on contact page*/
form.verticalform {
	width: 35em;
	text-align: left;
	margin: 0;
}
form.verticalform fieldset {
	display: block;
	width: 30em;
	text-align: left;
	margin: 0 0 2em 0;
	padding: 0;
	border: none;
}
form.verticalform legend { 
	color: #FFF;
	font-weight: bold;
	font-style: italic;
	margin-bottom: 1.3em;
	padding: 5px 10px; 
	border: solid 1px #ccc;
}
form.verticalform fieldset input,
form.verticalform fieldset textarea {
	display: block;
	width: 25em;
	background: #EBF1ED;
	font-weight: normal;
	border: solid 1px #999;
}
form.verticalform input.error,
form.verticalform textarea.error {
	background: #F7F7F7;
}
form.verticalform label {
	display: block;
	font-weight: bold;
	margin-bottom: 1em;
}
form.verticalform label.first {
	padding-top: 1em;
}
form.verticalform select {
	display: block;
}
/*radio buttons*/
form.verticalform fieldset.radio {
	width: 15em;
	margin: 1em 0 2em 0;
}
form.verticalform fieldset.radio input {
	clear: both;
	float: left;
	width: auto;
}
form.verticalform fieldset.radio label {
	font-weight: normal;
}

/*Margin layout*/
form.marginform fieldset {
	display: block;
	margin: 1em 0 1em 0;
	padding: 2em 1em 1em 1em;
	border: none;
	border-top: solid 1px #000;
}
form.marginform fieldset.radio {
	margin: 0 0 0 -1em;
	border: solid 0 #FFF;
}
form.marginform fieldset.radio input {
	position: static;
	clear: both;
	float: left;
}
form.marginform fieldset.radio label {
	position: relative;
	top: -1.25em;
	display: inline;
	width: auto;
	font-weight: bold;
	font-weight: normal;
	margin: 0 0 0 8em;
}
form.marginform fieldset.radio legend {
	float: left;
	font-weight: bold;
}
form.marginform input,
form.marginform textarea {
	position: relative;
	top: -1.4em;
	left: 8em;
	display: block;
}
form.marginform input.btndark {
	clear: both;
	top: 0;
}
form.marginform label {
	clear: both;
	float: left;
	display: block;
	width: 8em;
	font-weight: bold;
	margin-top: -1em;
	padding-bottom: .5em;
}
form.marginform label.first {
	margin-top: 1em;
}
form.marginform select {
	position: relative;
	top: -1.4em;
	left: 8em;
	display: block;
}

/*bot fields hidden from humans*/
#form-protection, #site-search {
	display: none !important;
}
form#feedbackform fieldset {
	margin-left: 75px;
}

/*Submit/reset buttons*/ 
form#feedbackform input.btngray { 
	display: inline !important;
	width: auto !important;
	height: 23px; 
	background: #CCC;
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 15px; 
	margin-top: 4px;
	border-top: solid 1px #EEE;
	border-left: solid 1px #EEE;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	cursor: pointer;
}

/*input bg for bad form submissions*/
form input.error,
form textarea.error {
	background: #CCC;
}
form label.error,
body#contact form label.error {
	display: none;
	color: #C00;
	font: italic normal .9em arial,helvetica,sans-serif;
}
/*hide from bots*/
div#form-protection,
input.hidden {
	display: none !important;
}



/*----------------------------------------
 * INDIVIDUAL PAGE HELPER STYLES
----------------------------------------*/

/*---[ home page helper ]------*/
body#home #content {
	width: 747px;
}
body#home #content p {
	padding-right: 30px;
}
body#home #sidebar {
	display: none;
}

/**/
#left-content {
	float: left;
	width: 365px !important;
}

p#vision {
	background: #ceceb7;
	color: #59593b;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.3;
	padding: 5px;
	margin-right: 32px;
	text-align: center;
}
p#vision span {
	color: #000;
	font-size: 1.3em;
}

#cover-special {
	float: left;
	width: 333px;
	background: #fff;
	margin: 28px 0 15px 0;
	padding: 0;
	border: double 3px #500;
}
#cover-special h3 {
	background: #000;
	color: #fff;
	text-align: center;
}
#cover-special img {
	float: right;
	margin: 0 0 5px 5px;
}
#cover-special p {
	margin-bottom: 5px;
}
#cover-special span#price {
	font-style: italic;
	font-size: 1.2em;
	font-weight: bold;
}


/*clinic details*/
div.clinic-info {
	float: left;
	width: 340px;
	min-height: 165px;
	background: #CECEB7;
	color: #59593B;
	padding: 5px;
	margin: 15px 10px 15px 0;
	overflow: hidden;
}
div.right-img {
	margin-right: 0;
	margin-left: 5px;	
}

div.clinic-info h4 {
	color: #000;
}

/*---[ Contact page helper ]---------*/
div.clinic-left {
	width: 58%;
	float: left;
}
div.clinic-right {
	width: 40%;
	float: right;
	text-align: left;
}

body#contact #content h4 {
	background: url(../images/asterisk.gif) no-repeat 0 1em;
	padding-top: 1em;
	padding-left: 15px;
}
body#contact div.rowwrapper {
	padding-top: 10px;
}


/*---[ Staff helper ]----------------*/
#content #staff-details img {
	float: left; 
	margin: 3px 10px 20px 0; 
	border: solid 1px #666;
}
#content #staff-details h3.branch {
	clear: left;
	padding-top: 20px;
}
#content #staff-details h4 {
	clear: left;
	display: block;
	color: #373631;
	font-size: 1.3em;
	margin: 5px 0 5px 0;
	padding: 2px 4px;
	border-top: solid 3px #ceceb7;
}
#content #staff-details p {
	font-style: italic;
	font-size: 1.1em;
	margin-bottom: 0;
	padding-bottom: 10px;
}
#content #staff-details span.title {
	width: 60%;
}
#content #staff-details span.details {
	width: 38%;
}
/*---[ services helper ]-------------*/
p.emergency {
	background: #ceceb7;
	color: #59593b;
	font-weight: bold;
	margin-top: 5px;
	padding: 5px;
}

/*---[ Newsletter helper ]-------------*/
#newsletter-listing span {
	font-size: .95em;
	font-style: italic;
	font-family: georgia,times,serif;
	margin-left: 10px;
}

/*---[ Search Results helper ]---------*/
body#sitesearch div#search-results {
	font-size: .9em;
}
body#sitesearch p#search-details {
	color: #59593b;
	font-style: italic;
}
body#sitesearch a.title {
	color: #500;
	font-size: 1.1em;
	font-weight: bold;
}
body#sitesearch a.title {
	color: #537b00;
}
/*next/previous buttons*/
#pagination a {
	background: #500;
	color: #fff;
	font-weight: bold;
	margin-right: 5px;
	padding: 5px 10px;
	text-decoration: none;
}
#pagination a:hover {
	background: #000;
}

/*---[ Form helper styles ]------------*/ 
.compulsory {
	color: #000;
	font-size: .9em;
	font-weight: normal;
	text-align: left;
}
body#contact .compulsory {
	margin-left: 76px;
}
p.errormsg {
	background: #c00;
	color: #fff;
	padding: 7px;
	border: solid 1px #ccc;
}




/*----------------------------------------
 *  @media hack 
----------------------------------------*/
@media screen {


.clearfix {display: block;}

ul#nav, 
div.rowwrapper {
	overflow: auto;
}

/*so ie mac doesn't hide the heading*/
#header h1 {
	overflow: hidden;
}


}