/* ========================================================================================

WatchMyHorse: Main Layout 

Version:1.0

Author: Raphael Marsh

Email: raphael@on-brand.co.uk

Last Updated: 13 February 2008

=========================================================================================== */



/* STANDARD FORMATTING 

=========================================================================================== */

* {

	margin: 0;

 	padding: 0;

}



body {

	font-family:Arial, Helvetica, sans-serif;

	font-size:63.3%;

	margin:0;

	padding:12px 0;

	min-width:978px;

	text-align:left;

	line-height:140%;                         

	background-color:#e1e1e1;

}





/* Generic 

=========================================================================================== */

h1 {

	font-size: 2.4em; margin:0;

}

h2 {

	font-size: 2.0em; margin:0;

}

h3 {

	font-size: 1.6em; margin:0;

}

h4 {

	font-size: 1.2em; margin:0;

}

img {

	border:none;

}

p {

	color:#7c7c7c; font-size:110%; margin:0;

}

ul {

	list-style-type:none; margin:0; padding:0;

}

a:link {

	text-decoration:none;

}

a:hover {

	text-decoration:underline;

}

a:active {

	text-decoration:none;

}

hr {

	float:left; position:absolute; border:0; height:1px;

}



/* Structure 

=========================================================================================== */

div#wrapper {

	width: 978px; margin: auto; text-align: left;

}

#branding {

	height: 81px;

	background:url(../images/generic/branding-top.gif) top left no-repeat;

}

#navigation {

	height:38px;

	background:url(../images/generic/bg-repeat.gif) top center repeat-y;

}

#pageContent {

	background:url(../images/generic/bg-repeat.gif) top center repeat-y;

}

#header {

	height:206px; 

	margin:0 6px;

	z-index:50;

	border-bottom:#ffffff 3px solid;

}

.clear {

	clear: both;

    text-indent: -9999px;

}	

#branding .logo {

	float:left;

	position:relative;

	top:31px;

	left:36px;

	border:0;

}

#branding .log {

	float:right;

	position:relative;

	top:26px;

	right:20px;

	border:0;

}



/* Layout

=========================================================================================== */

#mainColumn {

	float:right; margin:20px 30px 20px 0; width:600px;

}

#mainColumn h1 {

	font-size:280%;

	width:auto;

	line-height:100%;

	font-weight:normal;

	color:#326b9e;

	padding-bottom:12px;

	margin-bottom:20px;

	border-bottom:#dcdee2 1px solid;

}

#mainColumn h4 {

	font-size:140%;

	width:auto;

	line-height:100%;

	font-weight:normal;

	color:#326b9e;

	padding-bottom:12px;

	margin-top:20px;
	
	margin-bottom:12px;



}



#mainColumn p {

	color:#515c6d;

}

#sideColumn {

	float:left;

	width:320px;

	margin-left:6px;

	margin-bottom:20px;

}

#mainColumn ul {
     padding:15px; list-style:disc; padding-left:15px;
}
#mainColumn ul li {
     font-size:110%; color:#515c6d; font-weight:bold; margin-bottom:4px;
}
#mainColumn ul li a {
     color:#FFF;
}
#mainColumn span.highlight {
     background:#dee8f5;
}

.box{
	background: #dee8f5;
	border: solid 1px #ccc;
	padding: 20px;
	clear: both;
}

/* Navigation 

=========================================================================================== */

#mainNav {

	margin:0 6px;

	width: 966px; 

	height:34px;

	padding-top:1px;

	z-index:100;

	border-top:#b6d4c8 4px solid;

	background:url(../images/generic/mainNav-bg.gif) top repeat-x;

}

	#mainNav ul li {

		float:left;

		position:relative;

		display:block; /*IE6 line-height*/

		text-indent: -5000px;

		cursor:pointer;

	}

	#mainNav ul li a {

		background:url(../images/generic/mainNav-divider.gif) top right no-repeat;

	}

	#mainNav ul li.first {

		margin-left:30px;

		background:url(../images/generic/mainNav-divider.gif) top left no-repeat;

	}

		#mainNav ul li a {

			position:relative;

			display:block;

			height:33px;

			overflow:hidden;

		}

		

		#mainNav ul li.about { width:97px; background:url(../images/generic/mainNav-about.gif) top left no-repeat; }

		#mainNav ul li.about:hover, #mainNav ul li.about-active { width:97px; background:url(../images/generic/mainNav-aboutRoll.gif) top left no-repeat; }

		

		#mainNav ul li.why { width:100px; background:url(../images/generic/mainNav-why.gif) top left no-repeat; }

		#mainNav ul li.why:hover, #mainNav ul li.why-active { width:100px; background:url(../images/generic/mainNav-whyRoll.gif) top left no-repeat; }

		

		#mainNav ul li.how { width:123px; background:url(../images/generic/mainNav-how.gif) top left no-repeat; }

		#mainNav ul li.how:hover, #mainNav ul li.how-active { width:123px; background:url(../images/generic/mainNav-howRoll.gif) top left no-repeat; }

		

		#mainNav ul li.who { width:128px; background:url(../images/generic/mainNav-who.gif) top left no-repeat; }

		#mainNav ul li.who:hover, #mainNav ul li.who-active { width:128px; background:url(../images/generic/mainNav-whoRoll.gif) top left no-repeat; }

		

		#mainNav ul li.faq { width:70px; background:url(../images/generic/mainNav-faq.gif) top left no-repeat; }

		#mainNav ul li.faq:hover, #mainNav ul li.faq-active { width:70px; background:url(../images/generic/mainNav-faqRoll.gif) top left no-repeat; }

		

		#mainNav ul li.contact { width:109px; background:url(../images/generic/mainNav-contact.gif) top left no-repeat; }

		#mainNav ul li.contact:hover, #mainNav ul li.contact-active { width:109px; background:url(../images/generic/mainNav-contactRoll.gif) top left no-repeat; }





/* Feature Panels

=========================================================================================== */

.fullWidth {

	padding:20px;

}

.fullWidth h1 {

	font-size:280%; width:auto; line-height:100%; font-weight:normal; color:#326b9e; padding-bottom:12px; margin-bottom:20px; border-bottom:#dcdee2 1px solid;

}

.fullWidth h2 {

	font-size:180%; width:auto; font-weight:normal; color:#73a6db;

}

.fullWidth p {

	font-size:120%; line-height:140%;

}

.fullWidth p a {

	color:#326b9e; text-decoration:underline;

}

.fullWidth p a:hover {

	text-decoration:none;

}

.panel-holder {

	float:left;

	position:relative;

	display:block;

	width:966px;

	margin:0 6px;

	border-bottom:#ffffff 2px solid;

}

.feature-panel {

	float:left;

	position:relative;

	width:320px;

	height:240px;

	margin-right:3px;

}

	.feature-panel.end {

		margin-right:0 !important;

	}

	.feature-panel .contents {

		float:left;

		margin:16px;

	}

		.feature-panel .contents a {

			color:#fff;

			font-size:90%;

			font-weight:bold;

			text-decoration:none;

		}

			.feature-panel .contents a:hover {

				text-decoration:underline;

			}



.feature-panel h2.intro { 

	font-size:10%; height: 96px; text-indent: -5000px; overflow:hidden; margin:6px 0 30px 0; width:259px; 

	background:url(../images/generic/intro-message-01.png) top left no-repeat; border:0 !important;

}





/*Add a bespoke background image to feature panels */

.feature-panel.intro {

	background:url(../images/generic/greybg-blend.jpg) top left;

}

.feature-panel.feed {

	background:#cecece url(http://84.92.169.121:1024/Jpeg/CamImg.jpg) top left;

}

.feature-panel.email {

	background:url(../images/generic/bluebg-blend.jpg) top left;

}

.feature-panel.sms {

	background:url(../images/generic/infoPanel-bg.jpg) top left;

}

.feature-panel h2 {

	font-size:170%;

	text-transform:uppercase;

	font-weight:normal;

	color:#ffffff !important;

	padding-bottom:7px;

	border-bottom:1px solid #abb0b9;

}

.feature-panel.intro h2 {

	border-bottom:1px solid #abb0b9;

}

.feature-panel p.telephone {

	font-size:120%; color:#d6d9dd; width:auto; line-height:140%; padding:10px 0;

}

.feature-panel.email h2 {

	width:288px;

	border-bottom:1px solid #92a5bf;

}

.feature-panel p.email {

	font-size:120%; color:#d3dae5; width:auto; line-height:140%; padding:10px 0;

}

.feature-panel.sms h2 {

	width:288px;

	border-bottom:1px solid #d9d9d9 !important;

}

.feature-panel p.sms {

	font-size:120%; color:#474746; width:auto; line-height:140%; padding:10px 0;

}

.feature-panel img.icon {

	float:right; margin:3px 0 3px 10px;

}

.feature-panel hr.telBorder {

	border-top:1px solid #abb0b9 !important; width:288px;

}

.feature-panel hr.emailBorder {

	border-top:1px solid #8397b6 !important; width:288px;

}

.feature-panel hr.smsBorder {

	border-top:1px solid #d9d9d9 !important; width:288px;

}



.feature-panel.info {

	background:url(../images/generic/infoPanel-bg.jpg) top left;

}

.feature-panel.info .contents {

		margin:10px 16px;

	}

.feature-panel.info h3, .feature-panel.info h3 a {

	width:auto;

	font-size:105%;

	text-transform:uppercase;

	color:#2f3c4f !important;

}

.feature-panel.info h3 {

	border-top:1px solid #d0d0d0; padding-top:8px; margin-top:8px; margin-bottom:2px;

}

.feature-panel.info h3.top {

	padding-top:0px; margin-top:0px; border-top:0px;

}

.feature-panel.info p, .feature-panel.info p a {

	color:#fff;

}

.feature-panel.info img {

	float:right; padding-left:10px;

}





.homePanel-outer {

	margin:10px 0 20px 14px; float:left; position:relative; width:461px; height:245px;

	background:url(../images/generic/homePanel-blueBot.gif) bottom no-repeat;

}

.homePanel-inner {

	width:461px; height:10px; display:block;

	background:url(../images/generic/homePanel-blueTop.gif) top no-repeat;

}

.homePanel-outer.grey {

	background:url(../images/generic/homePanel-greyBot.gif) bottom no-repeat;

}

.homePanel-inner.grey {

	background:url(../images/generic/homePanel-greyTop.gif) top no-repeat;

}

.homePanel-outer.formLocation {

	float:right;

	position:absolute;

	margin-left:464px;

	margin-top:-58px;

}

.homePanel-outer .contentArea {

	margin:5px 10px 12px 12px;

}

.homePanel-outer .contentArea h3 {

	font-size:170%; line-height:120%; font-weight:normal; color:#73a6ca;

	text-transform:uppercase; border-bottom:#d6ebf4 1px solid; padding-bottom:8px; margin-bottom:14px;

}

.homePanel-outer .contentArea h3.form {

	font-size:170%; letter-spacing:-1px; color:#86c15a; border-bottom:none; padding-bottom:8px; margin-bottom:14px;

}

.homePanel-outer .contentArea h3.comments {

	font-size:170% !important; color:#a4a4a4; border-bottom:none; padding-bottom:8px; margin-bottom:14px;

}

.homePanel-outer .contentArea p {

	font-size:120%; line-height:130%; margin-bottom:11px;

}

.homePanel-outer .contentArea a {

	font-weight:bold; font-size:90%; color:#83bfe1;

}

.homePanel-outer.grey .contentArea h3 {

	font-size:110%; padding-bottom:5px; margin:0; border-bottom:0;

}

.homePanel-outer.grey .contentArea img {

	float:left; display:block; margin-bottom:8px;

}

.homePanel-outer.grey .contentEntry {

	float:right; width:279px; display:block;

}



/* Side Panels

=========================================================================================== */

.sideFaq {

	background:url(../images/generic/sidegrey-blend.gif) repeat-y;

	padding:15px 18px;

	margin-bottom:3px;

}

.sideFaq h3 {

	color:#fff; font-weight:normal; font-size:170%;

	padding-bottom:7px;

	border-bottom:#737982 1px solid;

}

.sideFaq ul {

	padding-top:10px; list-style:disc; padding-left:15px;

}

.sideFaq ul li {

	font-size:130%; font-weight:bold; color:#3a5c82; margin-bottom:4px;

}

.sideFaq ul li a {

	color:#FFF;

}



.sideCasestudy {

	background:url(../images/generic/sideblue-blend.gif) repeat-y;

	padding:15px 18px;

	margin-bottom:3px;

}

.sideCasestudy h3 {

	color:#fff; font-weight:normal; font-size:170%; padding-bottom:7px; margin-bottom:10px; text-transform:uppercase; border-bottom:#637ea1 1px solid;

}

#quote {

	color:#ffffff; font-style:italic; margin-bottom:7px; font-size:120%; line-height:140%;

}



.sideFeed img {

	width:320px;

	height:240px;

	background:#cecece;

}



/* Main Image Control 

=========================================================================================== */

#homepage #header {

	background:url(../images/generic/header-home.jpg) top left no-repeat;

}

#about #header {

	background:url(../images/generic/header-about_us.jpg) top left no-repeat;
	
}

#why #header {

	background:url(../images/generic/header-why.jpg) top left no-repeat;

}

#how #header {

	background:url(../images/generic/header-how.jpg) top left no-repeat;		

}

#who #header {

	background:url(../images/generic/header-who.jpg) top left no-repeat;	

}

#faq #header {

	background:url(../images/generic/header-faq.jpg) top left no-repeat;

}

#contact #header {

	background:url(../images/generic/header-contact.jpg) top left no-repeat;

}



/* Footer

=========================================================================================== */

#footer { 

	position:relative;

	clear: both;

	height:100px;

	background:url(../images/generic/footer-bg.gif) bottom center no-repeat;

} 

#footer p {

	color:#78869a;

}

#footer .links {

	float:right; position:absolute; right:20px; bottom:50px;

}

#footer .links a {

	font-size:80%; padding:0 4px; color:#63738a; text-transform:uppercase; text-decoration:none;

}

#footer .links a:hover {

	text-decoration:underline;

}

#footer .kite {

	float:left; position:relative; left:20px;

}

#footer .kite img {

	margin-right:40px;

}

#footer p.developer {

	float:left; position:absolute; left:22px; bottom:10px; color:#909295;

}

#footer p.developer a {

	color:#76ac5e; text-decoration:none;

}

#footer p.developer a:hover {

	text-decoration:underline;

}