/**********************************

	bkselec.com Screen CSS
	(c) Tripsis 2007

	www.tripsis.co.uk

**********************************


**********************************
	Generic styles
*********************************/
body {
	background: #3f3f3f url(../images/css/mainbg.gif) repeat-y 50% 0;
	font: 76%/1.5 Arial, Tahoma, Sans-Serif;
}


/*********************************
	Page Layout
*********************************/
div#wrap {
	width: 760px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -380px;
	padding-bottom: 32px;
}

div#pageholder {
	margin: 16px 25px;
}

a { text-decoration: none; }


/*********************************
	Header
*********************************/
div#header {
	clear: both;
	background: url(../images/css/header_textbg.png) no-repeat 0 0;
	height: 250px;
	margin-bottom: 16px;
	overflow: hidden;
}

	div#header div {
		background-position: 100% 0;
		background-repeat: no-repeat;
		height: 250px;
		padding-right: 535px;
	}
	
	div#header div.usb { background-image: url(../images/header/usb.jpg); }
	div#header div.program { background-image: url(../images/header/software.jpg); }
	div#header div.testimonials { background-image: url(../images/header/testimonials.jpg); }
	div#header div.pack { background-image: url(../images/header/network.jpg); }
	
		div#header div p {
			padding: 0 16px;
			color: #afafaf;
			font-size: 1.8em;
			line-height: normal;
			padding-top: 32px;
		}
		
		div#header div p.name {
			font-size: 1.2em;
			padding-top: 0;
		}


/*********************************
	Main Nav
*********************************/
ul#nav {
	list-style-type: none;
	float: left;
	margin-bottom: 8px;
	margin-right: 100px;
}

	ul#nav li {
		float: left;
		text-transform: uppercase;
		line-height: normal;
		padding-right: 10px;
		border-right: 1px solid #444;
		margin-right: 10px;
		margin-bottom: 6px;
	}
	
		ul#nav li a {
			color: #888;
			float: left;
			border-bottom: 1px solid #000200;
                        font-size: 1.1em;
                        color: #c2e7ef;
		}
		
		ul#nav li.selected a { color: #fff; }
		ul#nav li a:hover { border-bottom-color: #fff; }


/*********************************
	Language Bar
*********************************/
div#lang {
	float:left;
	width: 694px;
	height: 42px;
	margin-right: 16px;
	margin-bottom: 18px;
	background: url(../images/css/bkslogo.gif) no-repeat 100% 100%;
}

	div#lang ul {
		list-style-type: none;
		float: left;
		height: 18px;
		margin-top: 24px;
	}
	
		div#lang ul li {
			float: left;
			margin-right: 5px;
		}
		
			div#lang ul li a {
				display: block;
				float: left;
				width: 29px;
				height: 18px;
				background-repeat: no-repeat;
			}
			
			div#lang ul li a span { display: none; }
			
			div#lang ul li.english a { background-image: url(../images/css/english.gif) }
			div#lang ul li.french a { background-image: url(../images/css/francais.gif) }
			div#lang ul li.german a { background-image: url(../images/css/german.gif) }



/*********************************
	Language Select
*********************************/
h1.language {
	background: url(../images/css/bkslogo.gif) no-repeat 100% 0;
	margin: 18px 26px;
	margin-top: 64px;
	height: 38px;
}

div#languageselect {
	background: #3f3f3f url(../images/css/lanbg_tr.png) no-repeat 0 0;
	margin-bottom: 8px;
}

	div#languageselect div#text {
		float: left;
		width: 270px;
		height: 12em;
	}
	
	div#languageselect h2 {
		color: #fff;
		font-size: 1.2em;
		margin-left: 26px;
		margin-top: 54px;
	}

	div#languageselect p {
		color: #727272;
		float: left;
		margin-left: 26px;
	}
	
	div#languageselect ul {
		float: right;
		margin-right: 26px;
		margin-top: 62px;
	}
	
		div#languageselect ul li {
			float: left;
			margin-left: 46px;
			line-height: normal;
		}
		
			div#languageselect ul li a {
				color: #727272;
				display: block;
				padding-top: 8px;
			}
			
			div#languageselect ul li a:hover,
			div#languageselect ul li:hover a { color: #fff; }
		
			div#languageselect ul li a.flag {
				display: block;
				padding: 0;
				width: 82px;
				height: 46px;
				border: 1px solid #6f7b78;
				text-indent: -500px;
				overflow: hidden;
			}
			
			div#languageselect ul li a.flag:hover,
			div#languageselect ul li:hover a.flag {
				border-color: #fff;
			}
			
			div#languageselect ul li.ge a.flag { background-image: url(../images/flags/ge.png); }
			div#languageselect ul li.fr a.flag { background-image: url(../images/flags/fr.png); }
			div#languageselect ul li.en a.flag { background-image: url(../images/flags/gb.png); }
	
	div#languageselect div#lanbottom {
		clear: both;
		height: 36px;
		background: #000200 url(../images/css/lanbg_bl.png) no-repeat 0 100%;
	}



/*********************************
	Main Content
*********************************/
div#content {
	background: #fff url(../images/css/rnd_tl.png) no-repeat 0 42px;
	width: 710px;
	color: #666;
	margin-bottom: 8px;
	clear: both;
}
	
	div#content h1,
	div#content h2,
	div#content h3,
	div#content p,
	div#content table,
	div#content ol,
	div#content ul {
		padding: 0 28px;
		margin-bottom: 16px;
	}
	
	div#content hr {
		margin: 0 28px;
		margin-bottom: 16px;
	}

	div#content h1,
	div#operation h1 {
		background: #000200;
		margin-bottom: 0;
		color: #b4b4b4;
		font-size: 1.5em;
		height: 42px;
		overflow: hidden;
	}
	
	div#content h2 {
		margin-top: 36px;
		font-size: 1.2em;
		font-weight: bold;
		color: #3f3f3f;
	}
	
	div#content h3 {
		padding: 8px 0 0 0;
		margin: 0 28px;
		font-size: 1.1em;
		font-weight: bold;
		color: #3f3f3f;
		border-bottom: 1px solid #eee;
	}
	
	div#content a:hover { text-decoration: underline; }
	
	div#content p a.button {
		padding: 0.6em 1.8em;
		line-height: 2em;
		background: #3f3f3f;
		color: #fff;
		text-decoration: none;
		border: solid 1px #3f3f3f;
		font-weight: bold;
		display: block;
		float: left;
	}
	
	div#content p a.button:hover {
		background: #7f9fae;
		color: #000;
	}
	
	div#content div#sidepanel {
		float: right;
		padding: 28px;
	}
	
		div#content div#sidepanel ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		
			div#content div#sidepanel ul li {
				margin-bottom: 16px;
			}
		
			div#content div#sidepanel ul li img { border: 1px solid #c3c3c3; }
			
			
	div#content blockquote {
		background: #eee url(../images/css/openquote.gif) no-repeat 0 0;
		margin: 0 26px;
	}
	
		div#content blockquote p {
			background:url(../images/css/closequote.gif) no-repeat 100% 100%;
			padding: 6px 36px;
		}
		
	div#content p.cite {
		text-align: right;
		padding: 0 58px;
		margin-bottom: 26px;
	}
	
	div#content ol {
		list-style-type: decimal;
	}
		
	div#content ul {
		list-style-type: disc;
	}
	
		div#content li {
			margin-left: 16px;
		}
		
		
	div#content table {
		padding: 0;
		margin: 0 28px;
		margin-bottom: 14px;
		border: 1px solid #3f3f3f;
		width: 654px;
	}
		
	div#content table th,
	div#content table td {
		padding: 4px 8px;
	}
	
		div#content table th {
			background: #3f3f3f;
			color: #afafaf;
			font-weight: bold;
		}
		
		
	div#content div#contentbottom {
		background: #000200 url(../images/css/rnd_br.png) no-repeat 0 0;
		height: 38px;
		clear: both;
	}
	
	
/*********************************
	Operation
*********************************/
div#operation h1 {
	margin: 0 28px;
}

	div#operation ul {
		margin-left: 28px;
		margin-bottom: 24px;
		float: left;
		display: inline;
	}

		div#operation ul li {
			float: left;
			width: 156px;
			margin-right: 10px;
			color: #666;
		}
		
		div#operation ul li p {
			margin: 0;
			padding: 4px 0;		
		}
		
		


/*********************************
	Columns
*********************************/
div.col {
	float: left;
	width: 355px;
}

div.col-mini {
	float: left;
	width: 240px;
}

div.col-maxi {
	float: left;
	width: 470px;
}


/*********************************
	Forms
*********************************/
ul.form ul,
ul.form li {
	list-style-type: none;
	clear: both;
}

ul.form li {
	margin-bottom: 4px;
}

ul.form li span.field {
	float: left;
	width: 120px;
}

ul.form li span.value input,
ul.form li span.value textarea {
	width: 240px;
}

ul.form li span.submit {
	margin-left: 120px;
}

ul.form li em {
	font-size: 1.3em;
	vertical-align: top;
	color: #900;
	margin-left: 3px;
}

ul.form li span.errormessage {
	color: #900;
	margin-left: 120px;
}

/*********************************
	Footer
*********************************/
div#footer {
	clear: both;
	background: #898989;
	line-height: normal;
	text-align: center;
	padding: 4px 8px;
}


/*********************************
	Copyright
*********************************/
div#copy {
	clear: both;
	text-align: center;
	line-height: normal;
	color: #898989;
	padding: 4px 16px;
	font-size: 0.9em;
}

	div#copy a { color: #afafaf; }
	div#copy a:hover { text-decoration: underline; }