/*  
Theme Name: CYBA
Theme URI: http://www.charljordaan.com
Description: CYBA website main stylesheet
Version: 1.0
Author: Charl Jordaan Designs
Author URI: http://www.charljordaan.com
*/

/* RESET
/////////////////////////////*/

html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
} 
body		  { line-height: 1 }
ol, ul		  { list-style: none }
blockquote, q { quotes: none }
:focus        { outline: 0 }
ins			  { text-decoration: none }
del			  { text-decoration: line-through }
table		  { border-collapse: collapse; border-spacing: 0 }
textarea      { overflow:auto }
p 			  { margin-bottom: 1.5em }
a img 		  { border: 0 }
small		  { font-size:0.9em }

/* GENERAL SETUP
/////////////////////////////*/

body { 
	font: 70%/1.5 Arial, Tahoma, Verdana, sans-serif;
	background:#3091d7 url(../images/bg.jpg) repeat-x;
	color:#5a6883;
}

a:link, a:active, a:visited { 
	color:blue;
	outline:none;
	text-decoration:none;
}

a:hover, a:focus {
	color:red;
	text-decoration:underline;
}

/* LAYOUT
/////////////////////////////*/

#warp {
	width:780px;
	height:700px;
	background:url(../images/bg-warp.jpg) no-repeat left top;
	margin:0 auto;
	position:relative;
}

h1 { 
	width:245px; 
	height:73px; 
	background:url(../images/h1.jpg) no-repeat; 
	display:block;
	float:left;
	position:absolute;
}

h2 { 
	width:451px; 
	height:25px; 
	background:url(../images/h2.jpg) no-repeat; 
	display:block;
	right:0;
	top:32px;
	position:absolute;
}

h3 { 
	width:288px; 
	height:99px; 
	background:url(../images/arrange.jpg) no-repeat; 
	display:block;
	margin:0 auto;
}

h1 span, h2 span, h3 span, h4 span, #intro span, #bottom span, #confidence span, button span { 
	display:block; 
	text-indent:-9999em;
}

button {
	width:137px;
	height:35px;
	background:url(../images/quote.jpg) no-repeat; 
	display:block;
	margin:0 auto;
	border:0;
	bottom:85px;
	position:absolute;
	right:78px;
	cursor:pointer;
}
input {
	width:149px;
		font-size:11px;
}

select {
	width:154px;
		font-size:11px;
}

button:hover {
	background-position:0 -35px;

}

#intro {
	width:263px;
	height:31px;
	background:url(../images/intro.jpg) no-repeat; 
	display:block;
	margin:5px auto 0 auto;
}

#bottom {

	width:233px;
	height:30px;
	background:url(../images/bottom.jpg) no-repeat; 
	display:block;
	margin:0 auto;
	bottom:5px;
	right:28px;
	position:absolute;
	
}

#confidence {
	width:140px;
	height:19px;
	background:url(../images/confidence.jpg) no-repeat; 
	display:block;
	margin:0 auto;
	bottom:45px;
	right:75px;
	position:absolute;
}

#form {
	width:260px;
	margin:0 auto;
	padding-top:35px;
}

form td {
		text-align:right;
		line-height:22px;
}

form td span {
	padding-right:8px;

}

form td span.req {
	font-weight:bold;
	color:red;
	padding:0;
}

#nav-top {
	position:absolute;
	right:0;
	top:10px;
}

#nav-top, #nav-top a {
	color:#b5ddf4;
	font-size:10px;
}

#flash {
	margin-left:9px;
	width:473px;
	height:225px;
	display:block;
	background:#0f2894 url(../images/flash.jpg) no-repeat left top;
}

#navbar {
	width:473px;
	margin-left:9px;
	height:86px;
	display:block;
	background:url(../images/nav.jpg) no-repeat left top;	
	font-size:11.5px;
	text-align:justify;
	overflow:auto;
}

#navbar ul {
	margin-left:20px;
	margin-top:10px;
	float:left;
	font-size:12px;
}

#navbar li {
	padding-left:20px;
	background:url(../images/navli.jpg) no-repeat left center;
	margin-left:20px;
	line-height:22px;
}

#navbar li a {
	color:white;
}

#sub {
	clear:both;
	width:473px;
	margin-left:9px;
	height:66px;
	color:#675336;
	display:block;
	background:url(../images/bg-sub.jpg) no-repeat left top;
}


#sub p {
	padding-top:10px;
	margin:0 10px;
	font-size:11px;
}



#content {
	clear:both;
	width:466px;
	margin-left:9px;
	height:245px;
	display:block;
	font-size:11.5px;
	text-align:justify;
}

#content h4 { 
	width:473px; 
	height:41px; 
	background:url(../images/h4why.jpg) no-repeat; 
	display:block;
	margin-bottom:5px;
}

p {
	margin-left:10px;
	margin-right:10px;
}


#footer {
	clear:both;
	width:770px;
	margin:0 auto;
	display:block;
}

#footer, #footer a {
	color:#fff;
	margin-top:10px;
}

#content-left {
	padding:0;
	width:483px;
	float:left;
	overflow:auto;
	margin-bottom:15px;
	position:absolute;
	top:73px;
	left:0;
}

#content-right {
	float:right;
	width:288px;
	margin-right:9px;
	height:622px;
	background:url(../images/bg-right.jpg) no-repeat; 
	position:absolute;
	top:73px;
	right:0;
}

/* HOME
/////////////////////////////*/
.home {overflow:hidden;}

.home p {
	font-size:12px;
	line-height:14px;
	margin:7px 10px;
}

.home ul {
	list-style:square;
	margin:0;
	margin-left:26px;
	padding:0;
}

.home ul li {

}



/* HELPERS
/////////////////////////////*/

.float-left   { float:left; padding-left:5px; }
.float-right  { float:right; padding-right:5px; }
.alignleft,
.align-left   { float:left; margin: 0 15px 0 0 }
.alignright,
.align-right  { float:right; margin: 0 0 0 15px }
div.aligncenter,
.aligncenter  { display: block; margin-left: auto; margin-right: auto }
.clear        { clear:both }
.center       { margin: 0 auto }
.margins      { margin:15px }
.push-top     { margin-top:15px }
.push-right   { margin-right:15px }
.push-bottom  { margin-bottom:15px }
.push-left    { margin-left:15px }
.border       { border:10px solid #eee }
.text-left    { text-align:left }
.text-right   { text-align:right }
.text-center  { text-align:center }
.text-justify { text-align:justify }
.underline    { text-decoration:underline }
.highlight    { background-color:#ffc }
.indent       { text-indent:15px }
.no-indent    { text-indent:0 }