/*****************************************************************************************
/  CSS RESET
/*****************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*****************************************************************************************
/  MAIN STYLES
/*****************************************************************************************/
	
body#body {
	background: #0d0e10 url('../img/bg.jpg') repeat-x center 0;
	color: #e9e9e9;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
}

p, ul, ol, table { margin: 0 0 }

em { color: #d9e3ea }

h1, h2, h3{
	font-weight: normal;
	line-height: normal;
	letter-spacing:-1px;
}

h1 { font-size:30px; }
h2 { font-size:26px; }
h3 { font-size:22px; }
h4 { font-size:14px; }
h5 { font-size:12px; }
h6 { font-size:10px; }
h1, h2, h3 {
	color: #6099ff;
	margin-top: 15px;
}
h4 {
	color: #a3d5ea;
	font-size: 14px;
}

a, a:link, a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover, a:active, a.active {
	text-decoration: underline;
}

/* Lists */
#main div.box1 ul {
	padding:20px;
	list-style:inside;
}
#main div.box1 ol {
	padding:20px;
	list-style:inside;
	list-style-type:decimal;
}

#sidebar .box1 { margin:7px 0 18px; padding: 18px; }
#sidebar #videos .box1 { margin: 0 0 20px; padding: 10px; }

#sidebar ul, #sidebar ol { 
	list-style-type:none;
}

blockquote {
	margin:15px 0; padding:10px 20px;
	border-bottom:1px solid #000;
	font:1.00em Georgia, "Times New Roman", Times, serif; color:#fff;
	background:url(images/bg-box.png) repeat scroll 0 0 !important;
	background: #222;
}

/*****************************************************************************************
/  BASE LAYOUT
/*****************************************************************************************/

#container {
	margin: auto;
	text-align: left;
	width: 960px;
	position: relative;
}

#header, #content, #footer, div.content {
	float: left; display: inline;
	clear: both;
	position: relative;
	z-index:1;
}

#header {
	height: 230px;
	width: 100%;
	z-index:2; 
}

#logo { margin: 0 }

#logo  a {
	background: url('../img/logo.png') no-repeat;
	cursor: pointer;
	position: absolute;
	top: 85px; left: 35px;
	display:block;
}

#content, .content {
	padding: 0 0 4em;
	width: 100%;
}

.home #main {
	float: left;
	width: 374px;
}

#main {
	float: left;
	width: 598px;
}

.home #sidebar {
	float: right;
	width: 543px;
}

#sidebar {
	float: right;
	width: 333px;			
}

#sidebar h3 { margin-top:10px; }
	
#footer {
	width: 100%; height: 65px;
	background: url(images/bg-footer.gif) repeat-x;
}

#footerWrap {
	color: #dadada;
	width: 960px;
	margin: 0 auto;
	position: relative;
}


/*****************************************************************************************
/  CSS FIXES - FOOTER POSITION
/*****************************************************************************************/

#container {position: relative; min-height: 100%;}
html, body, * html #container {height: 100%;}
#footer {margin-top: -73px; bottom: -7px }


/*****************************************************************************************
/  CUSTOM CSS
/*****************************************************************************************/

.copyright { font-size:12px }

#content, div.content, div.xsection, #Projects {
    background: url('../img/bg-box.png') repeat !important;
	background: #111;
	display:block;float:left;clear:both;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border: 6px;
	border-radius 6px;
	padding:25px;
	font-size:16px;
	margin-top:10px;
	width:910px;

}

/*****************************************************************************************
/  NAVIGATION
/*****************************************************************************************/

#TopHeader {
    padding:8px 0px 0px 35px
}

#menubar { 
    width:960px; 
    height:58px; 
    background: url('../img/menu-bar.png') no-repeat left ;
    position:absolute;
    top: 175px;
    left: 0px;
}

#menu, #menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
#menu {
	line-height:	1.1;
}
#menu ul {
	position:		absolute;
	top:			-999em;
	width:			20em; /* left offset of submenus need to match (see below) */
}
#menu ul li {
	width:			100%;
}
#menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
#menu li {
	float:			left;
	position:		relative;
}
#menu a {
	display:		block;
	position:		relative;
}
#menu li:hover ul,
#menu li.sfHover ul {
	left:			0;
	top:			3.2em; /* match top ul list item height */
	z-index:		99;
}
ul#menu li:hover li ul,
ul#menu li.sfHover li ul {
	top:			-999em;
}
ul#menu li li:hover ul,
ul#menu li li.sfHover ul {
	left:			20em; /* match ul width */
	top:			15px;
}
ul#menu li li:hover li ul,
ul#menu li li.sfHover li ul {
	top:			-999em;
}
ul#menu li li li:hover ul,
ul#menu li li li.sfHover ul {
	left:			20em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
#menu {
	float:			left;
	margin-bottom:	1em;
}
#menu a {
	padding: 		.75em 1em;
	text-decoration:none;
}
#menu a, #menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#FFF;
	font-weight:bold;
	font-size:15px;
}
#menu li { }
#menu li li { }
#menu li li li { }

#menu li.sfHover a.sf-with-ul {
    color:#d0d6dc ;
    background:none !important;
}
#menu li.sfHover a li a, #menu li.sfHover {
    color : none !important;
}
#menu li:hover, #menu li.sfHover,
#menu a:focus, #menu a:hover, #menu a:active {
	color:#6099ff;
	background:none !important;
	outline:		0;
}


/*** arrows **/
#menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.9em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
#menu ul .sf-sub-indicator { background-position:  -10px 0; }
#menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
#menu ul a:focus > .sf-sub-indicator,
#menu ul a:hover > .sf-sub-indicator,
#menu ul a:active > .sf-sub-indicator,
#menu ul li:hover > a > .sf-sub-indicator,
#menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../img/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	/*-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;*/
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

/*****************************************************************************************
/  FORM STYLES
/*****************************************************************************************/

input.text, select.select, textarea.textarea
{
	border: 0;
	color: #000;
	padding: 7px;
}

input.text { width: 168px }
select.select { width: 200px }
textarea.textarea { width: 375px; height: 100px; background-color: #e9eef4 }

button.button {
	color: #fff;
	height: auto; width: auto;
	line-height: normal;
	white-space: nowrap;
}

/* General forms */

form.form {  }

form.form ol.fieldset {	list-style: none }

form.form ol.fieldset li.field {
	margin: 0 0 13px;
	position: relative;
}

form.form ol.fieldset li.field label {
	position: absolute;
	top: 5px; left: 195px;
}
		
form.form p.submit { margin: 0 }

form.form p.submit input { padding: 5px 10px }


/* Search forms where button and text input are next to each other  */

form.search { /* nothing here */ }
	
form.search p.fields { margin: 0 }

form.search p.fields input, form.search p.fields button {
	display: inline;
	vertical-align: middle;
}


/*****************************************************************************************
/  INDIVIDUAL FORMS
/*****************************************************************************************/

form#topSearch {
	background: url(images/bg-search.png) no-repeat;
	width: 178px; height: 32px;
	position: absolute;
	top: 10px; right: 0;
}

form#topSearch p.fields input {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	width: 130px;
	background: none;
	overflow: hidden;
	border: none;
	position: absolute;
	top: 8px; left: 8px;
}

form#topSearch p.fields button {
	background: url(images/ico-search.png) no-repeat;
	width: 21px; height: 21px;
	border: none;
	position: absolute;
	top: 5px; right: 10px;
}

form#comments {
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 20px 30px;
}
		
/*****************************************************************************************
/  UTILITY CLASSES
/*****************************************************************************************/

.l { text-align: left }
.c { text-align: center }
.r { text-align: right }
.aligncenter { margin: 5px auto 15px auto;	display: block; }
.alignleft { margin: 5px 15px 5px 0; float: left; }
.alignright { margin: 5px 0px 5px 15px; float: right; }

.wrap, .col { float: left;	display: inline; position: relative; }
.wrap { clear: both }

.clear { clear: both }
.fl { float: left }
.fr { float: right }
.hide, .hidden, .anchor, .skip { display: none }
.nomargin { margin-bottom: 0 !important }
.noborder { border: 0 !important }
.top { margin-top: 0 !important }

.replace, .br { display: block; font-size: 1%; line-height: 0; text-align: left; text-indent: -10000px; }

.hr { background: #ccc; height: 1px; margin: 1.5em 0 }
.hr hr { display: none }



/*****************************************************************************************
/  CLEAR FIX
/*****************************************************************************************/

.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.clearfix { display: block }
.fix{ clear: both; height: 1px; margin: -1px 0 0; overflow: hidden; }

/*****************************************************************************************
/  BODY BOTTOM
/*****************************************************************************************/

.News {
	width:341px;
	float:left;
	margin:0 28px 0 0;
}
.News h2 {
	display:block;
	background:url(images/arrow_red.gif) 0 0 no-repeat;
	padding:0 0 0 25px;
	font:bold 22px/16px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:inherit;
	margin:0 0 17px 0;
}
.News h3 {
	display:block;
	background:url(images/date_bg.gif) 0 0 no-repeat;
	width:331px;
	height:17px;
	padding:0 0 0 7px;
	margin:0 0 10px 0;
	font:bold 11px/17px Arial, Helvetica, sans-serif;
	color:#974D04;
	background-color:inherit;
	text-transform:uppercase;
}
.News p {
	font:normal 12px/20px Arial, Helvetica, sans-serif;
	color:#F7F7EA;
	background-color:inherit;
	padding:0 0 13px 0;
}
.News p span {
	font:bold 12px/20px Arial, Helvetica, sans-serif;
	color:#2C2C1B;
	background-color:inherit;
	text-decoration:underline;
	display:block;
}
.Member {
	width:225px;
	float:Right;
}
.Member div#Login {
	display:block;
	background:url(images/member_login_bg.gif) 0 0 no-repeat;
	width:205px;
	height:31px;
	padding:0 0 0 20px;
	font:bold 16px/31px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:inherit;
}
.Member form {
	width:191px;
	background:url(images/member_form_bg.gif) 0 0 repeat-x #353535;
	padding:9px 17px 24px 17px;
	color:#fff;
}
.Member form label {
	font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
	float:left; 
	display:block;
}
.Member form input.txtBox {
	width:185px;
	height:19px;
	border-left:#808080 solid 1px;
	border-top:#808080 solid 1px;
	border-Right:#D4D0C8 solid 1px;
	border-bottom:#D4D0C8 solid 1px;
	color:#000;
	background-color:#fff;
	margin:0;
	padding:0;
	float:left;
}
.Member form a {
	background:url(images/register_member_icon.gif) 0 0 no-repeat;
	padding:0 0 0 20px;
	font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#9CCC37;
	background-color:#353535;
	text-decoration:underline;
	float:left;
	margin:15px 0 0 0;
	width:130px;
}
.Member form a:hover {
	text-decoration:none;
}
.Member form input.go {
	background:url(images/btn_go.gif) 0 0 no-repeat;
	width:36px;
	height:15px;
	border:none;
	cursor:pointer;
	float:Right;
	margin:15px 0 0 0;
}

/*****************************************************************************************
/  FOOTER
/*****************************************************************************************/

.Footer ul {
	width:587px;
	position:absolute;
	left:11px;
	top:27px;
}
.Footer ul li {
	float:left;
	color:#D4D4C6;
	background-color:inherit;
	font:normal 11px/19px Arial, Helvetica, sans-serif;
}
.Footer ul li a {
	color:#D4D4C6;
	background-color:inherit;
	font:normal 11px/19px Arial, Helvetica, sans-serif;
	padding:0 7px;
	text-decoration:none;
}
.Footer ul li a:hover {
	color:#D4D4C6;
	background-color:#D76E08;
}
.Footer p.copyright {
	font:normal 11px/19px Arial, Helvetica, sans-serif;
	color:#d3d3d3;
	background-color:inherit;
	position:absolute;
	left:19px;
	top:23px;
}
.Footer a.subscribe {
	background:url(images/subscribe_icon.gif) 0 2px no-repeat;
	font:normal 11px/12px Arial, Helvetica, sans-serif;
	color:#B9B99D;
	background-color:inherit;
	position:absolute;
	left:19px;
	top:68px;
	text-decoration:underline;
	width:50px;
	padding:0 0 0 18px;
}
.Footer a.subscribe:hover {
	color:#9CCC37;
	background-color:inherit;
	text-decoration:none;
}
.Footer a.xht {
	width:98px;
	height:20px;
	background:url(images/xhtml_bg.gif) 0 0 no-repeat;
	position:absolute;
	left:757px;
	bottom:23px;
}
.Footer a.xht:hover {
	background:url(images/xhtml_bg_hover.gif) 0 0 no-repeat;
}
.Footer a.cs {
	width:98px;
	height:20px;
	background:url(images/css_bg.gif) 0 0 no-repeat;
	position:absolute;
	right:15;
	bottom:23px;
}
.Footer a.cs:hover {
	background:url(images/css_bg_hover.gif) 0 0 no-repeat;
}
.Footer img {
	position:absolute;
	left:840px;
	top:25px;
}
.Footer p.design {
	font:bold 12px/19px Arial, Helvetica, sans-serif;
	color:#C5BE25;
	background-color:inherit;
	position:absolute;
	left:19px;
	top:85px;
}
.Footer p.design a {
	color:#FFFFFF; background-color:inherit; text-decoration:none;
}
.Footer p.design a:hover {
	color:#C5BE25; background-color:inherit;
}