@charset "utf-8";
/* CSS Document */

DEFAULT CSS for JOHN HOGG

html {
	background: #F3F3F4 !important;
}

#container {
	background: #fff;
	padding: 0 10px 10px;
}

/* =branding */

#branding {
	height: 80px;
	position: relative;
}

#branding h1 {
	background: url(../img/h1-logo.png) no-repeat;
	width: 140px;
	height: 80px;
	text-indent: -3000px;
	margin-left: 16px;
}

#branding h1 a {
	display: block;
	width: 140px;
	height: 80px;
}

#branding p {
	position: absolute;
	right: 0;
	top: 0;
	width: 80px;
	text-align: center;
}

body.blue #branding p {
	border-top: 4px solid #577bbd;
	background: url(../img/blue-dots.png) repeat-x bottom;
}

body.green #branding p {
	border-top: 4px solid #91c848;
	background: url(../img/green-dots.png) repeat-x bottom;
}

body.yellow #branding p {
	border-top: 4px solid #ffce34;
	background: url(../img/yellow-dots.png) repeat-x bottom;
}

body.orange #branding p {
	border-top: 4px solid #f68a39;
	background: url(../img/orange-dots.png) repeat-x bottom;
}

body.red #branding p {
	border-top: 4px solid #eb2535;
	background: url(../img/red-dots.png) repeat-x bottom;
}


/* =navigation */

body.blue #nav {
	height: 33px;
	background: url(../img/bluenav-bg.png) repeat-x;
}

body.green #nav {
	height: 33px;
	background: url(../img/greennav-bg.png) repeat-x;
}

body.yellow #nav {
	height: 33px;
	background: url(../img/yellownav-bg.png) repeat-x;
}

body.orange #nav {
	height: 33px;
	background: url(../img/orangenav-bg.png) repeat-x;
}

body.red #nav {
	height: 33px;
	background: url(../img/rednav-bg.png) repeat-x;
}

#nav ul {
	margin-left: 16px;
	display: inline;
}

#nav ul li {
	display: inline;
	padding-right: 16px;
	margin-right: 16px;
}

body.blue #nav ul li {
	border-right: 1px solid #bccae5;
}

body.green #nav ul li {
	border-right: 1px solid #d3e9b6;
}

body.yellow #nav ul li {
	border-right: 1px solid #ffd75d;
}

body.orange #nav ul li {
	border-right: 1px solid #f8a160;
}

body.red #nav ul li {
	border-right: 1px solid #f14e5e;
}

#nav ul li.last {
	border: 0;
}


/* =banners */



#slideshow {
	position: relative;
	height: 254px;
	margin-top: 4px;
}

#slideshow ul {
	margin: 0 !important;
}

#slideshow li {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	opacity: 0.0;
}

#slideshow ul li.active {
	z-index: 10;
	opacity: 1.0;
}

#slideshow ul li.last-active {
	z-index: 9;
}




/* =content */
#content {
	padding-bottom: 0px;
	margin-top: 4px;
	margin-bottom: 8px;
}


body #contentBottom {
	height:87px;
	width:940px;
	display:inline;
	float: left;
}

body.green #contentBottom {
	background: url(../img/green-content-bg.jpg) no-repeat left bottom;
}
body.yellow #contentBottom {
	background: url(../img/yellow-content-bg.jpg) no-repeat left bottom;
}
body.orange #contentBottom {
	background: url(../img/orange-content-bg.jpg) no-repeat left bottom;
}
body.red #contentBottom {
	background: url(../img/red-content-bg.jpg) no-repeat left bottom;
}
body.blue #contentBottom {
	background: url(../img/blue-content-bg.jpg) no-repeat left bottom;
}


body.green #content {
	background: url(../img/green-content-bg-repeat.jpg) repeat-y;
}

body.yellow #content {
	background: url(../img/yellow-content-bg-repeat.jpg) repeat-y;
}

body.orange #content {
	background: url(../img/orange-content-bg-repeat.jpg) repeat-y;
}

body.red #content {
	background: url(../img/red-content-bg-repeat.jpg) repeat-y;
}

body.blue #content {
	background: url(../img/blue-content-bg-repeat.jpg) repeat-y;
}

#pageBanner {
	float: right;
	width: 698px;
	position: relative;
	height: 69px;
	margin-left: 13px;
	display: inline;
}

body.blue #pageBanner {
	background: url(../img/blue-dots-big.png) repeat-x bottom;
}

body.blue #pageBanner h2 {
	font-size: 2.4em;
	color: #577bbd;
	margin: 0 0 0 11px;
	line-height: 69px;
}

body.green #pageBanner {
	background: url(../img/green-dots-big.png) repeat-x bottom;
}

body.green #pageBanner h2 {
	font-size: 2.4em;
	color: #91c848;
	margin: 0 0 0 11px;
	line-height: 69px;
}

body.yellow #pageBanner {
	background: url(../img/yellow-big-dots.png) repeat-x bottom;
}

body.yellow #pageBanner h2 {
	font-size: 2.4em;
	color: #ffce34;
	margin: 0 0 0 11px;
	line-height: 69px;
}

body.orange #pageBanner {
	background: url(../img/orange-dots-big.png) repeat-x bottom;
}

body.orange #pageBanner h2 {
	font-size: 2.4em;
	color: #f68a39;
	margin: 0 0 0 11px;
	line-height: 69px;
}

body.red #pageBanner {
	background: url(../img/red-big-dots.png) repeat-x bottom;
}

body.red #pageBanner h2 {
	font-size: 2.4em;
	color: #eb2535;
	margin: 0 0 0 11px;
	line-height: 69px;
}

#pageBanner img {
	position: absolute;
	right: 2px;
	top: 0;
}

/* =sidebar */
#sidebar {
	margin: 0;
	width: 229px;
	min-height: 450px;
	padding-bottom: 50px;
}

body.blue #sidebar {
	background: #577bbd;
}

body.green #sidebar {
	background: #91c848;	
}

body.yellow #sidebar {
	background: #ffce34;
}

body.orange #sidebar {
	background: #f68a39;
}

body.red #sidebar {
	background: #eb2535;
}

#sidebar img {
	width: 100%;
}

#sidebar h3 {
	color: #fff;
	font-size: 1.5em;
	margin-left: 10px;
	margin-bottom: 0;
}

#sidebar ul {
	padding-top: 3px;
	background: url(../img/white-dots.png) repeat-x top;
}

#sidebar ul li {
	line-height: 27px;
	background: url(../img/white-dots.png) repeat-x bottom;
}

#sidebar ul li a {
	display: block;
	height: 27px;
	color: #fff;
	text-decoration: none;
	padding: 2px 8px;
}

body.blue #sidebar ul li a:hover {
	background: #7995ca url(../img/white-dots.png) repeat-x bottom;
	color: #fff !important;
}


body.green #sidebar ul li a:hover {
	background: #a8d36d url(../img/white-dots.png) repeat-x bottom;
	color: #fff !important;
}

body.yellow #sidebar ul li a:hover {
	background: #ffd75d url(../img/white-dots.png) repeat-x bottom;
	color: #fff !important;
}

body.orange #sidebar ul li a:hover {
	background: #f8a160 url(../img/white-dots.png) repeat-x bottom;
	color: #fff !important;
}

body.red #sidebar ul li a:hover {
	background: #f14e5e url(../img/white-dots.png) repeat-x bottom;
	color: #fff !important;
}



#sidebar ul li.last {
	background: 0;
}

/* =main */
#main {
	margin-top: 8px;
}

#main p {
	margin-left: 12px;
	padding-right: 110px;
	color: #484848;
}

#main p em {
	font-style: normal;
	text-decoration: underline;
}

body.blue #main p.summary {
	color: #577bbd;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 35px !important;
}

body.green #main p.summary {
	color: #91c848;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 35px !important;
}

body.yellow #main p.summary {
	color: #ffce34;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 35px !important;
}

body.orange #main p.summary {
	color: #f68a39;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 35px !important;
}

body.red #main p.summary {
	color: #eb2535;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 35px !important;
}

/* =contact form */

form#contactForm {
	margin: 0 0 0 10px;
}

form#contactForm fieldset.grid_4 {
	width: 330px;
}


form#contactForm label {
	font-size: 1.2em;
	font-weight: bold;
	color: #484848;
}

form#contactForm label span {
	display: block;
}

form#contactForm input {
	margin-bottom: 15px;
	width: 280px;
}

form#contactForm textarea {
	margin-bottom: 15px;
	width: 330px;
	height: 135px;
}

form#contactForm select {
	width: auto;
	margin-bottom: 15px;
}

form#contactForm input.button {
	display: block;
	width: auto;
	float: right;
}

div.vcard {
	
	padding-top: 8px;
	color: #fff;
	background: url(../img/white-dots.png) repeat-x top;
}

div.inner {
	background: url(../img/white-dots.png) repeat-x bottom;
	padding-bottom: 8px;
}

div.vcard ul, div.vcard ul li {
	background: 0 !important;
	margin: 0;
	padding: 0 !important;
	line-height: 1.4em !important;
}

div.vcard ul {
	margin: 0 0 10px 10px;
}

div.vcard h4 {
	margin: 0 0 10px 10px;
	font-size: 1.3em;
}


/* =teasers */

#teasers {
	margin-top: 8px;
	margin-bottom: 8px;
}

#teasers h2 {
	background: url(../img/white-dots.png) repeat-x bottom;
	padding: 0 8px 5px;
	margin: 0 0 12px 0;
}

#teasers p {
	padding: 0 8px;
}

#teasers span  {
	display: block;
}

#teasers a:hover {
	color: #fff !important;
}

#teasers div {
	background: url(../img/teaser-bottom.png) no-repeat bottom;
	width: 229px;
	margin: 0 8px 0 0;
	display: inline;
}

#teasers #green {
	background-color: #91c848;
}


#teasers #yellow {
	background-color: #ffce34;
}

#teasers #orange {
	background-color: #f68a39;
}

#teasers #red {
	background-color: #eb2535;
	margin: 0 !important;
}


/* =infoBoxes */

#infoBoxes {
	margin-bottom: 8px;
}

.infoBox {
	background: #f2f2f2 url(../img/teaser-bottom.png) no-repeat bottom;
	height: 168px;
	width: 229px !important;
	margin: 0 8px 0 0 !important;
	position: relative;
}

.infoBox.omega {
	margin: 0 !important;
}

.infoBox h2 {
	background: url(../img/teaser-top.png) no-repeat top;
	padding: 4px 8px 4px;
	margin: 0;
}

.infoBox ul {
	background: url(../img/blue-dots.png) repeat-x top;
	padding-top: 3px;
}

.infoBox ul li {
	line-height: 27px;
	background: url(../img/white-dots.png) repeat-x bottom;
	padding: 0 8px;
}

.infoBox ul li.last {
	background: 0;
}

.infoBox #innerBox {
	background: url(../img/blue-dots.png) repeat-x top;
}

#innerBox p {
	padding: 4px 8px;
	margin-bottom: 0 !important;
}

#innerBox span {
	display: block;
	color: #eb2535
}

p a.signup {
	background: url(../img/signUp.png) no-repeat;
	display: block;
	height: 26px;
	text-indent: -3000px;
	position: absolute;
	bottom: 0;
	width: 229px;
}

/* =contact */

#contact {
	height: 33px;
	line-height: 26px;
}

body.blue #contact {
	background: url(../img/bluenav-bg.png) repeat-x;
}

body.green #contact {
	background: url(../img/greennav-bg.png) repeat-x;
}

body.yellow #contact {
	background: url(../img/yellownav-bg.png) repeat-x;
}

body.orange #contact {
	background: url(../img/orangenav-bg.png) repeat-x;
}

body.red #contact {
	background: url(../img/rednav-bg.png) repeat-x;
}



#contact h3 {
	margin: 0 0 0 8px;
	float: left;
}

#contact ul {
	margin: 0 0 0 16px;
	display: inline;
}

#contact ul li {
	display: inline;
	padding-right: 8px;
	margin-right: 8px;
	border-right: 1px solid #fff;
}

#contact ul li.last {
	border: 0;
}

/* =other links */

#otherLinks ul {
	margin: 4px 0 0 8px;
}

#otherLinks ul li {
	display: inline;
	padding-right: 8px;
	margin-right: 8px;
	border-right: 1px solid #484848;
}

#otherLinks ul li.last {
	border: 0;
}