/*
 * 20/20 Displays
 *
 * Subject to copyright.
 *
 * Web Development by LOOKsystems Limited
 * mailto:info@looksystems.ltd.uk
 * http://www.looksystems.ltd.uk
 *
 */

/* RESET CSS */

body {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6,
form, p, ol, ul, li , dl, dt, dd {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
:focus {
	outline: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CLEAR FIX */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/* WEB ACCESSIBILITY */

.wai {
	display: none;
}

/* PAGE LAYOUT */

body {
	padding: 0;
	margin: 20px;
	color: #5e779b;
	background: #5e779b url(../img/body-bg.gif) fixed no-repeat;
	font: normal 11px/14px verdana, helvetica, sans-serif;
}

#page {
	background: url(../img/page-tab.gif) 0 0 no-repeat;
	color: #5e779b;
	position: relative;
	width: 890px;
}

#blank {
	margin: 10px;
	text-align: left;
}

a {
	color: #5e779b;
	text-decoration: none;
	outline: 0;
}
a:hover {
	color: #000;
	text-decoration: underline;
}

/* BRANDING */

#branding {
	position: relative;
	background-color: #fff;
	margin-left: 38px;
	height: 122px;
}

#logo a {
	top: 26px;
	right: 26px;
	position: absolute;
	background: url(../img/logo.gif) 0 0 no-repeat;
	width: 115px;
	height: 64px;
	text-indent: -9000px;
	overflow: hidden;
}

#strapline em {
	top: 80px;
	left: 162px;
	position: absolute;
	background: url(../img/design-led-solutions.gif) 0 0 no-repeat;
	width: 183px;
	height: 21px;
	text-indent: -9000px;
	overflow: hidden;
}

/* MAIN */

#main {
	background-color: #fff;
	padding: 0 10px 10px 10px;
}

#main p {
	margin-bottom: 1em;
}

/* STAGE */

#stage {
	height: 260px;
	margin-bottom: 10px;
	position: relative;
}

#stage .image {
	position: absolute;
	right: 0;
}

#stage .image a {
	display: block;
	width: 680px;
	height: 260px;
	overflow: hidden;
}

#stage .thumbs {
	margin-left: 60px;
	width: 130px;
}

#stage li {
	float: left;
	margin: 0 10px 10px 0;
}
#stage li a {
	display: block;
	height: 55px;
	width: 55px;
	overflow: hidden;
}

#stage .caption {
	clear: both;
	width: 120px;
	margin-left: 60px;
	font-style: italic;
	font-size: 10px;
}

#stage .caption:before {
	content: "/ ";
}

/* NAVIGATION */

#nav {
	float: left;
	width: 180px;
	position: relative;
}

#nav li {
	font-weight: bold;
	margin-bottom: 25px;
}

#nav .subnav {
	left: 60px;
	margin-top: -1em;
	position: absolute;
}

#nav .subnav h4 {
	font-size: 11px;
	line-height: 14px;
	margin: 2.6em 0 7px 0;
}
#nav .subnav h4.first {
	margin-top: 0;
}

#nav .subnav li {
	font-weight: normal;
	margin-bottom: 7px;
}

#nav .subnav li ul {
	margin: 7px 0 -1px 0;
}

#nav .subnav li li {
	font-size: 10px;
	margin-left: 1em;
	font-style: italic;
	margin-bottom: 6px;
}

#nav .select:after {
	content: " /";
}

/* CONTENT */

#content {
	float: left;
	margin-left: 10px;
	position: relative;
}

#title {
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	margin: 6px 0 18px 0;
	width: 680px;
}
#title.with_sidebar {
	width: 448px;
}

#text {
	font-size: 12px;
	line-height: 18px;
	padding: 44px 14px 30px 19px;
	position: relative;
	border: 1px solid #5e779b;
	width: 645px;
	height: 400px;
}
html>body #text {
	min-height: 400px;
	height: auto;
}

#text.with_sidebar {
	width: 415px;
}

#text .tab {
	top: -1px;
	left: -1px;
	position: absolute;
	background: #fff url(../img/text-tab.gif) bottom right no-repeat;
	width: 20px;
	height: 45px;
}

#text p {
	margin-bottom: 10px;
}

/* LISTING */

.listing .item {
	font-size: 10px;
	margin-bottom: 1.5em;
	position: relative;
	padding-left: 65px;
	height: 55px;
}

html>body .listing .item {
	min-height: 55px;
	height: auto;
}

.listing .thumb {
	top: 0;
	left: 0;
	position: absolute;
}

.listing h4 {
	font-size: 11px;
	margin-bottom: 10px;
}

.listing h4 span {
	font-weight: normal;
}

.listing .summary {
	margin-bottom: 10px;
}

.listing .summary a {
	font-style: italic;
}

/* LATEST NEWS */

.news .text a {
	color: #fff;
}

.news .more a {
	font-weight: bold;
	font-style: italic;
}

.back {
	margin-top: 2em;
	font-weight: bold;
	font-size: 11px;
}

/* CONTACT FORM */

#contactform {
	width: 400px;
}

#contactform .invalid {
	background: #fee;
}

/* SUBSCRIBE FORM */

#subscribeform {
	width: 200px;
}

#subscribeform input {
	border: none;
}

#subscribeform .button {
	color: #fff;
	background-color: #9eadc3;
	font-weight: bold;
	padding: 2px 0;
}

#subscribeform .invalid {
	color: #900;
}

/* PAGER */

.pager {
	font-size: 11px;
	font-weight: bold;
}

/* SIDEBAR */

#sidebar {
	float: right;
	width: 200px;
	padding: 43px 10px 24px 10px;
	background: #9eadc3 url(../img/sidebar-tab.gif) 0 0 no-repeat;
	line-height: 14px;
	font-size: 10px;
	color: #fff;
}

#sidebar h2 {
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	margin-bottom: .5em;
}

#sidebar .credits {
	margin-top: 1em;
}

/* FOOTER */

#footer {
	clear: both;
	background: #fff url(../img/footer-tab.gif) 650px bottom no-repeat;
	padding-left: 200px;
	line-height: 14px;
	font-size: 10px;
	position: relative;
	height: 42px;
}

#footer p {
	position: absolute;
}

#footer ul {
	float: right;
	text-align: right;
	margin-right: 10px;
}

#footer li {
	display: inline;
	font-style: italic;
}
#footer li.copyright {
	display: block;
}
#footer li.rss {
	font-size: 11px;
	font-weight: bold;
	position: absolute;
	left: 70px;
	top: 0;
}

#footer .tab:after {
	content: " / ";
}