/* Mediagenic website CSS Document, Built by Mediagenic 2008 http://www.mediagenic.net */
/* @group Reset */
/* reset css styles individually instead of universal selector. */
/* based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border-left:0;
} 
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, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
strong {
	font-weight: bold;
	color: #AFBD21;
}
body {
	line-height: 1;
	font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;
	color:#000; 
	font-size: 13px; 
	text-align:center;/* for ie5.+*/
	background:#fff;
}
ol, ul {	list-style: none;}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
/* end reset styles */
/* clearing technique */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
 /* End hide */
/*........... do not change or amalgamate the above clearfix styles..................*/

/* a few defaults */
ul{list-style:none}
p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.7em}
a img,img{border:none;display:block;}
/* @end */

/* @group General */
a{cursor:pointer!important;text-decoration:none}
a:link{color:#3e5f7e}/* set link states as appropriate*/
a:visited{color:#3e5f7e}
a:hover{color:#afbd21; text-decoration: underline;}
a:active{color:#afbd21}
.bb a:link, .bb a:visited {
	color: #7DBFFE;
}
.gb a:link, .gb a:visited {
	color: #002B55;
}
select,input{font-family: Arial, Verdana, Helvetica, sans-serif}
h1,h2,h3,h4,h5,h6{font-weight:bold}
h1{	
	color:#000;
	font-size:182%;
}
h2{
	color:#000;
	font-size:167%;
}
h3,h4,h5{
	color:#000;
	font-size:124%;
}
.content ul li {
	background: url(../images/bullet.gif) 0 2px no-repeat;
	padding-left: 15px;
	font-size: 95%;
	padding-bottom: .6em;
} 
.content ul {
	margin-left: 20px;
}
.content ul.standard {
	width: 160px;
	margin: 2em 0 0 0;
	margin-left: 0;
	text-align: left;
}
.content ul.standard li {
	line-height: 1.3em;
}
.content ul.first {float: left;}
.content ul.second {float: right;}
.content ul.inline {
	text-align: center;
	font-weight: bold;
	margin-left: 0;
	margin-bottom: .4em;
}
.bb .content ul.standard li {
	background:transparent url(../images/bullet-standard-blue.gif) no-repeat scroll 0 3px;
}
.gb .content ul.standard li {
	background:transparent url(../images/bullet-standard-green.gif) no-repeat scroll 0 3px;
}
.content ul.inline {
	line-height: 1.3em;
}
.content ul.inline li {
	display: inline;
	background: url(../images/bullet.gif) 100% 3px no-repeat;
	padding: 0 15px 0 0;
	margin: 0 5px 0 0;
}
.gb .content ul.inline li {
	background-image: url(../images/bullet2.gif);
}
.content ul.inline li.last {
	background-image: none;
	padding-left: 0; padding-right: 0;
	clear: both;
}
dl.faq dt {
	color:#002b54;
	font-weight: bold;
	margin-bottom: 1em;
}
dl.faq dd {
	margin: 0;
}
dl.faq dt:hover {
	cursor: pointer;
	text-decoration: underline;
}
#notify #content {
	background: #fff;
}
#notify #content {
	background: #fff;
	width: 500px;
	margin: 30px auto 0 auto;
	padding: 20px;
	border: 2px solid #002B54;

}
#notify img#notify-logo {
	margin-bottom: 15px;
}
/* @end */
/* @group Main structure */
body{padding:13px 0;}
#outer{
	text-align:left;
	width:723px;
	margin:auto;
	padding:7px 0 0 0;
}
#outer{background:url(../images/main-top.gif) no-repeat 0 0}
/* @end */
/* @group Logo */
/* use h1 for logo on home page only  - use p element on other pages*/
h1#logo,p#logo{margin:0 0 14px 13px;}
h1#logo,
h1#logo a,
h1#logo em,
p#logo,
p#logo a,
p#logo em{
	width:227px;
	height:73px;
	display:block;
	position:relative;
	o\verflow:hidden;
}
h1#logo em,
p#logo em{
	background:url(../images/logo.jpg) no-repeat 0 0;
	position:absolute;
	left:0;
	top:0;
	cursor:pointer; 
}
/* @end */
/* @group Nav */
#nav{
	width:723px;
	margin:0;
	float:left;
	height:38px;
	clear:both;
	border-bottom:1px solid #afbd21;
	position:relative;
}
#nav li{
	list-style:none;
	width:76px;
	height:38px;
	margin:0 4px 0 14px;
	display:inline;
	float:left;
	position:relative;
}
#nav li span{position:absolute;top:-999em;}
#nav li a{
	width:76px;
	height:38px;
	float:left;
}
.bb #nav{	border-bottom:1px solid #002b54}
#nav li.home a,
#nav li.home{
	width:56px;
	height:25px;
	display:block;
	position:absolute;
}
#nav li.home a{left:0;top:0;z-index:99;}
#nav li.home{
	right:17px;
	top:-2px;
	background:url(../images/home-on.gif) no-repeat 0 0;
	z-index:1;
}
#nav li.home a:hover img{visibility:hidden}
#nav li.home a:hover{visibility:visible}


/* this is the default setting of tabs for the home page */
/* -38px will reveal a green tab and background-position:0 0 will reveal a blue tab*/
#home #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 0}
#home #nav li.services a{background:url(../images/services.jpg) no-repeat 0 -38px}
#home #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 0}
#home #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 -38px}

#home #outer #nav li ul {
	float: left;
	padding: 14px 0 0 0;
	margin: 0;
	position: absolute;
	width: 10em;
	left: -999em;
	background:url(../images/fake.gif) no-repeat;/* ie will lose focus unless you add this - use a 1px x 1px fully transparent gif*/
}
#home #outer #nav li:hover ul, #home #outer #nav li.sfhover ul {
	left: auto;
	top: 30px;
	padding-left: 7px;
	clear: both;
}
#home #outer #nav li ul li {
	height: 15px;
	padding: 0;
	margin: 0;
}
#home #outer #nav li ul li a {
	background: none;
	padding: 0;
	margin: 0;
	font-size: 80%;
	height: 15px;
	display: block;
	
}
#home #outer #nav li ul li.higher  {
	height: 25px;
}
/* end default tabs*/

/* hover for home tabs */
#home #nav li.about a:hover{background-position:0 -38px;}
#home #nav li.services a:hover{background-position:0 0;}
#home #nav li.portfolio a:hover{background-position:0 -38px;}
#home #nav li.contact a:hover{background-position:0 0;}
/*  end*/

/* this is the default setting of tabs for the about page */
/* add a body id for other pages like Our-services etc and follow this format */
/* -38px will reveal a green tab and background-position:0 0 will reveal a blue tab*/
#about #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 0}
#about #nav li.services a{background:url(../images/services.jpg) no-repeat 0 -38px}
#about #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 -38px}
#about #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 -38px}

#services #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 -38px}
#services #nav li.services a{background:url(../images/services.jpg) no-repeat 0 0}
#services #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 -38px}
#services #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 -38px}

#portfolio #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 -38px}
#portfolio #nav li.services a{background:url(../images/services.jpg) no-repeat 0 -38px}
#portfolio #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 0}
#portfolio #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 -38px}

#contact #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 -38px}
#contact #nav li.services a{background:url(../images/services.jpg) no-repeat 0 -38px}
#contact #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 -38px}
#contact #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 0}
/* end */

/* hover for about tabs */
#about #outer #nav li a:hover,
#services #outer #nav li a:hover,
#portfolio #outer #nav li a:hover,
#contact #outer #nav li a:hover{background-position:0 0}
/*  end*/

/* this is the default setting of tabs for a green page when the about tab is current */
/* -38px will reveal a green tab and background-position:0 0 will reveal a blue tab*/
body#about.gb #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 -38px!important}
body#about.gb #nav li.services a{background:url(../images/services.jpg) no-repeat 0 0!important}
body#about.gb #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 0!important}
body#about.gb #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 0!important}

body#services.gb #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 0!important}
body#services.gb #nav li.services a{background:url(../images/services.jpg) no-repeat 0 -38px!important}
body#services.gb #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 0!important}
body#services.gb #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 0!important}

body#portfolio.gb #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 0!important}
body#portfolio.gb #nav li.services a{background:url(../images/services.jpg) no-repeat 0 0!important}
body#portfolio.gb #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 -38px!important}
body#portfolio.gb #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 0!important}

body#contact.gb #nav li.about a{background:url(../images/about-us.jpg) no-repeat 0 0!important}
body#contact.gb #nav li.services a{background:url(../images/services.jpg) no-repeat 0 0!important}
body#contact.gb #nav li.portfolio a{background:url(../images/portfolio.jpg) no-repeat 0 0!important}
body#contact.gb #nav li.contact a{background:url(../images/contact.jpg) no-repeat 0 -38px!important}
/* end */

/* hover for about tabs */
.gb #outer #nav li a:hover{background-position:0 -38px!important;}
/*  end*/
/* @end */

/* @group Main section */
/* this will contain the main image swirl that changes on different pages according to the class (and ID) set in the body */
/* .wb = white background */
/* .bb = blue background */
/* .gb = green background */
#main{
	width:723px;
	min-height:420px;
	clear:both;
	padding-bottom: 10px;
}
#home #main{background:url(../images/home-swirl.gif) no-repeat 0 100%}
#about #main{background:url(../images/about-swirl.gif) no-repeat 0 100%}
#services #main{background:url(../images/services-swirl.gif) no-repeat 0 100%}
#portfolio #main{background:url(../images/portfolio-swirl.gif) no-repeat 0 100%}
#contact #main{background:url(../images/contact-swirl.gif) no-repeat 0 100%}

/*.bb #main{background:url(../images/blue-swirl.gif) no-repeat 0 100%!important}*//* blue background*/
/*.gb #main{background:url(../images/green-swirl.gif) no-repeat 0 100%!important}*//* green background*/
/* @end */

/* @group Subnav */
/* sub navigation on home page only */
ul#subnav {
	width:723px;
	margin:0;
	padding:0;
	position: relative;
	top: 5px;
}
ul#subnav ul {
	margin:0;
	}

ul#subnav li{
	margin:0 0 0 22px;
	float:left;
	display:inline;
	width:80px;
}
ul#subnav li.sub2{margin-left:14px;}
ul#subnav li.sub3{margin-left:13px;}
ul#subnav li.sub4{margin-left:11px}
ul#subnav li li{
	float:none;
	margin:0;
	font-size:77%;
	display:block;
	line-height:1.4em;
}
ul#subnav li a{
	color:#3e5f7e;
	padding:3px 0;
}
ul#subnav li li a:hover{color:#afbd21}
p.copyright{
	width:700px;
	margin: 5px auto 5px;
	background:url(../images/logo-icon.gif) no-repeat 8px 2px;
	padding:2px 0 2px 23px;
	color:#3e5f7e;
	font-size:85%;
	text-align:left;
}

/* ...........about us page ..............*/
#subnav2{
	margin:0 0 0 10px;
	padding:0;
	font-size: 85%;
	position: relative;
	top: 10px;
}
body#services #subnav2 {
	margin-left: 103px;
}
body#portfolio #subnav2 {
	margin-left: 200px;
}
body#contact #subnav2 {
	margin-left: 293px;
}
#subnav2 li{
	display:inline;
	border-right: 1px solid #fff;
	padding-right: 10px;
	margin-left: 5px;
}
#subnav2 li.last {
	border-right: none;
}
ul#subnav2 li a{
	color:#3e5f7e;
	padding:3px;
}
ul#subnav2 li  a:hover{color:#afbd21}
h1.dummy {position:absolute;top:-999em;margin:0}
/* @end */

/* @group Who are we page */
.bb ul#subnav2 li a,.bb ul#subnav2 li {color:#fff}
.bb ul#subnav2 li.current a{color:#afbd21}
.bb ul#subnav2 li  a:hover{color:#afbd21}
.content {
	padding:50px 0 0 18px;
	width:350px;
	text-align:justify;
	color:#fff;
}
.content h1{
	color:#afbd21;
	margin:0 0 4px 0;
	font-size:110%;
	line-height:1.2em
}

/* The above rule is no longer applied */

.content h1 {
	position: absolute;
	top: -999em;
}
.bb .content h1{color:#afbd21}
.gb .content h1{color:#002b54;}
.content h2 {font-size: 100%; margin-top: 1.5em;}
.bb .content h2{color:#afbd21}
.gb .content h2{color:#002b54;}
.content p{
	color:#fff;
	margin:0 0 15px 0;
	font-size:95%;
	line-height:1.35em;
}
#contact #feedback {
	width: 640px;
	float: left;
	clear: both;
	padding-top: 10px;
	margin-left: 15px;
	padding-right: 15px;
	}
/* @end */

/* @group Our Focus page */
.gb ul#subnav2 li a,.gb ul#subnav2 li {color:#fff}
.gb ul#subnav2 li.current a{color:#002b54}
.gb ul#subnav2 li a:hover{color:#002b54}
/* @end */



/* @group siFR */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
	visibility: visible !important;
}
.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}
/* @end */
#player {
	margin-left: 65px;
	width: 480px;
	height: 380px;
}