@import url("../socialbm.css");
/* ---------------------------------------------
	global styles
	[940 pixel based layout]
--------------------------------------------- */

body {
	font: 100% Arial, Helvetica, sans-serif;
	margin: 0 0 20px 0;
}

#header-wrapper,
#main-banner-wrapper,
#content-wrapper,
#footer-wrapper { 
	min-width: 965px;	
}

#header-inner
{
	height: 135px;
}

#footer-wrapper {
	height: 100px;
}

#main-banner-inner, #content-inner, #footer-inner {
	margin: 0 0 0 20px;
}

#header-inner { /* Slightly wider to try and bring logo into the grid */
	margin: 0 0 0 25px;
}
	
#header-wrapper {
	background: url(../../medianew/images/clearing-branding-header.gif) repeat-x top left;
}

/*
#main-banner-wrapper {
	background: #58a4d9;
	border-top: 1px solid #8fcdf8;
	border-bottom: 3px solid #3a87bc;
	overflow: auto;
}
*/

#main-banner-wrapper {
	background: #ffffff;
	border-top: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	overflow: auto;
}

#main-banner-inner {
	height: 125px;
	overflow: hidden;
}

#content-wrapper {
	border-top: 10px solid #f0f0f0;
	padding: 30px 0 40px 0;
}

a:link {
	text-decoration: none;
	color: #016cab;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #731f2e;
}

.clear {clear: both;}

/* ---------------------------------------------
	logo & branding 
--------------------------------------------- */

#logo h1 {
	text-indent: -9999px;
}

#logo h1 a {
	background: url(../../medianew/images/clearing-branding-logo.gif) no-repeat left bottom;
	float: left;
	height: 135px;
	width : 220px;
}


/* ---------------------------------------------
	left hand navigation
--------------------------------------------- */

#navigation {
	width: 180px;
	float: left;
	margin-left: 10px;
}

#navigation ul {
	font-size: 80%;
	margin-right: 30px;
}

#navigation li {
	background: url(../../medianew/images/nav-arrow.gif) no-repeat top left;
	display: block;
	line-height: 15px;
	padding-left: 15px;
	border-bottom: 1px solid #dadada;
}

#navigation li a {
	display: block;
	line-height: 18px;
	padding: 6px 0 6px 0;
}


/* ---------------------------------------------
	right hand content area
--------------------------------------------- */

#main-content {
	width: 740px;
	float: left;
	font-size: 80%;
	color: #333;
	line-height: 20px;
	min-height: 370px;
}

#main-content h2 {
	color: #0079c1;	
	font-size: 180%;
	letter-spacing: -1px;
	margin: 0 0 18px 0;
	padding: 0;
}

#main-content h3 {
	color: #666;
	font-size: 110%;
	font-weight: normal;
	line-height: 25px;
	margin: 0 0 10px 0;
}

#main-content h4 {
	font-size: 120%;
	margin: 0 0 8px 0;
}

#main-content p {
	color: #454545;
	font-size: 100%;
	line-height: 22px;
}

#course-listing ul, .specialUL ul {
	list-style: disc;
	margin: 0 0 0 15px;
}

#course-listing li, .specialUL li {
	margin: 0 0 6px 0;
}

.featureText {
	padding: 1.7em 1.5em 1.7em 1.5em;
	margin: 1.3em 0 1.3em 0;
	background: #F0F7FA;
	border: 1px solid #ddd;
}


/* ---------------------------------------------
	video page specific
--------------------------------------------- */

#flash-video-container {
	width: 640px;
	height: 360px;
	padding: 10px;
	background: #e8f6ff;
}

#video-preview-1, #video-preview-2, #video-preview-3 {
	float: left;
	width: 220px;
}

#video-preview-1, #video-preview-2 {
	margin-right: 15px;
}

#video-preview-1-caption, #video-preview-2-caption, #video-preview-3-caption {
	padding: 15px;
	
}

#video-preview-1-caption {
	background: #ededed;
}

#video-preview-2-caption {
	background: #ededed;
}

#video-preview-3-caption {
	background: #ededed;
}

#video-preview-1 h3, #video-preview-2 h3, #video-preview-3 h3 {
	font-weight: bold;
	line-height: 15px;
	margin: 0 0 5px 0 ;
}

#video-preview-1 p, #video-preview-2 p, #video-preview-3 p {
	line-height: 20px;
}


/* ---------------------------------------------
	front page specfic
--------------------------------------------- */

ul#main-routes {
	line-height: 15px;	
	padding: 0;
}

#main-routes li a {
	display: block;
	margin: 0;
}

ul#main-routes a {
	text-decoration: none;
}

#main-routes h3 {
	font-size: 150%;
	margin-bottom: .3em;
}

#main-routes p {
	font-size: 100%;
	line-height: 20px;
}

#main-routes li#results h3, #main-routes li#offered-place h3, #main-routes li#apply-now h3 {
	font-weight: bold;
} 

#main-routes li#results h3 {
	color: #f78f1e;
}

#main-routes li#offered-place h3 {
	color: #8ac342;
}

#main-routes li#apply-now h3 {
	color: #e73e97;
}

li#results a, li#offered-place a, li#apply-now a {
	padding: 15px;
	border-bottom: 1px solid #c0c0c0;
}

#main-routes li#results a:hover {
	background: #feefde;
}

#main-routes li#offered-place a:hover {
	background: #eef9da;
}

#main-routes li#apply-now a:hover {
	background: #fcecf5;
}

#course-listing a {
	color: #016cab;
}

#course-listing a:hover {
	text-decoration: underline;
}

#course-dropdown {
	background: #e1f2fe;
	padding: 15px;
	margin: 0 0 10px 0;
}

#course-dropdown select {	
	width: 100%;
	padding: 3px;
}


/* ---------------------------------------------
	footer area
--------------------------------------------- */

#footer-wrapper {
	background: #ededed;
	color: #666;
	font-size: 75%;
	clear: both;
	padding: 18px 0 18px 0;
	line-height: 18px;
}

#footer-col-1, #footer-col-2, #footer-col-3, #footer-col-4 {
	width: 220px;
	float: left;
	height: 100px;
}

#footer-col-2 {
	border-left: 1px dotted #666;
	padding-left: 15px;
}

#footer-col-3 {
	border-left: 1px dotted #666;
	padding-left: 15px;
}

#footer-col-4 {
	border-left: 1px dotted #666;
	padding-left: 15px;
}

#footer-wrapper h5 {
	color: #606060;
}

#footer-wrapper h5.address-spacing {
	margin-top: 5px;
}

#footer-wrapper li {
	margin-bottom: 2px;
}

#footer-wrapper a {
	padding-bottom: 2px;
}


/* ---------------------------------------------
	images
--------------------------------------------- */

#main-banner-inner .tiImageRight {
	margin: 0;
	padding: 0;
}


#main-content .tiImageRight img, #main-content .tiImageLeft img {	
	border: 8px solid #ededed;
	margin: 2px;
}

.tiImageLeft {
	float: left;
	padding: 0 30px 0 0;
}

.tiImageRight {
	float: right;
	margin: 0 10px 10px 15px;
}

#showimage {
	position:absolute;
	visibility:hidden;
	border: 1px solid #000;
	cursor: hand;
	cursor: pointer;
}

#dragbar {
	cursor: hand;
	cursor: pointer;
	background-color: #092869;
	color: #fff;
	min-width: 100px; /* NS6 style to overcome bug */ 
}

#dragbar a {color: #fff;}

/* ---------------------------------------------
	news articles
--------------------------------------------- */

#main-content .newsarticle {
	margin: 0px 0px 16px 0px;
}

/* IE Win needs to clear the left, otherwise the news articles could tile */
/** html div#newsblock {clear: left;}*/
/* End hide from IE5-mac */

#main-content .newsarticle img {
	float: left;
	margin: 0 12px 12px 0;
	border: 0;
}
#main-content .newsarticle p {
	margin-left: 134px;
	line-height: 20px;
}

#main-content .newsarticle h3 {
	font-size: 110%;
	font-weight: bold;
	margin-left: 134px;
	margin-bottom: 0px;
	line-height: 18px;
}

#main-content .newsarticle h4 {
	font-size: 85%;
	margin-left: 134px;
	margin-bottom: 5px;
	line-height: 18px;
}

#main-content .newsarticle a {
	text-decoration: underline;
}


/* ---------------------------------------------
	news callout
--------------------------------------------- */

#newscallout {
	float: right;
	width: 200px;
	margin: 0px 12px 0px 12px;
}
#newscallout h2 {
	font-size: 140%;
}
#newscallout img {
	border: 0;
}
.smallnews {
	background: #ededed;
}

#main-content .smallnews h3 {
	font-size: 90%;
	background: #0079c1;
	padding: 3px;
	color: #fff;
}
#main-content .smallnews p {
	padding: 3px;
	margin: 0 0 0 52px;
}
#main-content .smallnews img {
	float: left;
	padding: 6px;
	border: 0;
}

/* ---------------------------------------------
	Standard quote (case study)
--------------------------------------------- */

/* Article quotes - similar to featureText */
.quoteText {
	padding: 20px;
	margin: 1em 0 1em 0;
	background: #F0F7FA;
	border: 1px solid #ddd;
}
.quoteText h4 {
	margin: 0px 0px 1em 0px;
}

/* Marketing quotes - similar to featureText */
.quoteTextMarketing {
	padding: 20px;
	margin: 1em 0 1em 0;
	background: #F0F7FA;
	border: 1px solid #ddd;
	background: transparent url('../../medianew/images/quotemarks.gif') left top no-repeat;
}
.quoteTextMarketing div {
	background: transparent url('../../medianew/images/quotemarksb.gif') right bottom no-repeat;
}
.quoteTextMarketing h4 {
	margin: 0px 0px 1em 0px;
}
.quoteTextMarketing h5 {
	margin: -1em 0px 1em 0px;
	font-weight: 100;
	color: #cc0000;
}