/*************************************************************/
/*********GENERAL STUFF - SET FONT SIZE AND TYPE ETC *********/
/*************************************************************/
body,td,p{font-family:arial, Trebuchet MS, Verdana, Tahoma, helvetica,sans-serif; font-size: 62.5%; padding: 0px; margin: 0px;}
body {background-color:#b8b6b7; color:#222; text-align:left;}

ul {list-style-position:outside;}
li {font-size: 1.2em; padding-bottom:3px;}
p {font-size: 1.4em; padding-bottom:10px;line-height:1.4em;}
em {font-style:italic; color:#cd2630;}

/*default style for links*/
a:link{color:#525252; font-weight: bold; text-decoration: none;}
a:visited{color:#525252; font-weight: bold; text-decoration: none;}
a:hover{color:#ffcc00; font-weight: bold; text-decoration: underline;}
a:active{color:#ffcc00; font-weight: bold; text-decoration: none;}
a img {border:0px}

a.light{color:#525252; font-weight: normal; text-decoration: none;}

/*default style for headings*/
h1 {color:#ce2630; font-size:2.2em; font-weight:bold; padding: 0px; margin:0px; margin-bottom:10px;}
h2 {color:#ce2630; font-size:1.6em; font-weight:normal; padding:0 0 5px 0; margin:0px;}

/*************************************************************/
/******** OVERALL LAYOUT - HEADERS AND MENUS ETC ********/
/*************************************************************/

/*container for whole area of site - centered, max and min width layout */
#container {margin-left:auto; margin-right:auto; min-width:760px; max-width:1100px; background-color:#fff;}

/*items at head of every page - logo banner and menu*/
#topspacer {height: 22px; background-color:#b8b6b7;}
#newheader {background-color: #b3212a; position:relative; width:100%; height: 134px;}
#leftbannerimg {position:absolute; top:-22px; left:-12px; z-index:10;}
#rightbannerimg {position:absolute; top:-22px; right:0; z-index:1;}
#menu {height:34px; width:100%; padding:0px; margin:0px; margin-top:-10px; border:0px; z-index:100; background-color:#ebebeb;}

/* to get equal height columns */
#main{margin-left:auto; margin-right:auto; margin-top:-4px; min-width:270px; max-width:610px; padding:0px 270px 0px 220px;}
#mainwrapper{float:left; width:100%; border-left:220px solid #fff; border-right:270px solid #fff; margin-top:16px; margin-left:-220px; margin-right:-270px; display:inline; /* So IE plays nice */}
#maintext {float:left; width:100%; margin-right:-100%;}
#menu_sidebar{float:left; position:relative; width:188px; margin-left:-220px; background-color:#ce2630; border-left: 16px solid #fff; border-right: 16px solid #fff;}
#side_info {float:right; position:relative; width:238px; margin-right:-270px; border-left: 16px solid #fff; border-right: 16px solid #fff;}

/* for pages with no right-hand column */
#main_v2{margin-left:auto; margin-right:auto; margin-top:-4px; min-width:540px; max-width:880px; padding:0px 0px 0px 220px;}
#mainwrapper_v2{float:left; width:100%; border-left:220px solid #fff; margin-top:16px; margin-left:-220px; display:inline; /* So IE plays nice */}

/* bottom logo bar */
#ext_logo {position:relative; bottom:0px; right:0px; width:100%; text-align:center; margin-bottom:6px;}

/* extra padding at top and bottom of page if required */
#padspacer {height: 0px;}

/* class to clear floats */
.clear{clear:both;}

/* center images */
img.center {display: block; margin-left: auto; margin-right:auto;}

/*************************************************************/
/******** MAINTEXT FORMATING ********/
/*************************************************************/

#mainwrapper a:link{text-decoration: underline;}
#mainwrapper a:visited{text-decoration: underline;}
#mainwrapper a:hover{text-decoration: none;}
#mainwrapper div.toggle {background: #525252 url(img/darrowdown.gif) no-repeat 90% center; color:#f7f7f7; width:98%; line-height:1.5em; padding: 5px; margin: 5px 0px; font-size:1.2em; cursor:pointer;}
#mainwrapper div.toggleSection {display: none;}
#mainwrapper div.box1 {width:70%; padding: 2%; margin: 10px 14%;}
#mainwrapper div.box2 {width:96%; padding: 2%; margin: 0 0 8px 0;}
#mainwrapper div.box3 {width:80%; padding: 2%; margin: 10px 8%;}
#mainwrapper div.levels {position:relative;}
#mainwrapper div.levels img {position:absolute; top: -25px; right: -20px; width:75px;}
#mainwrapper div.levels img.second {right: 75px;}
#mainwrapper div.levels img.third {right: 155px;}
#mainwrapper div.levels_side {position:relative;}
#mainwrapper div.levels_side img {position:absolute; left: 400px; top: -5px; padding-bottom:20px;}
#mainwrapper div.levels_side img.second {left: 300px;}
#mainwrapper div.levels_side img.third {left: 200px;}
#mainwrapper div.levels_side_notext {position:relative; height:50px; width:100%; padding-bottom:10px;}
#mainwrapper div.levels_side_notext img {position:absolute; left: 400px; top: -5px; padding-bottom:20px;}
#mainwrapper div.levels_side_notext img.second {left: 300px;}
#mainwrapper div.levels_side_notext img.third {left: 200px;}
#mainwrapper div.wide img {left: 550px;}
#mainwrapper div.highlight1 {background-color:#f9c896; color:#222;}
#mainwrapper div.highlight2 {background-color:#f1e07f; color:#222;}
#mainwrapper div.highlight3 {background-color:#cef38e; color:#222;}
#mainwrapper div.highlight4 {background-color:#ebebeb; color:#222;}
#mainwrapper div.highlight5 {background-color:#d0b5b6; color:#222; text-align:left;}
#mainwrapper div.title {font-weight: bold; font-size:1.3em;}
#mainwrapper div.team img {float:left; width:80px; border:1px solid; margin-right:10px; margin-bottom:5px;}
#mainwrapper ul.text {padding:0px; padding-left:20px; margin:0px;}
#mainwrapper ul.text li {font-size:1.3em; line-height:1.5em;}
#mainwrapper img.smlImg {width:100px;}

/* side information boxes */
#side_info div.highlightbox1 {line-height:1.5em; background-color:#ebebeb; margin:0px; padding:8px 8px 4px 8px; text-align:left;}
#side_info div.highlightbox1 h2{padding-bottom:8px;}
#side_info div.highlightbox1 p, td{font-size:1.1em;}
#mainAreaImage{width:100%; text-align:right;}

/* tables for contact/interest forms */
#mainwrapper td {font-size:1em; padding:2%; vertical-align:center; height:10px;}
#mainwrapper td input {width:96%; padding:2%; vertical-align:center; height:10px;}
#mainwrapper td textarea {width:96%; padding:2%; height:100px;}
#mainwrapper td input.submit {width:110px; height:30px; cursor:pointer; cursor:hand; background-color:#848484; color:#fff;}
#mainwrapper td input.radio {width:10%;}
#mainwrapper tr.messages {display:table-row; text-align:right; color: #D8000C; font-weight: bold;}
#mainwrapper tr.success {color: #044406;}
#mainwrapper tr.hide_row {display:none;}

/* form elements for ito membership form errors/success */
.form_error {
	color: #D8000C; font-weight: bold;
}

fieldset.form_error {
	border: 1px dotted #D8000C;
	color: black;
}
fieldset p.success {color: #044406;}
fieldset p.hide {display: none;}

/*************************************************************/
/******** INCLUDE FILE FORMATTING - MENUS ETC ********/
/*************************************************************/

/*top menu*/
#menu ul {text-align:left; list-style-type:none; padding: 6px 1.3% 6px 0px; border:0px; height:18px; margin-bottom:0px;}
#menu ul li {display:inline;}
#menu ul li a{font-size:1.3em; color:#444; font-weight:bold; padding-right: 20px; padding-left: 10px; padding: 6px 1.3%; height:22px;}
#menu ul li a.active{color:#900; background-color:#fff;}
#menu ul li a:hover{text-decoration:none; color:#900}

/*menu sidebar*/
#menu_sidebar hr {color: #fff; background-color:#fff; border: #fff; border:0px; margin:0px; padding:0px; height:2px; width: 100%; text-align: right; border: none;}
#menu_sidebar h1 {font-size: 1.6em; letter-spacing:0.8px; color:#fff; margin:0px; border:0px; background-color:#525252; font-weight:bold; padding: 10px 8px;}
#menu_sidebar h1.additional{border-top: #fff solid 10px;}
#menu_sidebar h2 {margin: 0px; border:0px; padding:8px 12px 8px 8px; background-color: #ce2630; color:#fff;}
/*#menu_sidebar h2.expandable {background: url(img/darrowdown_sml.gif) no-repeat 90% 75%;}*/
#menu_sidebar a h2{color:#fff; letter-spacing:0.8px; font-size:1.2em; font-weight:normal; text-decoration:none; border-top:2px solid #fff;}
#menu_sidebar a:link{text-decoration: none;}
#menu_sidebar a:active{text-decoration: none;}
#menu_sidebar a:visited{text-decoration: none;}
#menu_sidebar a:hover{text-decoration: none; color:#ffcc00;}
#menu_sidebar a.active h2{background: url(img/darrowleft.gif) no-repeat 100% 50%; color:#ffcc00; text-decoration:none;}
#menu_sidebar a:hover h2{text-decoration: none; color:#ffcc00;}
#menu_sidebar a.active:hover h2{text-decoration:none;}
#menu_sidebar a.visited h2{color:#fff; font-weight: normal; text-decoration:none;}
#menu_sidebar ul {margin:0px; padding:0px 8px 10px 15px; background-color: #fff;}
#menu_sidebar ul li {list-style: none; background: url(img/rarrow_sml.png) no-repeat 0px 15px; margin:0px; padding:10px 0px 0px 10px;}
#menu_sidebar ul li a{font-weight:normal; font-size:1em;}
#menu_sidebar ul li a:link{text-decoration: underline; color:#525252;}
#menu_sidebar ul li a:visited{text-decoration: underline; color:#525252;}
#menu_sidebar ul li a:hover{color:#ffcc00; text-decoration:underline;}
#menu_sidebar ul li a.active{color:#ffcc00; text-decoration:underline;}
#menu_sidebar ul li a.active:hover{text-decoration:none;}
#menu_sidebar h1#basket_icon {background: #ebebeb url("http://outspokentraining.co.uk/img/trolley-ot.png") no-repeat 95% 0px; color:#ce2630; padding:14px 8px; border: 2px solid #525252;}
#menu_sidebar h1.delivery {background: #525252 url(img/outspoken_delivery_sml.png) no-repeat 135px 0px;}

/* footer */
#ext_logo a.left_spacer{margin-left:23px;}
#ext_logo hr{width:100%; text-align:center; margin:0px; padding:0px;}

/* Form Layout */

.verticalForm fieldset
{
	display: block;
	margin: 1em 0 1em 0;
	padding: 1em 1em 1em 1em;
	clear: both;
}

.verticalForm p {font-size: 1em; margin-left: 1em;}

.verticalForm label.error  {
	color: #D8000C; font-weight: bold;
}

.verticalForm fieldset.radio
{
	clear: both;
	display: block;
	margin: 1em 0 1em 0;
}

.verticalForm fieldset.radio input
{
	clear: both;
	float: left;
	width: auto;
}

.verticalForm fieldset.radio label
{
	font-weight: normal;
}
.verticalForm fieldset.cb
{
	clear: both;
	display: block;
	margin: 1em 0 1em 0;
}
.verticalForm fieldset.cb legend {font-weight: bold;}
.verticalForm fieldset.cb input
{
	display:inline;
	width: auto;
}

.verticalForm fieldset.cb label
{
	font-weight: normal;
	display: inline;
	width: auto;
}
.verticalForm input
{
	display: block;
	width: 15em;
}

.verticalForm label
{
	display: block;
	margin: 0 1em 1em 1em;
	font-weight: bold;
	float: left;
}

.verticalForm label.first
{
	padding-top: 1em;
}

.verticalForm select
{
	display: block;
}

.verticalForm textarea {display: block; clear: both; margin-left: 1em; margin-right: 1em; width:90%;}
.clearer
{
	clear: both;
	height: 1px;
}