/* Reset all styles ********************** */
* { margin: 0; padding: 0; } 

hr {
display: none;
}

body {
background: #e6e6e6;
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #fff url(gfx/background_pattern01.gif);
}

p {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #000000;
}

a:link, a:visited, .hilite {
	color: #938500;
	text-decoration: none;
}

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

h1 {
font-family: Arial, sans-serif;
font-size: 18px;
color: #888;
f/ont-weight: bold;
margin: 10px 0px 20px 0px;
letter-spacing : -1px;
}

h2 {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
margin: 0px 0px 10px 0px;
}

div#quizArea {
margin: 20px 0px 0px 0px;
}

/* The main panels *********************************************************/
/* top, right, bottom, left */
/* In general, do not use width 100% with the combination of side padding */

div#page {
position: relative;
width: 940px; /* overall 960px */
margin: 20px auto;
padding: 10px 0px 10px 20px;
/* let's allow 10px buffer on the right so the child objects does not have to fit exactly. */
/* background: #cccccc url(gfx/card_background.gif) no-repeat top left; */
border: 1px solid #ccc; /* no need to account for the border size in width */
background: #fff;
}

div#masthead {
float: left;
width: 920px;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div#logo {
float: left;
width: 250px;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div#stage {
position: relative;
float: left;
width: 920px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
border-bottom: 5px solid #888;
border-top: 5px solid #888;
}

div#stage p {
margin: 0px 0px 10px 0px;
line-height: 18px;
}

div#breadCrumb {
float: left;
width: 920px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

div#resultGrid {
float: left;
width: 920px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 0px;
}

div#searchMember {
float: left;
width: 500px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
background: #e6e6e6;
}

div#searchMember p.error {
float: left;
color: #cc0000;
line-height: 20px;
margin: 0;
}

div#resultData {
clear: both;
float: left;
width: 500px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

div#newsColumn {
width: 420px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
float: left;
}

div#newsColumn p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 15px 0px;
line-height: 20px;
}

div#listColumn {
width: 450px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 10px;
float: right;
}

div#listColumn p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 16px;
}

div#listColumn p.surveyDescr {
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 12px;
font-size: 10px;
}

img.headerGif {
margin: 0px 0px 8px 0px;
padding: 0px 0px 0px 0px;
}
 
 
div#column1 {
float: left;
}

div#column2 {
float: right;
}

div#footer {
clear: both;
float: left;
width: 920px;
margin: 0px 0px 0px 0px;
line-height: 20px;
padding: 15px 0px 5px 0px;
}

p.footer {
font-size: 11px;
}

.date {
font-size: 10px;
color: #999;
}

.smallPrint {
font-size: 10px;
line-height: 10px;
}

.newLabel {
color: #ff0000;
font-weight: bold;
}

div#profileList {
display: block;
float: left;
width: 600px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

div#recentUsers {
display: block;
float: right;
width: 280px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid #ccc;
}


/* this is to force the anchor to be top of the image */
a.itemAnchor {
display: block;
width: 300px;
height: 1px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div.surveyItem1 {
display: block;
clear: both;
float: left;
width: 300px;
margin: 0px 10px 10px 0px;
padding: 9px 0px 0px 0px;
background: #e6e6e6;
text-align: center;
}

div.surveyItem2 {
display: block;
float: left;
width: 300px;
margin: 0px 0px 10px 0px;
padding: 9px 0px 0px 0px;
background: #e6e6e6;
text-align: center;
}

div.surveyItem3 {
display: block;
float: right;
width: 300px;
margin: 0px 0px 10px 0px;
padding: 9px 0px 0px 0px;
background: #e6e6e6;
text-align: center;
}

div.imageHolder {
display: block;
width: 300px;
height: 280px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #e6e6e6;
}

div.surveyItemText {
display: block;
width: 900px;
margin: 0px 0px 10px 0px;
padding: 9px 9px 0px 9px;
background: #fff;
text-align: left;
border: 1px solid #ccc;
}

div#quizArea div.surveyItemText p {
width: 560px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 15px 0px;
line-height: 20px;
}

div.rating {
display: block;
float: right;
width: 300px;
height: 50px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
background: #e6e6e6 url(gfx/rating_bar.gif) no-repeat top left;
}

input.ratingRadio {
margin: 0px 2px 0px 2px;
padding: 0px 0px 0px 0px;
color: transparent;
background-color: transparent;
border: 0px;
vertical-align: middle;
}

label.ratingLabel, label.ratingLabel {
font-family: Verdana, Arial, sans-serif;
display: block;
height: 15px;
margin: 0px 0px 0px 0px;
padding: 3px 0px 5px 0px;
font-size: 11px;
color: #666;
line-height: 16px;
}

div#submitArea {
display: block;
clear: both;
float: left;
width: 900px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
background: #e6e6e6;
}


div#fullPageArticle {
position: relative;
width: 500px; /* overall 960px */
margin: 0px 0px 0px 0px;
padding: 0px 420px 10px 0px;
background: #fff;
}

div#fullPageArticle img {
position: absolute;
left: 520px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 5px solid #e6e6e6;
}

div#goBack {
clear: both;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div.message {
width: 500px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
background: #ffccff;
}

/* Main navigation bar ********************************************************************************/

div#navBar {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div#navBar ul {
margin: 0;
padding: 0;
list-style: none;
}

div#navBar li {
display: block; 
float: left;
text-align: left;
/* width: 205px; */
color: #000;
border: 0;
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
div#navBar li a:visited {color: #938500; text-decoration: none}
div#navBar li a:link {color: #938500; text-decoration: none}
div#navBar li a:hover {color: #938500; text-decoration: underline}

div#navBar li.selected {
background: #aeaeae;
}

div#navBar li.selected a {
color: #ffffff;
}
div#navBar li.selected a:visited {color: #ffffff;}
div#navBar li.selected a:link {color: #ffffff;}
div#navBar li.selected a:hover {color: #ffffff;}

div#navBar li a {
}

div#navBar li a:hover {
}

div#navBar li#first {
}

div#navBar li#last {
}

div#loginStatus {
float: right;
clear: right;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

p.loginStatus {
font-size: 11px;
color: #999;
}

/* ********************************************************************************/

div#listColumn ul {
margin: 0;
padding: 0;
list-style: none;
}

div#listColumn li {
text-align: left;
color: #000;
border: 0;
margin: 0px 0px 0px 17px;
padding: 5px 0px 5px 0px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
list-style: disc;
}

/* ********************************************************************************/

#popup {
position: fixed;
top: 0px;
left: -100%;
width: 100%;
height: 100%;
z-index: 100;
background-image: url(gfx/dim80.png);
text-align: center;
}

* html #popup {
background-color: #000000;
back\ground-color: transparent;
background-image: url(gfx/shim.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gfx/dim80.png", sizingMethod="scale");
}

#popup.on {
left: 0;
}

#popupContent {
margin: 20px auto;
text-align: center;
}

#popupContent img {
margin: 0 auto;
display: block;
border: 1px solid #fff;
cursor: pointer;
}

img.popupImage {
cursor: pointer;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px;
}

p.closeLink {
color: #fff;
margin: 10px 0px 0px 0px;
cursor: pointer;
}


li {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #333;
line-height: 16px;
margin: 5px 0px 5px 15px;
padding: 0;
list-style: disc;
}

li li {
list-style: circle;
margin: 5px 0px 5px 20px;
}

div.thumbResult {
float: left;
display: block;
width: 110px;
text-align: center;
margin: 0px 20px 20px 0px;
padding: 0px 0px 0px 0px;
background: #e6e6e6;
}

div.textResult {
display: block;
width: 900px;
margin: 0px 0px 10px 0px;
padding: 10px 9px 10px 9px;
background: #fff;
border: 1px solid #ccc;
}

div.resultBar {
position: relative;
float: left;
display: block;
width: 110px;
height: 48px;
background: #e6e6e6 url(gfx/thumb_background.gif) no-repeat bottom left;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

img.thumb {
margin: 5px auto;
cursor: pointer;
}

div.thumbHolder {
display: block;
width: 110px;
height: 100px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div.sampleText {
width: 780px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

div#stage div.resultBar p.thumbNumber {
position: absolute;
left: 50px;
top: 2px;
font-size: 10px;
color: #666;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 10px;
}

div#agreeScale {
position: relative;
display: block;
width: 416px;
height: 48px;
background: #fff url(gfx/agree_scale_back.gif) no-repeat top left;
margin: 0px 0px 10px 0px;
}


/* forms ************************************/

div.formGroup {
width: 440px;
padding: 10px 0px 10px 10px;
margin: 10px 0px 10px 0px;
background: #e6e6e6;
}

div.formItem {
padding: 5px 0px 5px 0px;
/* background: #aaa; */
}

input {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid #333333;
color: #000;
background: #fff;
}

label.register {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-align: right;
color: #000;
display: block;
width: 125px;
float: left;
padding: 4px 5px 0px 0px;
margin: 0px 0px 0px 0px;
}

label#searchLabel {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
display: block;
text-align: left;
color: #000;
float: left;
padding: 3px 0px 0px 0px;
margin: 0px 0px 0px 0px;
/* width is set by the parent selector "label" */
}

input#searchField {
display: block;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
border: 1px solid #333333;
color: #000;
background: #fff;
width: 100px; /* trim for padding and borders */
float: left;
}

input#searchButton {
display: block;
cursor: pointer;
padding: 2px 2px 2px 2px;
margin: 0px 10px 0px 10px;
color: #ccc;
background: #666;
border-top: 1px solid #bbb;
border-left: 1px solid #bbb;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
float: left;
}


/* for some reason, for the paragraph margins and line-height to work, you need the nearest parent select with an ID. In this case is div#column2. */
div#column2 p.formNote {
font-size: 11px;
color: #333;
line-height: 17px;
margin: 0px 10px 0px 0px;
}

input.formButton {
display: block;
cursor: pointer;
padding: 3px 10px 3px 10px;
margin: 0px 0px 0px 130px;
color: #ccc;
background: #666;
border-top: 1px solid #bbb;
border-left: 1px solid #bbb;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}

input.button {
display: block;
width: 70px;
cursor: pointer;
padding: 3px;
margin: 0px 0px 0px 0px;
color: #ccc;
background: #666;
border-top: 1px solid #bbb;
border-left: 1px solid #bbb;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
float: right;
}

input.default {
width: 286px; /* trim for padding and borders */
padding: 3px;
vertical-align: middle;
}

input.number {
width: 50px; /* trim for padding and borders */
padding: 3px;
vertical-align: middle;
}

select {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 2px;
color: #000;
background: #fff;
border: 1px solid #333333;
width: 294px; /* trim for padding and borders */
float: left;
}

select.on {
border: 1px solid #333333;
color: #000;
}

select.off {
border: 1px solid #eee;
color: #eee;
background: #eee;
}

textarea {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
border: 1px solid #333333;
color: #000;
background: #fff;
margin: 0px 0px 0px 0px;
width: 292px; /* trim for padding and borders */
height: 400px;
float: left;
}

input.checkYN {
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
color: transparent;
background: transparent;
}

p.radioLabel {
float: left;
padding: 1px 10px 0px 5px;
}

input.radio {
float: left;
margin: 0px 0px 0px 0px;
padding: 0;
border: 0;
color: transparent;
b/ackground: #333;
background: transparent;
height: 22px;
}

p.errStr {
color: #cc0000;
}

/*
P.I.E. FLOAT CLEARING
See http://www.positioniseverything.net/easyclearing.html 

DYSKE:
Use this on the container block, not in the content block.
You can apply multiple classes to an element by separating them with a space.
E.g. class="clearfix anotherClass"
clearfix must come first.
*/

.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}

.clearfix {
display: inline-block; /* Fixes IE/Mac */
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */