body, html
{
padding: 0;
margin: 0;
border: 0;


color: #FFFFFF;
font-size: 100%;
font-family: Arial, Helvetica, Sans-Serif;
background-color: #000000;
background-image:none;
background-repeat:no-repeat;
background-position:top left;
height: 100%;
}

img {
	border-style:none;
}

#main
{
width: 780px;
margin: 0 auto;
background-color: #000;
}

* html #main
{
height: 100%; /*** IE does not support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

#outer
{
margin-right: 210px;	/*** The width and the color for our right column ***/ 
}

#inner
{
width: 100%;
padding-bottom: 100px;	/* for footer */
}

#floatWrap
{
float: left;
padding-left: 20px;
background-color: #000;
}

/*
Right column
...................................................................
*/
#right
{
float: right; 
width: 210px;
padding: 0;
margin-right: -210px; /** This negative margin-right value is the width of the right column + the padding. ***/
background-color: #000;
}

* html #right
{
position: relative;  /*** IE needs this  ***/
}

#right a
{
	color: #fff;
	text-decoration: none;
}

#right a:hover
{
	color: #fff;
	text-decoration: underline;
}

#openlogo {
	background-image:url(../images/OpenSurveyLogo.gif);
	background-repeat:no-repeat;
	width:265px;
	height:70px;
}

/*
Left column
...................................................................
*/
#left
{
float: left;
/*width: 50%;*/
width: 265px;
margin: 0;
background-color: #000;
}

#left p
{
	margin: 0 0 12px 0;
}

#left a
{
	color: #fff;
	text-decoration: none;
}

#left a:hover
{
	color: #fff;
	text-decoration: underline;
}


#otpslogo {
	background-image:url(../images/OTPSLiteLogo.gif);
	background-repeat:no-repeat;
	width:265px;
	height:70px;
}

/*
Middle column
...................................................................
*/

#middle
{
/*margin-left: 50%;*/
margin-left: 285px;	/* width of left plus some arbitary space */
background-color: #000;
}

#middle p
{
	margin: 0 0 12px 0;
}

#middle a
{
	color: #fff;
	text-decoration: none;
}

#middle a:hover
{
	color: #fff;
	text-decoration: underline;
}

.clear { clear: both; }

/*
Banner
*/
#banner
{
background-color: #000;
height:auto;
}

* html #banner
{
height: 190px;
}

/*
Footer
*/
#footerOuter
{
height: 100px; /*** The drawback with this solution is that the height of the footer can not be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you do not set overflow to hidden ***/
margin-top: -100px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
text-align: center;
background-color: #000;
}

#footerInner
{
	width: 740px;	/* width minus padding */
	background-color: #000;
	margin: 0 auto;
	padding: 10px 20px 0 20px;
}



/* right box */
		
.boxWrap
{
margin: 0 20px 0 20px;
position:relative;
}
		
.boxTop
{
background: url(../images/boxtopgold.gif) repeat;
background-repeat:no-repeat;
background-position:bottom;
height: 5px;
}
		
.boxMiddle
{
border-left: solid 1px #d95411;
border-right: solid 1px #d95411;
background-color: #000;
color: #FFF;
}
		
.boxBottom
{
background: url(../images/boxbottomgold.gif);
background-repeat:no-repeat;
height: 5px;
}
		
.boxTop img, .boxBottom img
{
display: block;
width: 5px;
height: 5px;
}
		
/* grey (solid) box */

.greyBoxTopNav
{
background: url(../images/nav_top.gif);
background-repeat:no-repeat;
background-position:bottom;
height: 5px;
}
			
.greyBoxTopFooter
{
background: url(../images/footer_top.gif);
background-repeat:no-repeat;
background-position:bottom;
height: 5px;
}
		
.greyBoxMiddle
{
background-color: #333;
}
	
.greyBoxBottomNav
{
background: url(../images/nav_btm.gif);
background-repeat:no-repeat;
background-position:top;
height: 5px;
}
	
.greyBoxBottomFooter
{
background: url(../images/footer_btm.gif);
background-repeat:no-repeat;
background-position:top;
height: 5px;
}
		
.greyBoxTop img, .greyBoxBottom img
{
display: block;
width: 5px;
height: 5px;
}

/* silver box */
			
.silverBoxWrap
{
margin: 0 40px 0 50px;
}
		
.silverBoxTop
{
background: url(../images/boxtopsilver.gif);
background-repeat:no-repeat;
background-position:bottom;
height: 5px;
width:167px;
}
		
.silverBoxMiddle
{
border-left: solid 1px #999999;
border-right: solid 1px #999999;
color: #fff;
width:165px;
}
		
.silverBoxBottom
{
background: url(../images/boxbottomsilver.gif);
background-repeat:no-repeat;
background-position:top;
height: 5px;
width:167px;
}
		
.silverBoxTop img, .boxBottom img
{
display: block;
width: 5px;
height: 5px;
}
		
/* box */
		
.boxContent
{
padding: 10px;
}
		
.boxContent h1
{
margin: 0 0 10px 0;
font-size: 100%;
font-weight: normal;
}
		
.boxContent p
{
margin: 0 0 10px 0;
font-size: 70%;
}		
		
/* nav bar */
		
.navBarContent
{
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding: 3px 8px 3px 8px;
text-align:center;
font-size: 75%;
}
		
.navBarContent a
{
color: #fff;
text-decoration: none;
margin: 0 8px 0 8px;
}
		
.navBarContent a:hover
{
text-decoration: underline;
}
		
/* footer bar */
		
.footerBarContent
{
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding: 3px 8px 3px 8px;
text-align:center;
font-size: 70%;
}
		
.footerBarContent a
{
color: #fff;
text-decoration: none;
}
		
.footerBarContent a:hover
{
text-decoration: underline;
}
		
.footerLinks
{
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding: 6px 0 6px 0;
font-size: 70%;
}

.footerLinks a
{
color: #fff;
text-decoration: none;
}
		
.footerLinks a:hover
{
text-decoration: underline;
}
		
#contentTopWrap
{
padding: 50px 0 10px 20px;
width: 550px;
float: left; /* IE needs this */
}
		
#contentTop
{
}
		
#contentTop p
{
margin: 0 0 10px 0;
color: #009999;
font-size: 85%;
}

#contentTop h1
{
margin: 10px 0 10px 0;
font-size: 120%;
font-weight: normal;
color: #009999;	
}

#contentDisclaimer p
{
font-size: 70%;
margin: 0 0 20px 0;
color: #fff;
}

#contentBody p
{
font-size: 75%;
margin: 0 0 20px 0;
color: #fff;
}

#contentBody a
{
color: #fff;
text-decoration: none;
}
		
#contentBody a:hover
{
text-decoration: underline;
}

/* contact form */

.contactFields
{
background-color: #000;
color: #fff;
border: solid 1px silver;
width: 100%;
}

#logoWrap
{
float: right;
padding: 60px 0 0 0;
width: 210px;
height: 142px;
text-align: center;
background-image:url(../images/Logo.gif);
background-repeat:no-repeat;
background-position:center;
}

#logoWrap img
{
width: 150px;
height: 142px;
border-width: 0;
}

ins
{
text-decoration: none;
}

#flashcontent img
{
border-width: 0;
}


/* blog */

#contentblog {
	margin: 0px;
	color: #fff;
}

.entrydate {
	color:#333333;
	font-size:65%;
	border-bottom:1px #333333 solid;
	text-align:right;
	text-transform:uppercase;
}

.entryheader {
	font-size:115%;
	border-bottom:1px #009999 dotted;
}

.entry {
	font-size:75%;
	padding-bottom:10px;
	border-bottom:1px #999999 dotted;
}


.entryfooter {
	font-size:60%;
	margin-bottom:35px;
	height:25px;
	border-bottom: 1px #999999 dotted;
}

.entryfooter a {
	text-decoration:none;
	color:#FFFFFF;
}

.entryfooter a:hover {
	background-color:#009999;
}

.name {
	float:left;
	font-size:75%;
	font-size:60%;
}


.date {
	float:right;
	font-size:60%;
}
	
.comment {
	border-bottom:1px #333333 solid;
	padding-top:5px;
	padding-bottom:15px;
	height:auto;
	clear:right;
	font-size:75%;
}

.blogback {
	color:#009999;
	font-size:90%;
	padding-bottom:10px;
}

.blogback a {
	color:#009999;
	text-decoration:none;
}

.blogback a:hover {
	color:#009999;
	text-decoration:underline;
}

#bloggraphic {
	width:170px; 
	height:100px; 
	padding-left:10px;
	border:none;
	position:relative;
	background-image:none;
	background-repeat:no-repeat;
	margin-left:10px;
	margin-top:15px;
	margin-bottom:15px;
}

.readour {
	padding-top:12px;
	font-size:80%;
	text-transform:uppercase;
}

.blog {
	font-size:200%;
	text-transform:uppercase;
}

.blog a span {
	color:#FFFFFF;
}

/* style switch */

#styleswitch {
	float:right;
	margin-bottom:10px;
}

#styleswitch p {
	margin:0px;
}

#styleswitch img {
	padding:2px;
}

/* RSS */

#rss {
	margin-left:22px;
	margin-top:10px;
	background-image:url(../images/rss_icon.gif);
	background-repeat:no-repeat;
	background-position:left;
	height:30px;
}

#rss a {
	text-decoration:none;
	color:#EB6C05;
}

#rss a:hover {
	text-decoration:underline;
	color:#EB6C05;
}

.rss_text {
	font-size:70%;
	color:#EB6C05;
	position:relative;
	left:25px;
	width: 181px;
	height: 32px;
}

.rss_icon {
	padding-right:10px;
	padding-top:5px;
}

/* MOBILE */

#mobile {
	margin-left:22px;
	margin-top:10px;
	background-image:url(../images/mobile_icon.gif);
	background-repeat:no-repeat;
	background-position:left;
	height:32px;
}

#mobile a {
	text-decoration:none;
	color:#06BE06;
}

#mobile a:hover {
	text-decoration:underline;
	color:#06BE06;
}

.mobile_text {
	font-size:70%;
	color:#06BE06;
	position:relative;
	left:25px;
	width: 181px;
	height: 32px;
}

.mobile_icon {
	padding-right:10px;
	padding-top:5px;
}

.hide {
	display:none;
}