/* Copyright Vanbar Multimedia Ltd 2008 */

/*************************** Top Level ****************************/
*	 { margin:0; padding:0; border:0; }
body {
	background-color:#373737;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	color:#000000;
	font-size:small;
	line-height:1.4em;
}


/*********************** Common Styles ***********************/
/* Positioning */
.left			{float:left}
.right			{float:right}
.clearfloats	{clear:both}
.clearright		{clear:right}
.textcenter		{text-align:center}
.textright		{text-align:right}

/* Styles */
div#content p,
div#content h1,
div#content h2,
div#content h3 {
	padding:0 15px 0 15px;
}
p {
	margin-bottom:15px;
}
h1, h2, h3 {
	line-height:normal;
	color:#99CC40; /*99CC40 */
	font-weight:normal;
}
h1 {
	font-size:x-large;
	margin-bottom:20px;
}
h2 {
	font-size:large;
	padding-top:10px;
	margin-bottom:10px;
	margin-top:30px;
}
h3 {
	font-size:medium;
	padding-top:10px;
	margin-bottom:10px;
}
img {}
ul, ol {
	margin:5px 0 15px 45px;
/*	padding-left:60px;*/
}
ul.greenticks {
	margin:15px;
}
ul.greenticks li {
	margin:10px 0 7px 0;
	padding-bottom:5px;
	padding-left:30px;
	list-style:none;
	background:url(/images/common/bullet_tick.gif) 0 0 no-repeat;
	font-weight:bold;
}

/* Styling */
strong				{ font-weight:bold; }
strong.red			{ color:#FF0000 }
strong.red_italic	{ color:#FF0000; font-style:italic }
strong.blue			{ color:#0000CC } /* 7755FF */
blockquote {
	text-align:center;
	font-style:italic;
	margin:10px;
	margin-bottom:15px; /* same as p tag */
}

/* forms */
form { }
input, textarea, select { border:1px solid #000000;}
label {}
textarea {}
input {}
input.button {}

/* links */
a 			{ }
a:link		{ color:#99CC40; }
a:active	{ color:#000000; }
a:visited	{ color:#99CC40; }
a:hover		{ text-decoration:none; } /* FEFE18 */

a.big_button {
	background:url(/images/common/button_on.gif) top right no-repeat;
	color:#000000 !important;
	text-decoration:none;
	font-weight:bold;
	height:30px;
	display:block;
	float:left;
}
a.big_button span {
	padding:7px 0px 8px 25px;
	margin-right:25px;
	background:url(/images/common/button_on.gif) top left no-repeat;
	display:block;
}
a.big_button:hover,
a.big_button span:hover {
/*	background-image:url(/images/common/button_off.gif);*/
	color:#FFFFFF;
}


/************************* Common Divs *************************/
div.container {
	width:798px; /* should be 795 but that's IE and its 3px bug for you */
	margin:0 auto;
}
div#main_container {
	background:#FFFFFF url(/images/common/leftmenu_bg.gif) repeat-y; /* Faux columns background */
	color:#000000;
	padding-bottom:5px;
}
div#content {
	margin:30px 0px 30px 180px;
}
div#left_column {
	width:180px;
	float:left;
	color:#FFFFFF;
}
div#left_partners {
	font-weight:bold;
	margin:10px 5px;
	text-align:center;
}


/************************** Header ***************************/
div#header {
	height:55px;
	background:url(/images/common/header_bg.gif) repeat-x;
}
div#header img		{ display:block; }
div#header_left		{ float:left; width:291px; }
div#header_right { 
	float:right;
	width:504px;
	text-align:center;
}
div#header_right p {
	color:#FEFE18;
	font-size:medium;
	font-weight:bold;
	margin:7px 0 5px 0;
}
div#header_right p a {
	color:#FEFE18; /* can't use a generic 'inherit' due to IE... */
	text-decoration:none;
}
div#header_right p em {
	text-decoration:underline;
	font-style:normal;
}
div#header_right ul { margin:0 0 0 5px;}
div#header_right li {
	float:left;
	margin-left:5px;
	margin-right:5px;
	font-size:90%;
	font-weight:bold;
	color:#FEFE18;
	list-style-type:disc;
}
div#header_right li#leading {
	list-style:none;
	margin-left:0;
}
div#header_right li span.text {
	color:#FFFFFF;
}
div#header_right li a {
	color:#FFFFFF; /* can't use a generic 'inherit' due to IE... */
	text-decoration:none;
}


/************************** Footer ***************************/
p#footer_links {
	clear:both;
	margin:10px 0;
	text-align:center;
	font-size:90%;
	color:#999999;
}
p#footer_links a {
	padding:0px 5px;
	color:#999999;
	text-decoration:none;
}
div#footer {
	clear:both;
	margin:0 3px 0 3px;
	background:url(/images/common/footer_bg.gif) repeat-x;
	color:#FFFFFF;
	height:33px;
}
div#footer p#footer_left {
	float:left;
	margin-left:-3px;
	padding:8px 0 5px 35px;
	background:url(/images/common/footer_bg_left.gif) no-repeat;
}
div#footer p#footer_right {
	float:right;
	margin-right:-3px;
	padding:8px 35px 5px 0;
	background:url(/images/common/footer_bg_right.gif) top right no-repeat;
}
div#footer_info {
	clear:both;
	text-align:center;
	font-size:x-small;
	color:#CCCCCC;
	padding-top:10px;
	margin-bottom:10px;
}
div#footer_info p {
	margin:0;
	line-height:1.3em;
}
div#footer_info p#credit a {
	color:#CCCCCC;
	text-decoration:none;
}
div#footer_info p#credit a:hover {
	text-decoration:underline;
}
div#footer_info p#credit img {
	vertical-align:text-bottom;
	display:inline;
}


/*************************** TopMenu ****************************/
div#topmenu {
	clear:both;
	background:#5B5B5B;
	height:30px;
	color:#FEFE18;
	font-size:90%;
	font-weight:bold;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
}
div#topmenu p {
	float:left;
	margin:5px 0 0 0px;
	padding:0 0 0 50px;
}
div#topmenu ul {
	margin:0;
	padding:0;
/*	padding-right:10px; */
}
div#topmenu li {
	float:right;
	list-style-type:none; /* IE 6 cant show bullet in inline lists */
}
div#topmenu li a {
	display:block;
	float:left;
	padding:6px 10px;
	text-decoration:none;
	color:#FFFFFF;
	border-left:1px solid #000000;
}
div#topmenu li.firstchild a {
/*	border-left:0; */
}
div#topmenu li a:hover {
	color:#FEFE18;
}

body#contact	div#topmenu ul li#contact_topnav a,
body#quote		div#topmenu ul li#quote_topnav a,
body#newsletter	div#topmenu ul li#newseletter_topnav a,
body#brochure	div#topmenu ul li#brochure_topnav a,
body#roadshow	div#topmenu ul li#roadshow_topnav a
 { color:#FEFE18; }


/************************** LeftMenu ***************************/
ul#leftmenu {
	margin:23px 0 0 0; /* override default */ 
	margin-right:1px;
}
ul#leftmenu li {
	list-style:none;
	margin:0; /* override default */
	color:#EFEFEF;
	border-bottom:1px solid #333333;
}
ul#leftmenu li a {
	display:block;
	width:120px;
	padding:15px 9px 15px 50px;
	text-decoration:none;
	color:#EFEFEF;
	font-weight:bold;
}
ul#leftmenu li a:hover {
	color:#FEFE18;
}
ul#leftmenu li em {
	text-decoration:none;
	font-style:normal;
}
ul#leftmenu li a					{ background-position:10px 10px; background-repeat:no-repeat }
ul#leftmenu li#home_btn a			{ background-image:url(/images/common/home_btn_off.gif); }
ul#leftmenu li#home_btn a:hover		{ background-image:url(/images/common/home_btn_on.gif); }
ul#leftmenu li#about_btn a			{ background-image:url(/images/common/about_btn_off.gif); }
ul#leftmenu li#about_btn a:hover	{ background-image:url(/images/common/about_btn_on.gif); }
ul#leftmenu li#sol_btn a			{ background-image:url(/images/common/sol_btn_off.gif); }
ul#leftmenu li#sol_btn a:hover		{ background-image:url(/images/common/sol_btn_on.gif); }
ul#leftmenu li#quote_btn a			{ background-image:url(/images/common/quote_btn_off.gif); }
ul#leftmenu li#quote_btn a:hover	{ background-image:url(/images/common/quote_btn_on.gif); }
ul#leftmenu li#contact_btn a		{ background-image:url(/images/common/contact_btn_off.gif); }
ul#leftmenu li#contact_btn a:hover	{ background-image:url(/images/common/contact_btn_on.gif); }

body#home ul#leftmenu li#home_btn a,
body#about ul#leftmenu li#about_btn a,
body#solutions ul#leftmenu li#sol_btn a,
body#quote ul#leftmenu li#quote_btn a,
body#contact ul#leftmenu li#contact_btn a	{ color:#FEFE18; }
body#home ul#leftmenu li#home_btn a			{ background-image:url(/images/common/home_btn_on.gif); }
body#about ul#leftmenu li#about_btn a		{ background-image:url(/images/common/about_btn_on.gif); }
body#solutions ul#leftmenu li#sol_btn a 	{ background-image:url(/images/common/sol_btn_on.gif); }
body#quote ul#leftmenu li#quote_btn a		{ background-image:url(/images/common/quote_btn_on.gif); }
body#contact ul#leftmenu li#contact_btn a	{ background-image:url(/images/common/contact_btn_on.gif); }

/***** Sub Menus *****/
ul#leftmenu li ul {
	position:absolute;
	top:-1000px;
	margin-left:170px;
	background:#666666;
	margin-top:-35px;
	line-height:1.1em;
	}
ul#leftmenu li ul li {
	border:0; /* overrider the default */
}
ul#leftmenu li ul li a {
	width:120px;
	padding:10px 9px 10px 30px;
	font-size:90%;
	border:1px solid #333333;
	border-bottom:0;
}
ul#leftmenu li ul li.lastchild a {
	border-bottom:1px solid #333333; /* the border must be in the a to prevent the menu  */
}									/*	from disappearing as the mouse rolls over the border - in IE */
ul#leftmenu li:hover ul#aboutmenu {
	top:251px;
}
ul#leftmenu li:hover ul#solmenu {
	top:202px;
}

/* all this little lot is to override the styling  of the ul next level up */
/* got to be a better way */
ul#leftmenu li ul#aboutmenu li a,
ul#leftmenu li ul#aboutmenu li a:hover,
body#about ul#leftmenu li ul#aboutmenu li a,
ul#leftmenu li ul#solmenu li a,
ul#leftmenu li ul#solmenu li a:hover,
body#solutions ul#leftmenu li ul#solmenu li a {
	background-image:none;
}
body#about ul#leftmenu li ul#aboutmenu li a,
body#solutions ul#leftmenu li ul#solmenu li a {
	color:#EFEFEF;
}
body#about ul#leftmenu li ul#aboutmenu li a:hover,
body#solutions ul#leftmenu li ul#solmenu li a:hover {
	color:#FEFE18;
}


/************************* Home Page ************************/
/* OLD DESIGN
body#home div#main_container {
	background-color:#000000;
	color:#FFFFFF;
}
body#home img#home_splash {
	margin-top:-56px;
	margin-top:-30px;
}
body#home p#intro {
	background:#353535 url(/images/home/intro_arrow.gif) 10px 18px no-repeat;
	margin:-5px 0 15px 0;
	padding:5px 5px 5px 70px;
	font-size:large;
	line-height:1.4em;
}
ul.greenstars {
	margin-left:0;
	padding-left:60px;
}
ul.greenstars li,
ul.greenstars li.greenstars_lastchild  {
	margin:10px 0 10px 0;
	list-style:none;
	padding-left:60px;
}
ul.greenstars li {
	background:url(/images/common/bullet_star.gif) 0 8px no-repeat;
}
ul.greenstars li.greenstars_lastchild {
	background:url(/images/common/bullet_bulb.gif) 3px 3px no-repeat;
	height:40px;
}
body#home blockquote {
	background-color:#3399CC;
	padding:10px 0;
	margin:20px 100px 0 100px;
	font-weight:bold;
}
body#home blockquote a {
	color:#000000;
	padding:10px 50px;
}
body#home blockquote a:hover {
	text-decoration:none;
}
*/

div#boffin {
	background-color:#CCCCCC;
	color:#000000;
	padding-bottom:5px;
}
div#boffin h2 {
	color:#000000 !important;
	font-size:small;
	text-align:center;
	font-weight:bold;
	margin-top:0;
}
div#boffin div#boffin_image {
	background-color:#FFFFFF;
	width:100%;
	text-align:center;
}
div#boffin dl {
	margin:3px 0 0 3px;
	font-size:90%;
}
div#boffin dt {
	clear:left;
	float:left;
	font-weight:bold;
}
div#boffin dd {
	margin-left:5px;
}

div.button_holder,
div.button_holder2 { /* complete cludge - just look away */
	width:400px;
	overflow:visible;
	margin:0 auto;
}
div.button_holder2 {
	width:380px; /* may as well have fixed width background images - IE... */
}

body#home div#partners {
	text-align:center;
	margin-top:-25px;
	margin-bottom:10px;
}
body#home div#content h1 {
	text-align:center;
	font-weight:bold;

}
div.home_product {
	float:right;
	width:142px;
	margin:0px 0 25px 10px;
	text-align:center;
}
div.home_product h2 {
	margin-bottom:5px;
	font-size:small;
	font-weight:bold;
	color:#000000;
}
div#content div.home_product p,
div#content div.home_product h2,
div#content div.home_product img {
	margin:0;
	padding:0;
}
ul#about_sl_left,
ul#about_sl_right {
	float:right;
	width:270px;
}
ul#about_sl_left li,
ul#about_sl_right li {
	width:200px;
}




/************************ Rapid Quote ***********************/
body#quote div#main_container {
	background-color:#000000;
	color:#FFFFFF;
}

/* Steps */
ul#steps {
	list-style-type:none;
	margin:15px 0 0 0;
	margin:0;
	padding:0;
}
ul#steps li {
	list-style:none;
	background-image:none;
	float:right;
	width:33%;
	margin:0;
	padding:0;
}
ul#steps li div.panel {
	background-color:#666666;
	height:107px;
	width:90%;
	font-size:12px;	/* Much as i hate it i can't get % or em to work well enough cross-browser */
	margin-bottom:10px;
}
ul#steps li#leftstep div.panel	{ margin-left:0;}
ul#steps li#midstep div.panel	{ margin:0 5% 0 5%; }
ul#steps li#rightstep div.panel	{ margin-left:10%;}
/* Note the 45px bottom maring on the img is used by the timing p tag to stay at the
bottom of the panel div. When the float is cleared it pushes it below this height */
ul#steps li div.panel p	{
	margin:0;
	padding:9px 5px 0 44px;
}
ul#steps li div.panel p.number {
	float:left;
	color:#99CC40;
	font-weight:bold;
	font-size:x-large;
	margin-left:-30px;
}
ul#steps li div.panel p.timing	{
	clear:left;
	color:#F3FC09;
	padding:0;
	text-align:center;
	margin-top:10px;
}


form { padding:10px; clear:right; }
form h3 { margin:20px 0 5px 0; }
fieldset {
	display:inline; /* Cludge to fix clear float issues on Safari */
	margin-left:15px;
	padding:10px 15px 0 45px;
	border:1px solid #666666;
}
fieldset div.safari_prop { /* Cludge to fix clear float issues on Safari */
	height:1px;
	width:510px;
}
fieldset fieldset {
	display:block; /* Cludge to fix clear float issues on Safari */
	margin:0 0px 25px 0;
	padding:3px 0 0 60px;
	border:0;
}
fieldset fieldset br {
	clear:left;
	line-height:0;
	height:0;
}
legend {
	margin-left:-60px; /* Must update fieldset label if changing */
	overflow:visible;
}
legend span.wrap { /* hack to make the legends wrap */
	width:420px;
	display:block;
}
label, input, textarea, select {
	float:left;
	margin-bottom:10px;
	height:auto;
}
fieldset fieldset input,
fieldset fieldset label {
	margin:0 0 5px 0;
	height:auto;
}
input, textarea, select {
	width:350px;
	padding:3px;
	color:#000000;
}
textarea {
	height:100px;
	margin:0 0 0 0; /* Must be same as the fieldset left padding */
	padding:0; /* for IE */
}
/* classes for styling */
div.hidden {
	display:none;
}
label.inline {
	margin-right:20px;
}
label.leading {
	clear:left;
	width:200px;
	padding:3px;
}
input.radio {
	width:auto;
	border:0;
	margin-right:3px;
}
textarea.big {
	width:450px;
	height:200px;
}
p.footnote {
	font-size:x-small;
	margin:5px 10px 0 10px;
	clear:left;
}
/* Stoopid IE can't handle negative text-ident which is needed to give a
bullet point effect and a hanging paragraph - therefore have to use two 
spans or div which are floated left to prevent text from wrapping under 
the bullet */
.bullet {
	float:left;
	margin-right:5px;
	display:inline;
	width:10px;
}
.bullet_text {
	float:left;
	margin-right:5px;
	display:block;
	width:400px;
}
/* Vertical q's and q's */
div.vertgroup {
	width:55px;
	float:left;
	margin-right:15px;
}
div.vertgroup label,
div.vertgroup input {
	float:none;
	display:block;
}
div.vertgroup label {
	margin:0;
	padding:0;
	text-align:center;
}
div.vertgroup input {
	margin:auto;
}
/* buttons */
div#buttons {
	text-align:center;
	margin:25px 0 0 0px;
}
div#buttons input {
	width:auto;
	padding:2px;
	margin:0 5px 0 5px;
	float:none;
	background:#FEFE18;
	color:#000000; /* 99CC40 FEFE18 */
	font-weight:bold;
}
/* About You */
fieldset#you input			{width:255px}
fieldset#you input.short	{width:100px;}
/* Cludge */
input#cameras6 {
	margin:3px 3px 0 18px;
}

/************************** Contact *************************/
form.contact_form {
	clear:none;
}
form.contact_form fieldset {
	border:none;
}
form.contact_form input,
form.contact_form textarea  {
	width:270px;
}
form.contact_form textarea {
	margin-left:0px;
	clear:none;
}
form.contact_form div#buttons input {
	width:auto;
}


/************************** Solutions *************************/
body#solutions h1 {
	color:#000000;
}
body#solutions h2 {
	color:#88DD20;
}
h2#xe_how {
	margin-top:80px;
}
div#right_column {
	width:150px;
	margin:0 0 0 15px;
	padding:5px 0 0 5px;
	float:right;
	background-color:#99CC40; /* 99CC40 99CC40 */
	font-size:small;
	font-weight:bold;
	line-height:normal;
	text-align:center;
/*	color:#444444; */
	color:#FFFFFF;
}
div#right_column h2,
div#right_column h3 {
	color:#FFFFFF;
	font-weight:bold;
	margin-top:0;
}

div#overview_options {
	margin:40px 0 0 0px;
	text-align:center;
}
div#overview_options div.right {
	width:200px;
	margin-bottom:20px;
}
div#content ul.cm,
div#content ul.xe {
	margin-left:0;
	padding-left:15px;
	list-style:none;
}
div#content ul.cm li {
	padding-left:30px;
	background:url(/images/starlesson_cm/bullet.gif) 0 2px no-repeat;
}
div#content ul.xe li {
	padding-left:30px;
	background:url(/images/starlesson_xe/bullet.gif) 0 2px no-repeat;
}
blockquote.solutions {
	width:180px;
	margin:30px 0 0 10px;
	font-style:normal;
	font-weight:bold;
	padding:5px 0 0px 0;
	float:right;
	text-align:left;
	background-color:#AAAAAA;
}
blockquote.solutions p.quote {
	color:#FFFFFF;
	margin:0 0 10px 0;
}
blockquote.solutions p.referee {
	background-color:#FFFFFF;
	margin:0;
	text-align:right;
	font-size:x-small;
	line-height:1em;
}
span.large {
	font-size:large;
	line-height:0;
	margin:0 3px 0 3px;
}


/************************** tick boxes *************************/
p.totop {
	text-align:right;
	margin:-10px 0;
	padding:0;
}