/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title : sabidesign.co.uk
Author : keith berry
Type: Screen, Projection
Description : Screen and projection stylesheet for sabidesign.co.uk

The wisdom of life consists in the elimination of nonessentials. 
	—Lin Yutang
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* COMMON AND GLOBAL
------------------------------------------------------------------*/
html, body{
	margin: 0;
	padding: 0;
	font-size: 10/16px;
	font-family: Verdana, Tahoma, Verdana, sans-serif;
	font-style: normal; 
	font-weight: normal; 
	line-height: 140%;
	color: #989898;
	background: #E6E3DE url(../images/BG.jpg) center fixed;
}

p{margin: 0 12px; padding: 5px; text-align: justify;}

img{border:0px}

/* LINKS
------------------------------------------------------------------*/
a, a:link, a:visited, a:active {color: #AD5405; text-decoration: none;}
a:hover {color:#1B3F57; text-decoration: underline; }

a { outline:none } /* Gets rid of Firefox's dotted borders */

/* HEADINGS
------------------------------------------------------------------*/
h1{
	float: left;
	margin: 5px 0 0 0;
}

h1 a{
	display: block;
	width:226px;
	height:83px;
	margin: 5px 0 0 0;
	text-indent: -9000px;
	background-image: url(../images/logo.gif);
}


h2{
	margin: 4px 0 0 0;
	padding: 0;
	height: 29px;
	border: 0px solid #294E61;
	text-indent: -9000px;
	background-position: left;
	background-repeat: no-repeat;
}

h2.recentnews{ background-color: #1B3F57; background-image: url(../images/recentnews.gif);}
h2.contact{ background-color: #1B3F57; background-image: url(../images/contact.gif);}
h2.contact_header{ background-color: #0C314E; background-image: url(../images/getintouch.gif);}
h2.winmac_header{ background-color: #0C314E; background-image: url(../images/windows&mac.gif);}
h2.resolution_header{ background-color: #0C314E; background-image: url(../images/resolution_sizes.gif);}
h2.browsers_header{ background-color: #0C314E; background-image: url(../images/browsers.gif);}

h3{
	margin: 10px 12px 0 12px;
	padding: 0px 11px 4px 10px;
	font-size: 11px;
	font-weight: 900;
	text-align: right;
	color: #4F4F4F;
	text-transform:uppercase;
	border-bottom: 0px dotted #E0E0E0;
	background: url(../images/hbackground.gif) bottom right no-repeat;
}

h4{
	margin: 1px 0 0 0;
	padding: 0;
	height: 29px;
	border: 0px solid #294E61;
	text-indent: -9000px;
	background-position: left;
	background-repeat: no-repeat;
}

h4.recentnews{background-color: #1B3F57; background-image: url(../images/recentnews.gif);}
h4.contact{background-color: #1B3F57; background-image: url(../images/contact.gif);}

/* MAIN NAVIGATION
------------------------------------------------------------------*/
#nav:after{
	border: 0px solid #979797;
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

#nav ul{
	margin: 52px 0 5px 0;
	padding: 0;
	list-style: none;
	float: right;
}

#nav ul li{
	display: block;
	padding: 18px 18px 8px 18px;
	background: url(../images/navBorder.gif) left repeat-y;
	float: left;
}

#nav ul li.first{
	background: none;
}

#nav ul li a{
	color: #989898;
	text-decoration: none;
	font-weight: normal;
}

#nav ul li a:hover{
	color: #1B3F57;
}

#nav ul li a.active{
	color: #FB7901;
	font-weight: bold;
	cursor: default;
}

#nav ul li a.active:hover{
	color: #FB7901;
}

/* IDS
------------------------------------------------------------------*/
#validxhtml { 
	position:absolute; 
	top:0px; 
	right:0px; 
	z-index:10; 
}

#wrapper{
	border: 0px solid #979797;
	margin: auto;
	width: 726px;
}

#flash{
	float: left;
	width:226px;
	height:83px;
	border: 0px solid #979797;
	margin: 5px 0 0 0;
}

#header{
	margin: 5px 0 0 0;
	clear: both;
	border: 0px solid #979797;
	height: 234px;
	background-position: bottom;
	background-repeat: no-repeat;
	border-bottom: 0px solid #FB7901;
}

body.home #header{
	height: 234px;
	background: #ffffff;
}

#headerbar{
	margin: 5px 0 0 0;
	clear: both;
	border: 0px solid #979797;
	height: 5px;
	background-position: bottom;
	background-repeat: no-repeat;
	border-bottom: 0px solid #FB7901;
	background-image: url(../images/orangebar.gif);
}

#headerright{
	border: 0px solid #979797;
	height: 229px;
	background-position: bottom;
	background-repeat: no-repeat;
	border-bottom: 0px solid #FB7901;
}

#main_text{
	border: 0px solid #979797;
	width: 430px;
	float: left;
	margin-bottom:60px; 	
}

body.home #main_text{
	border: 0px solid #979797;
	width: 430px;
}

#main_contact{
	float: left;
	margin-bottom:60px;
	width: 430px;
}


#rightbox{
	border: 0px solid #979797;
	width: 292px;
	height: 100%;
	float: right;
}

#logos{
	margin-bottom:20px;
	padding: 12px 20px 20px 20px;
	background: url(../images/logos.jpg);
	color: #979797;
	height: 140px;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf; 
}

#contactform2{
	margin-bottom:5px;
	padding: 12px 20px 20px 20px;
	background: url(images/contactformtile.gif);
	color: #979797;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf; 
}

#topofpage {
	clear: both;
	height: 23px;
	width: 61px;
	margin: auto;
	padding-top:10px;
}

#footer{
	clear: both;
	padding: 0px;
	height: 27px;
	margin: 0px 0px 0px 0px;
	background: url(../images/footer.gif);
}

/* Contact Form
------------------------------------------------------------------*/

form{
	margin: 8px 0 6px 16px;
	padding: 0 0 12px 0;
}

.label{
	display: block;
	margin: 0 0 6px 0;
	text-indent: 4px;
}

span{
	color: #AE0000;
}

input{
	display: block;
	width: 174px;
	text-indent: 2px;
	border: 1px solid #F3F3F3;
	font: 10px/16px Verdana, Tahoma, Verdana, sans-serif;
	background: #ffffff url(../images/form_bg.jpg) left top no-repeat;	
}

input:focus{
	display: block;
	width: 220px;
	text-indent: 2px;
	border: 1px solid #F3F3F3;
	font: 10px/16px Verdana, Tahoma, Verdana, sans-serif;
	background: #ffffff url(../images/form_bg.jpg) left top no-repeat;
	
}

input.button{
	margin: 16px 0 0 0;
	width: 90px;
	background: #B4B2B5;
	margin: 0px 0 12px 0px;
	color: #fff;
}

textarea{
	display: block;
	width: 220px;
	height: 170px;
	text-indent: 2px;
	border: 1px solid #F3F3F3;
	font: 10px/16px Verdana, Tahoma, Verdana, sans-serif;
	background: #ffffff url(../images/form_bg.jpg) left top no-repeat;	
}

textarea:focus{
	display: block;
	width: 220px;
	height: 170px;
	text-indent: 2px;
	border: 1px solid #F3F3F3;
	font: 10px/16px Verdana, Tahoma, Verdana, sans-serif;
	background: #ffffff url(../images/form_bg.jpg) left top no-repeat;
	
}

wordarea{
	display: block;
	width: 220px;
	height: 170px;
	text-indent: 2px;
	border: 1px solid #F3F3F3;
	font: 10px/16px Verdana, Tahoma, Verdana, sans-serif;
	background: #ffffff url(../images/form_bg.jpg) left top no-repeat;	
}

/* CLASSES
------------------------------------------------------------------*/

.dashedbox{
	position:relative;
	border: 1px dashed #979797;
	width: 349px;
	margin: 20px 0px 27px 22px;
	padding: 16px 16px 22px 16px;
	background: url(../images/contactformtile.gif);
}

.quotes{float: left; margin: 0px 5px 0px 0px;}
.quotes_end{float: right; }

p.quo{
	font-weight:900;
	font-size: 12px;
	font-style:italic;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
	word-spacing:2px;
	line-height:17px;
	text-align: justify;
}

p.courier{
	
	font-size: 11px;
	font-family:"Courier New", Courier, mono;
	text-align:right;
	margin-top:10px
}

.right_float{
	margin-bottom:20px;
	padding: 12px 20px 20px 20px;
	background: url(../images/contactformtile.gif);
	color: #979797;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf; 
}