/*********************************
*
*	CLIVE WILSON COMPUTERS
*	MAIN STYLESHEET
*  
*	Created: 19/02/2006
*	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: #fff url(/assets/images/bg_left.gif) top left repeat-y; 
	color: #000;
	font-family: Verdana,Arial,Helvetica,sans-serif; 
	font-size: 76%; 
	margin-top: -1px;
	padding-top: 1px; 
	/* to prevent collapsing margins */
	line-height: 1.7;
}

a img,
:link img,
:visited img {
	border: none;
}

h1,h2,h3,h4,h5,form,select {
	margin: 0; 
	padding: 0;
}
p,a,table,td,tr,ol,ul,li,form,select {
	font-size: 1em; 
	line-height: 1.7;
}	
ul,li,ol {
	line-height: 1.5;
}
/*Links*/
a {
	color: #032EA2; 
	font-weight: bold; 
	text-decoration: none;
}
a:hover {
	color: #000;
}

input,
textarea { 
	background: #EEE; 
	font-size: 1em;
	font-family: Verdana,Arial,Helvetica,sans-serif;  
	border: solid 1px #666; 	
}
select 	{ 
	font-size: 1em; 
	font-family: Verdana,Arial,Helvetica,sans-serif;
	border: none; 
}


/*links*/
a:link 		{color: #032EA2;}
a:visited 	{color: #333;}
a:hover 	{color: #000;}
a:active 	{color: #666;}


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


/*----------------------------------------
 * LIBRARY STYLES (GENERIC SITE WIDE)
----------------------------------------*/
/* --- Row wrappers for float spans --- */ 
div.row { 
	width: 99%; 
	background: transparent; 
	padding-top: 5px; 
	clear: both; 
}	
div.row-wrapper { 
	width: 100%;
	padding-top: 10px; 
}	
div.row-wrapper-radio { 
	width: 99%; 
	float: left;
	padding-top: 5px; 
	padding-bottom: 15px;
}

/* --- footer spans --- */ 
span.address-left  { 
	float: left; 
	width: 48%;
	text-align: right; 
}
span.address-right { 
	float: left; 
	width: 46%;
	padding-left: 10px; 
	margin-left: 10px;
	text-align: left; 
	border-left: solid 1px #84D621; 
}
span.left-heading  { 
	width: 25%; 
	float: left; 
	font-weight: bold;
}
span.right-descriptor { 
	width: 73%; 
	float: right; 
}
span.left  { 
	width: 35%;
	float: left; 
	text-align: left; 
}
span.right { 
	width: 63%;	
	float: left; 
	text-align: left; 
}
span.note {
	font-size: .8em;
	font-weight: bold;
}
/*form spans*/
span.label { 
	float: left; 
	width: 39%; 
	text-align:right; 
}
span.input { 
	float: right; 
	width: 58%; 
	text-align:left;
}

div.spacer { 
	font-size: 1px;
	clear: both; 
	line-height: 1px; 
}
.center {text-align: center;}

p.nopadding {  
	padding-top: 0; 
}
p.quote {
	font-family: georgia,times,serif; 
	font-size: 1.1em; 
	font-style: italic; 
	margin: 0; 
	padding: 2px 0; 
}
p.note {
	font-size: .8em;
	font-style: italic;
}

#content #bullet li {
	background: url(/assets/images/listmark.gif) 2px 4px no-repeat; 
	margin-left: 0;
	padding-left: 20px;
	padding-bottom: 2px;
	list-style: none;
}



/*----------------------------------------
 * LAYOUT STYLES
----------------------------------------*/
#header { 
	position: relative;
	background: #fff url(/assets/images/bg_header.gif) repeat-x; 
	height: 89px; 
	width: 100%;
	min-width: 760px; 
	max-width: 100%;
}
#header img {float: left;}
#header h1 {
	position: absolute;
	font-size: 1px; 
	text-indent: -200px;
}

/*top right navigation to suster sites*/
#topnav { 
	position: absolute;
	right: 0;
	top: 0;
	/*float: right;*/ 
	display: inline;
	width: 26em; 
	color: #fff; 
	font-weight: bold; 
	text-align: center;
}
#topnav ul { 
	margin: 0;
	padding: 0;
}	
#topnav ul li { 
	float: right; 
	margin: 0; 
	padding: 0; 
	list-style: none; 
}	
#topnav ul li a { 
	color: #032EA2; 
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
	font-weight: bold; 
	font-size: 12px;/*fixed so resizing wont break IE at lower resolutions*/
	margin: 0;
	padding: 3px 7px 7px 7px; 
	text-decoration: none; 
	vertical-align: top;
	border-right: solid 1px #84D621;
}	
#topnav ul li a:hover { 
	background: #84D621; 
	color: #fff; 
}
#topnav form#search { 
	font-size: 1.1em;
	padding-top: 20px;
	vertical-align: middle;
}
#topnav form#search input#searchtext {
	height: 1.4em;
	background: #f7f7f7;
	margin-bottom: 2px;
	padding: 0;
	line-height: 1.3;
	border: solid 1px #ccc;
}
#topnav form#search input#go { 
	background: #84D621; 
	color: #032EA2; 
	font-weight: bold; 
	margin: 0;
	padding: 2px 4px;
	line-height: 1.1; 
	border: solid 1px #fff; 
	cursor: pointer!important;
}

/*blue & white lines under the header
used for cwc tagline*/ 
#tagline {
	height: 20px; 
	background: #0029A5 url(/assets/images/angle_blue_w.gif) top right no-repeat; 
	text-align: center; 
	margin: 0 auto; 
}	
#tagline p { 
	font: italic .8em georgia,times,serif; 
	color: #84D621; 
	margin: 0; 
	padding-top: 3px; 
	vertical-align: bottom; 
	letter-spacing: 2px; 
}


/* -----------------
MAIN BODY CONTENT 
------------------*/ 

/* so the right absolute div doesnt sit over 
content when browser is resized - another div 
is required for IE */ 
#main { 
	position: relative; 
	width: 100%; 
	min-width: 760px; 
	max-width: 100%; 
}

#content-wrapper { 
	background: #fff url(/assets/images/angle_blue.gif) top left no-repeat;
	text-align: center; 
	margin-left: 165px; 
	margin-right: 170px; 
	padding: 20px 3%; 
	/*percent margins/padding in IE are dodgy*/
}

#content { 
	width: 95%; 
	background: #fff; 
	min-width: 400px; 
	max-width: 500px;
	margin: 0 auto;
	text-align: left; 
	overflow: hidden;
}
/*flash movie container on home page*/
#content #flashcontent {
	width: 400px;
	margin: 0 auto;
	padding-bottom: 10px;
	text-align: center;
}	
#content #flashcontent h2 {
	background: #032EA2;
	color: #fff;
	font-size: 2.1em;
	font-weight: bold;
	padding: 5px;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: cenrer;
}
#content #flashcontent h2 a {
	color: #fff!important;
	text-decoration: none;
}
#content #flashcontent span  {
	color: #000;
	font-size: .8em;
	text-transform: lowercase;
}

#content h1 { 
	color: #032EA2; 
	font-family: "Arial Black", Arial, Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 1.7em; 
	font-weight: bold; 
	margin-bottom: 5px;
	padding: 5px 0;
	text-transform: uppercase; 
	letter-spacing: 1px; 
	border-bottom: solid 1px #032EA2; 
}	
#content h2 {
	color: #032EA2; 
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
	font-size: 1.5em; 
	font-weight: bold; 
	padding: 20px 0 5px 0; 
	letter-spacing: -1px; 
	border-bottom: solid 1px #032EA2;
}
#content h3 {
	color: #032EA2;
	font-size: 1.2em;
	font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
	padding-top: 1.2em;
}	
#content h4 {
	background: #eee;
	color: #67B708;
	font-size: 1.1em;
	font-style: italic;
	font-family: Verdana,Arial,sans-serif;
	margin: 1em 0 .2em 0;
	padding: .1em .5em .1em .3em;
	letter-spacing: 0;
}
#content span.dropcap {
	float: left;
	width: 1.2em;
	height: .9em;
	margin-top: -3px;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.2em;
}
#content p { 
	margin: 0; 
	padding-top: 15px; 
}	
#content ul { 
	margin-top: 2px; 
}
#content a { 
	color: #67B708; 
	text-decoration: underline; 
}
#content a:hover { 
	color: #032EA2; 
	background: #84D621; 
}
#content #random {
	margin: 15px auto;
	padding: 15px 0; 
	text-align: center;
	border-top: solid 1px #032EA2;
	border-bottom:solid 1px #032EA2;
}

/* ---[ FOOTER ]----------------*/	
#footer { 
	font-family: Verdana,Helvetica,sans-serif; 
	font-size: .9em; 
	margin: 50px auto 0 auto; 
	text-align: center; 
	border-top: dotted 1px #84D621; 
}
#footer a { 
	color: #84D621; 
	font-weight: bold; 
}
#footer a:hover { 
	color: #032EA2; 
}
#footer ul { 
	margin: 0; 
	padding: 15px 0; 
	border-bottom: dotted 1px #84D621; 
}
#footer ul li { 
	display: inline; 
	margin: 0; 
	padding: 0; 
	list-style: none; 
	line-height: 2;
}
#footer ul li a { 
	height: 0;
	color: #032EA2; 
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; 
	font-weight: bold; 
	font-size: 1em; 
	padding: 2px 5px; 
	line-height: 1;
	text-decoration: underline; 
	border-right: solid 1px #84D621; 
}
#footer ul li a:hover { 
	background: #84D621;
	color: #032EA2; 
	text-decoration: none; 
}

/* --------------------------
ABSOLUTE POSITIONED ELEMENTS
---------------------------- */ 

/* left navigation now abs positioned */
#leftnav {
	position: absolute;
	left: 0px;
	top: 94px;
	width: 165px;
}	
#leftnav h1 { 
	color: #84D621; 
	font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif; 
	font-size: 1.5em; 
	font-weight: bold; 
	margin: 7px 0; 
	padding: 4px 0 4px 7px; 
	border-bottom: dotted #84D621 1px; 
}
#leftnav ul, 
#leftnav ul li, 
#leftnav ul ul,
#leftnav ul ul li {
	list-style: none; 
	margin: 0; 
	padding: 0;
}
#leftnav ul {
	background: /*#032EA2*/;
	text-align: left;
}	
#leftnav li a {
	display: block;
	width: 140px;
	background: url(/assets/images/arrow.gif) 5px 2px no-repeat; 
	color: #fff;
	margin: 0;
	padding-left: 25px;
	text-align: left;
	text-decoration: none;
	z-index: 1;
}
#leftnav li a:hover {
	background: #84D621 url(/assets/images/arrow_mo.gif) 5px 2px no-repeat; 
	color: #fff; 
}	

/*flyout menu*/
#leftnav ul li {
	position: relative;
}
#leftnav li ul {
	position: absolute;
	left: 160px; /*Set 1px less than width*/
	top: 0;
	width: 140px;
	display: none;
	background: #84D621; 
	border-width: 0;
	z-index: 100;
}
#leftnav li ul li a {
	width: auto;
	background: #84D621; 
	color: #032EA2!important; 
	font-size: 10px;
	padding: 1px 5px 1px 7px; 
	margin: 0;
	border-bottom: solid 1px #fff;
	border-top: solid 1px #67b708;
	z-index: 1000;
}
#leftnav li ul li a:hover {
	color: #fff!important;
	background: #032EA2;
}
#leftnav li ul li a.bottom {
	border-bottom-width: 0;
} 
#leftnav li:hover ul, 
#leftnav li.over ul { 
	display: block;
	z-index: 1000;
}
#leftnav #w3c { 
	width: 87px;
	margin-left: 39px; 
	margin-top: 15px; 
	padding-top: 15px; 
	text-align: center;
	border-top: dotted 1px #84D621; 
}
#leftnav #w3c img { 
	display: block; 
	margin: 5px auto; 
	text-align: center;
}

/*right column now INSIDE main div, 
which is relatively positioned*/ 
#right { 
	position: absolute; 
	top: 20px; 
	right: 15px; 
	width: 145px; 
	font-size: .9em; 
	padding-bottom: 10px;
}
#right h3 {
	background: #032EA2;
	color: #84D621; 
	font-family: "Gill sans MT","Lucida sans",Verdana,Arial,Helvetica,sans-serif; 
	font-size: 1em; 
	font-weight: bold; 
	margin-top: 0;
	margin-bottom: 3px;
	padding-top: 0;
	padding-bottom: 7px;
	text-align: center; 
	text-transform: uppercase;
}
#right .box-wrapper {
	background: url(/assets/images/right_box_top.gif) no-repeat 0 0;
	margin-bottom: 1.5em;
	padding-top: 7px;
}
#right .box-inner {
	background: #fff;
	padding-bottom: 10px;
	border: solid 1px #032EA2;
	border-top-width: 0;
}
#right #logos { 
	margin: 0 auto; 
	text-align: center; 
}
#right #logos p { 
	margin: 0; 
	padding: 3px; 
	text-align: center; 
}
#right #logos img { 
	margin: 5px auto;
}



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

/*Software*/
div.software { 
	display: table;/*so good browsers don't margin-collapse
	IE ignores this of course, but for that it's not required*/
	width: 100%;  
	margin-bottom: 15px;
}
div.software img { 
	float: left; 
	margin-top: 15px;
}
div.software-text { 
	margin-left: 140px; 
	text-align: left; 
}
div.software span {/*used for 'NEW' text*/
	background: #67B708;
	color: #fff;
	font-weight: bold;
	font-family: arial,helvetica,sans-serif;
	padding: 0 3px;
	text-transform: uppercase;
} 


/*weather page*/
#content #weather {
	margin: 15px auto;
	text-align: center;
}
#content #weather img {
	display: block;
	margin: 0 auto;
	padding-bottom: 5px;
	border: solid 1px #032EA2;
	border-bottom-width: 6px;
}
#content #weather h1,
#content #wrap h1 {
	text-align: center;
	border-bottom-width: 0;
}
#content #weather h1 a,
#content #wrap h1 a {
	color: #032EA2;
	padding: 2px 5px;
	text-decoration: none;
}
#content #weather #tagline {
	width: 23em;
	background: #032EA2;
	color: #fff;
	font-size: .8em;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

/*dealer specific rules*/
#content #dealers { 
	text-align: center; 
	margin: 0 auto; 
}
#content #dealers h2 {
	text-align: left;
}
#content #dealers img { 
	margin: 7px 5px;
	vertical-align: middle; 
}
#content #dealers a:hover {
	background-color: #fff;/*kill green hover bleed-through*/
} 

/*associates*/
#content #associates { 
	margin: 15px auto; 
	text-align: center; 
}
#content #associates img { 
	margin: 8px auto 0 auto;
}
#content #associates p { 
	padding: 2px 0 10px 0; 
	border-bottom: 1px dotted #032EA2; 
}
#content ul.department,
#content ul.left-float { 
	float: left; 
	width: 44%; 
	margin: 0; 
	padding: 15px 0 2px 20px; 
}


/*meet the team*/
#content img.teamimg {
	float: left; 
	margin: 3px 10px 20px 0; 
	border: solid 1px #84D621;
}
#content h3.staff {
	clear: left;
	margin-top: 15px;
	margin-bottom: 7px!important;
	padding-top: 10px; 
	padding-bottom: 0;
	border-bottom-width: 0 !important; 
	border-top: dotted 1px #032ea2;
}



/* ---[ FORM ELEMENTS ]------------ */
form.center {
	margin: 0 auto;
	text-align: center;	
}
div.genericform {
	width: 320px;
	margin: 0 auto;
	text-align: left;
}
div.genericform input {
	margin-bottom: 5px;
}
div.genericform fieldset { 
	margin-bottom: 1em;
	padding: 0.5em 1em;
	border: solid 1px #999;
}
div.genericform legend { 
	background: #032EA2; 
	color: #fff;
	font-weight: bold;
	font-style: italic;
	font-family: georgia,times,serif;
	padding: 5px;
	margin-bottom: 15px;
	border: solid 1px #ccc;
}
span.compulsory,
div.genericform span.compulsory {
	font-size: 10px;
	font-weight: bold;
	text-align: left;
}
div.row-wrapper-radio label {
	float: left; 
	width: 45%;
}
div.row-wrapper-radio input {
	float:left; 
	width: 30%;
	height: 12px;
	background: #fff;
	border-width: 0;
}
input.radio {
	border-width: 0;
	background: #fff;
}

/* --- Survey stuff --- */
div.survey label {
	float: left;
	width: 40%;
}
div.survey input,
div.survey select.survey_type {
	float: left;
	width: 40%;
	padding: 0;
	margin: 0;
	margin-bottom: 5px;
}
div.survey input {
	height: 21px;
	line-height: 17px; 
}
div.survey select.survey-type {
	float: left; 
	border: solid 1px #666;
}

/* SUBMIT/RESET BUTTONS */ 
input.button { 
	height: 24px;
	background: #ccc; 
	color:#fff; 
	font-weight: bold; 
	font-size: 1.1em;
	line-height: 16px; 
 	border: solid 1px #000; 
}
input.btn-gray,
#right #eclub-signup .btn-gray { 
	height: 23px; 
	background: #D8D8D8;
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
	padding: 3px 5px;
	margin-top: 4px;
	line-height: 15px;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	cursor: pointer;
}
input.btn-blue {
	background: #032EA2; 
	color:#fff;
	padding: 2px; 
}

/*hide fields from bots*/
#form-protection {
	display: none;
}


/*---[ SEARCH RESULTS ]------------*/ 
span.search-small { 
	font-size: .9em; 
}

/*--- [ Tables ] ------------------*/
#content table#directors { 
	width: 99%;
	padding: 0;
 	text-align: left;  
}
#content table#directors td {
	padding-right: 10px;
}

/*--[ html email bomb ]---*/
#content a.mailbomb {
	display: block;
	width: 100px;
	background: #032EA2;
	color: #fff;
	margin: 0 auto;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}

/* ---[ The Portfolio ]---------------- */
#content #portfolio-thumbs,
#content #portfolio-inner {
	margin: 0 auto;
	text-align: center;
}
#content #portfolio-inner {
	width: 420px;
	display: table;
}
#content #portfolio-inner a {
	height: 0; 
	font-size: .8em; 
	color: #032EA2;
	line-height: 25px; 
}
#content #portfolio-inner a:hover {
	background: #fff;
	color: #84D621;
}
#content #pagenumber {
	background: #F7F7F7;
	width: 17em;
	padding: 3px 5px;
	margin: 10px auto;
	border: solid 1px #ccc;
}
#content div.imageborder {
	float: left; 
	width: 190px; 
	padding: 10px; 
	margin: 20px 7px 0 0; 
	border: solid 1px #CCC;
}
#content div.prevnext {
	padding: 30px 0; 
}
/* Reset for correct Opera value */
html:first-child>b\ody #content div.prevnext {padding-top: 15px;}

#content div.prevnext a {
	height: 0;/*bcos we know ie5 is dumb*/
	background: #032EA2; 
	color: #84D621; 
	font-size:.9em;
	font-weight: bold;
	padding: 3px 6px; 
	text-align: center;
	text-decoration: none; 
	border: solid 2px #ccc; 
	line-height: 18px;/*bcos ie5 is retarded*/
}	
#content div.prevnext a:hover {
	color: #fff;
}

/*PHOTOGALLERY*/
#links {
	font-size: .9em;
	margin: 0 auto;
	padding-top: 15px;
	line-height: 190%;
	text-align: center;
}
#links a.nextlink {
	background: #fff;
	padding: 0;
	border-width: 0;
	}
#links a {
	color: Red;
	font-size: .9em;
	font-weight: bold;
	padding: 3px;
	margin: 0 2px;
	text-decoration: underline;
	}
#links a:hover {
	color: #032EA2;
	text-decoration: none;
	}
#copyright {
	color: #666;
	font-size: .8em;
	margin-top: 15px;
	padding-top: 10px;
	text-align: center;
	border-top: dotted 1px #777;
}
span.category { 
	color: #666; 
	font-size: .9em; 
	line-height: 35px;
}
span.new {
	color: Red;
	font-size: .9em;
}	
span.caption {
	font-style: italic;
	font-size: .9em;
	font-weight: bold;
}	
span.info {font-size: .85em;}
	
table.photogallery {
	background: #fff;
	margin: 15px auto;
	text-align: center;
	border-collapse: collapse;
}
table.photogallery td {
	color: #666;
	padding: 2px;
}
table.photogallery td.image{
	padding: 5px;
	border: solid 1px #ccc
}
table.photogallery td.caption{
	font-size: .9em;
	padding: 5px;
	text-align: left;
}
table.photogallery td.image img {
	padding: 5px 0;
}
table.photogallery td.name {
	width: 200px;
	background: #032EA2;
	padding: 0px;
	margin: 0;
	text-align: center;
	border: solid 1px #ccc !important;
}
table.photogallery td.name a {
	width: 190px;
	display: block;
	color: #fff;
	font-weight: bold;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	line-height: 25px;
}
table.photogallery td.name a:hover {
	background: #ccc;
	color: #fff;
}
table.photogallery td.date{
	width: 13%;
	font-size: .9em;
	text-align: center;
}
table.photogallery td.size{
	width: 10%;
	text-align: center;
	font-size: .9em;
}


/*---------------------
----  ADMIN STUFF  ----
---------- -----------*/
#adminLinks {
	width: auto;
	margin: 0 auto;
	text-align: left;
}
#adminLinks ul, #adminLinks li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#adminLinks ul {
	padding: 15px;
	padding-bottom: 0px;
}
#adminLinks li {
	margin-bottom: 8px;
	width: 230px;
}
#adminLinks a {
	display: block;
	width: 208px;
	background: #84D621;
	color: #000;
	font-size: 13px;
	font-weight: bold;
	font-family: arial, sans-serif;
	padding: 2px 2px 2px 20px;
	text-align: left;
	border: solid 1px #032EA2;
	text-decoration: none;
}
#adminLinks a:hover { 
	background: #000;
	color: #fff;
}
div.row-wrapper-break div {
	width: 90px;
	float:left;
}
.surveybutton {
	background: #032EA2; 
	color: #84D621; 
	font-size:.9em;
	font-weight: bold;
	padding: 3px 6px; 
	text-align: center;
	text-decoration: none; 
	border: solid 2px #ccc; 
}


/*now lets hack - this all MUST come LAST*/
@media screen {

.clearfix {display: block;}
* html .clearfix {height: 1px;}

div#main { 
	width:expression(((document.compatMode && 
	document.compatMode=='CSS1Compat') ? 
	document.documentElement.clientWidth : 
	document.body.clientWidth)
	< 760 ? "760px" : "100%"); 
}

#container,
#content-wrapper,
#content-inner,
#breadcrumb,
div.row-wrapper {
	overflow: auto;
}

#meet-the-team {
	overflow: hidden; 
}

* html #content-wrapper {
	display: inline;
	padding: 20px 5px;
	zoom: 1;
}




}