/* Copyright Vanbar Multimedia Ltd 2006 */

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


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

/* Styles */
p {
	margin-bottom:15px;
}
h1, h2, h3 {
	line-height:normal;
}
h1 {
	font-size:large;
	color:#333333;
	margin-bottom:20px;
}
h2 {
	font-size:large;
	color:#555555;
	padding-top:10px;
	margin-bottom:10px;
}
img {}
ul, ol {
	margin:5px 0 5px 45px;
}
li {
	margin:3px 0 3px 0;
	list-style-type:disc;
}
dl {}
dt {
	color:#333333;
	font-weight:bold;
}
dd {
	margin-bottom:10px;
}

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

/* forms */
form {}
input, textarea, select {}
label {}
textarea {}
input {}
input.button {}

/* links */
a 			{ }
a:link		{ color:#0000CC; }
a:active	{ color:#000000; }
a:visited	{ color:#0000CC; }
a:hover		{ color:#000000; }


/************************* Common Divs *************************/
div#container {
	width:795px;
	margin:0 auto;
	border:1px solid #FFFFFF;
	background:#FFFFFF url(/images/common/leftmenu_bg.gif) repeat-y; /* Faux columns background */
}
div#content {
	margin:30px 15px 30px 210px;
}
div#left_column {
	width:180px;
	float:left;
}
div#right_column {
	width:150px;
	margin:30px 7px 0 15px;
	float:right;
	color:#555555;
	font-size:small;
	line-height:normal;
}


/************************** Header ***************************/
div#header			{ height:55px;}
div#header img		{ display:block; }
div#header_left		{ float:left; width:307px; }
div#header_mid		{ float:right; width:196px; }
div#header_right 	{ float:right; width:240px; }


/************************** Footer ***************************/
div#footer {
	clear:both;
	padding-left:180px;
	text-align:center;
	font-size:x-small;
	color:#666666;
	padding-top:10px;
	margin-bottom:10px;
}
div#footer ul {
	margin:0 0 10px 0;
	text-align:center;
}
div#footer li {
	margin:-2px 0;
	padding:0 7px 2px 2px;
	line-height:normal;
	height:10px;
	list-style:none;
	border-right:1px solid #666666;
	display:inline;
}
div#footer li.lastchild {
	border:0;
}
div#footer li a {
	text-decoration:none;
	color:#666666;
}
div#footer p {
	clear:left;
	margin:0;
	line-height:1.3em;
}
div#footer p#credit a {
	color:#666666;
	text-decoration:none;
}
div#footer p#credit a:hover {
	text-decoration:underline;
}
div#footer p#credit img {
	vertical-align:text-bottom;
	display:inline;
}

/*************************** TopMenu ****************************/
div#topmenu {
	clear:both;
	height:25px;
	background:#666666;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	color:#FFFFFF;
}
div#topmenu p#strapline {
	float:left;
	margin:3px 0 0 5px;
	font-size:x-small;
}
div#topmenu ul {
	margin:0; /* override default */
	float:right;
	margin-right:10px;
}
div#topmenu li {
	float:left;
	list-style:none;
	margin:0; /* override default */
	font-weight:bold;
}
div#topmenu li a {
	display:block;
	color:#EFEFEF;
	text-decoration:none;
	padding:4px 7px 2px 7px;
	height:19px;
	border-left:1px solid #333333;
}
div#topmenu li#firstchild a {
	border-left:0;
}
div#topmenu li a:hover {
	color:#CCCCCC;
}

/************************** LeftMenu ***************************/
ul#leftmenu {
	margin:20px 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:150px;
	padding:10px 9px 5px 20px;
	text-decoration:none;
	color:#EFEFEF;
	font-weight:bold;
}
ul#leftmenu li a:hover {
	color:#CCCCCC;
}
ul#leftmenu li em {
	text-decoration:none;
	font-style:normal;
}
ul#leftmenu li ul {
	margin-top:-5px;
	line-height:1.1em;	
}
ul#leftmenu li ul li {
	border-bottom:0;
}
ul#leftmenu li ul li a {
	width:120px;
	margin-left:-15px;
	padding:5px 9px 5px 20px;
	font-size:90%;
}
ul#leftmenu li ul li#iv a { background:url(/images/common/sentry_vision_bullet.gif) 0 4px no-repeat; }
ul#leftmenu li ul li#sv a { background:url(/images/common/impartial_view_bullet.gif) 0 4px no-repeat; }
ul#leftmenu li ul li#con a { background:url(/images/common/consultancy_bullet.gif) 0 4px no-repeat; }
ul#leftmenu li ul li#quote a { background:url(/images/common/quote_bullet.gif) 0 4px no-repeat; }
div#left_column p {
	margin:20px 3px 0 3px;
	text-align:center;
	font-size:x-small;
	font-weight:bold;
	line-height:1.2em;
}
div#left_column p a {
	color:#FFFFFF;
	text-decoration:none;
}
ul#leftmenu span#starlesson {
	font-size:x-small;
	display:block;
	line-height:1em;
}

/*********************** Call to Action **********************/
div.calltoaction {
	width:150px;
	margin-bottom:20px;
	border:1px solid #555555;
}
div.calltoaction h2 {
	color:#FFFFFF;
	font-weight:normal;
	padding:3px 5px 5px 5px;
	background:#00CC00;
}
div.calltoaction ul {
	margin:5px 0 5px 14px;
}
div.calltoaction ul li {
	list-style-type:disc;
	margin:0 5px 8px 5px;
	font-size:x-small;
	line-height:1.1em;
}
div.calltoaction ul li li {
	margin:0 5px 3px 5px;
}
div.calltoaction ul li a,
div.calltoaction ul li a:visited {
	color:#555555;
	text-decoration:none;
}
div.calltoaction ul li a:hover {
	color:#000000;
}


/************************* Home Page ************************/
body#home div#kid {
	float:right;
}
body#home div#kid p {
	text-align:center;
	font-weight:bold;
	width:197px;
	padding:0 5px 0 5px
}
body#home div#content h1 {
	margin-bottom:10px;
}
body#home div#content ul#sectors {
	height:170px;
	margin:0;
	width:auto; /* override the above */
}
body#home div#content ul#sectors li {
	list-style:none;
	float:left;
	width:177px;
	height:80px;
	margin:0 ; /* override default */
	color:#000000;
	font-size:medium;
	font-family:Arial, Helvetica, sans-serif;
}
body#home ul#sectors li#schools { background:#3300CC url(/images/home/sector_bsf_bg.jpg) right top no-repeat; border:0px solid #0065FD; }
body#home ul#sectors li#bsf		{ background:#00CC01 url(/images/home/sector_school_bg.jpg) right top no-repeat; border:0px solid #01C601; }
body#home ul#sectors li#local	{ background:#CC0000 url(/images/home/sector_local_bg.jpg) right top no-repeat; border:0px solid #CC0000; }
body#home ul#sectors li#thirdparty { background:#3399FF url(/images/home/sector_thirdparty_bg.jpg) right top no-repeat; border:0px solid #32CAFD; }
body#home ul#sectors li a {
	display:block;
	height:56px;
	width:153px;
	padding:12px;
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bold;
}
body#home ul#sectors li a:hover {
	color:#CCCCCC;
}
body#home ul#about_sst {
	margin-left:35px;
	margin-bottom:20px;
}
div.bot_panel,
div.bot_panel_lastchild {
	float:left;
	background:#666666;
	height:60px;
	width:230px;
	padding:20px 10px;
	margin-right:35px;
	overflow:visible;
}
div.bot_panel_lastchild {
	margin-right:0;
}
div.bot_panel img {
	margin-top:-20px;
	border:1px solid #666666;
}
div.bot_panel_lastchild h2,
div.bot_panel_lastchild p,
div.bot_panel h2, 
div.bot_panel p {
	color:#FFFFFF;
	margin:0;
	padding:0;
	line-height:normal;
	text-align:center;
}
div.bot_panel_lastchild a,
div.bot_panel a {
	color:#FFFFFF;
	text-decoration:none;
}
div.bot_panel_lastchild a:hover,
div.bot_panel a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}


/************************* Solutions ************************/
body#solutions div#content img {
	margin-top:15px;
}


/************************ Rapid Quote ***********************/

/* Steps */
ul#steps {
	list-style-type:none;
	margin:15px 0 0 0;
	margin:0;
	padding:0;
}
ul#steps li {
	list-style:none;
	float:right;
	width:33%;
	margin:0;
	padding:0;
}
ul#steps li div.panel {
	background:url(/images/solutions/step_bg.gif) repeat-x;
	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;
	border:1px solid #0000CC;
}
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 img {
	float:left;
	width:30px;
	margin:9px 0 45px 9px;
}
ul#steps li div.panel p	{
	margin:0;
	padding:9px 5px 0 44px;
}
ul#steps li div.panel p.timing	{
	clear:left;
	color:#F3FC09;
	padding:0;
	text-align:center;
}


form { padding:0 0 10px 0; clear:right; }
form h3 { margin:35px 0 0 0; }
fieldset {
	display:inline; /* Cludge to fix clear float issues on Safari */
	border:1px solid #125496;
	padding:15px 0px 15px 45px;
}
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;
	border:1px solid #125496;
	padding:3px;
}
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:#125496;
	color:#F3FC09;
	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 {
	clear:none;
}
form#contact input,
form#contact textarea  {
	width:270px;
}
form#contact textarea {
	margin-left:0px;
	clear:none;
}
form#contact div#buttons input {
	width:auto;
}


/************************** CCTV For *************************/
body#bsf form {
	width:390px;
}
body#bsf input,
body#bsf textarea  {
	width:310px;
}