h1, h2, h3, p, span, a 
{
    margin:0;
    padding:0;
    color:inherit;
}

body {
    /*background:url('images/bluebgstrip.gif') repeat-x;*/
    background:#ffffff;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #666666;
	letter-spacing:2px;
}

#wrapper {
	width: 88%;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
    min-width:960px;
}
          
*html .IEminwidth
{
    border-left:solid 960px white;
    height:1px;
}
    
*html .IEminwidthcorrector
{
    position:relative;
    margin-left:-960px;
    height:1px;
}

*html .IEtopcorrector
{
    margin-top:-85px;
}


 *html #RateFace .IEtopcorrector
{
    margin-top:-85px;
    width:100%;
    margin-right:125px;
}

#header  
{   background: url('images/bodylab.png') no-repeat;
    background-position:center;
	text-align: right; /* this overrides the text-align: center on the body element. */
	margin:0px;
	margin-top:-10px;
	padding:5px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    height:150px;
    width:100%;
    border:none;
    float:right;
} 

#mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}

#contentLeft
{
    width: 75%;
    padding: 5px 5px 5px 5px;
    float:left;
}

#home #contentLeft
{
    width:62%;
    padding:5px 20px 5px 25px;
    float:left;
    border:solid 0px;
}

#info #contentLeft
{
    margin-left:0px;
    float:left;
    padding-left:0px;
    width:20%;
    min-width:220px;
    height:500px;
    border-right:solid 1px gray;
}

#home #contentRight
{
    width:30%;
    padding:5px;
    float:right;
    margin-top:30px;
    margin-right:20px;
    border:solid 0px;
}

#contentRight
{
    width:20%;
    min-width:170px;
    float:right;
    padding: 0px 5px 0px 5px;
    margin:5px 0px 5px 0px;
    border-left:solid 1px gray;
}

#info #contentRight
{
    width:75%;
    float:right;
    text-align:left; 
    border-left: 0px;
}

#contentBottom
{
    clear:both;
    width:100%;
    min-width:960px;
    padding:5px 2px 5px 2px;
}
 
.ModelBox
{
    text-align: center;
    vertical-align:middle;
    margin: 30px auto 5px;
    padding:0px;
    min-width:800px;
    background:transparent;
    /*background:url('images/beetlefaded.png') no-repeat bottom;*/
    border:0px solid black;
}

.ModelImage
{
    width:72%;
    /*height:500px;*/
    border:1px solid black;
    vertical-align:bottom;
}

.ModelImageSmall
{
    width:65%;
    vertical-align:bottom;
}

 #UserInfo
 {
     text-align:left;
 }
 
#footer, #home #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	margin:20px auto 0px auto;
    width:70%;
} 

#home #footer 
{margin:40px 20px 0px auto;
	float:right;
}

#footer p, #home #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 2px 0 2px 10px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-size:10px;
	text-align:center;
    color:#999999;
	margin:0px auto;
	width:100%;
}

#UserInfo_nj
{
    text-align:left;
}

#UserInfo_nj p
{
    padding:4px;
}

h1,#home h1
{
    font-family: Century Gothic;
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0px 30px 30px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font-size:1.8em;
	font-weight:lighter;
	color:#000000;
	text-align:left;
}

#home h1
{
    font-size:2em;
	font-weight:bold;
	padding: 10px;
}

#experiments h2, #info h2 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font-size:1em;
	font-weight:bold;
	color:#000000;
	text-align:left;
}

.transparentBandBorder
{
    background:transparent;
    width:95%;
    border:solid 1px #999999;
    height:35px;
}

.transparentBand
{
    background:#999999;
    width:100%;
    height:35px;
    text-align:center;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter:alpha(opacity=30);
    opacity:0.3;
}

.generalContent
{
    text-align:left;
    padding:2px;
    font-size:1em;
    letter-spacing:2px;
}

#experiments
{
    width:100%;
}

#experiments .generalContent, #info .generalContent
{
    width:90%;
    text-align:left;
    padding:20px 40px 30px 40px;
}

#experiments .generalContent p, #info .generalContent p
{
    width:90%;
    padding:10px;
    text-align:justify;
    color:#000000;
}

#experiments .sampleImage
{
    width:300px;
    border:solid 1px black;
    padding:2px;
    margin:4px;
}

/*UserInfo*/
    
.Instruction
{
    width: 75%;
    margin: 20px 0px 20px 2px;
    color:#333333;
}

#RateModel .Instruction
{
    width:100%;
    margin:0px;
    text-align:left;
}

.DividerImage
{
    padding-left:0px;
    padding-right:5px;
}

.Divider, .DividerBlack
{
    background:url('images/hrdividerline.gif') repeat-x;
    background-position:center;
    width:100%;
    height:10px;
    text-align:left;
    text-indent:0px;
    margin-top:5px;
}

.DividerBlack
{
    background:url('images/hrdividerlineblack.gif') repeat-x;
    height:2px;
    margin:10px 0px 10px 0px;
}

.SectionText, h1, h2, h3
{
    text-indent: 10px;
    text-align:left;
    color: Black;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    vertical-align: top;
}

.SectionTextInfo
{
    text-indent: 5px;
    text-align:left;
    color:#000000;
    font-weight:normal;
    padding:0px;
    vertical-align:top;
    border:none;
    letter-spacing:2px;
    width:350px;
    font-size:12px;
}

.Section
{
    margin:10px 0px 20px 0px;
    font-size: 12px;
    color:#333333;
    display:block;
    text-align:left;
}

.SectionContent
{
    margin:20px 0px 20px 30px;
    
}

.SectionContentItem
{
    width:200px;
    margin:20px;
    display:inline;
    font-size:11px;
    vertical-align:top;
    letter-spacing:2px;
    text-align:left;
}


.SectionMap
{
    margin:20px 0px 20px 0px;
    font-size: 11px;
    color:#333333;
    display:block;
    text-align:center;
}

.SymbolsInfo
{
    margin-top:3px;
    color:#333333;
}

.SymbolsImage
{
    width:104px;
    height:104px;
    margin:1px 1px 1px 1px;
}


.SymbolsImage img:hover /*a.SymbolsImage:Hover*/
{
    cursor:pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    opacity:0.7;
    }


.userInfo, .Error
{    
    background:inherit;
    font-size: 11px;
    display:block;
    width:95%;
    margin: 5px 0px 10px 0px;
    border:0px;
}

.UserInfoEntry, .UserInfoEntryFilled, .UserLogin
{
    display:block;
    font-family: Calibri;
    font-size: 12px;
    color: #808080;
    text-align: left;
    text-indent: 2px;
    letter-spacing: 2px;
    border: 1px solid #C0C0C0;
    margin-right: 1px;
    margin-bottom: 2px;
    margin-left: 1px;
    width: 160px;
    height: 16px;
    background-color:White;
}

.UserInfoEntryFilled
{
    font-weight:bold;
    color:#000000;
    z-index:-1;
}

.UserInfoTick, .UserInfoTickHide
{
    display:inline;
    visibility:visible;
    width:16px;
    margin-top:-24px;
    margin-right:42px;
    float:right;
    position:relative;
    z-index:500;
}

.UserInfoTickHide
{
    visibility:hidden;
}


.ImageMapMap, .ImageMapMapInvisible

{
    width:790px;
    min-width:790px;
    margin:0 auto;
    border:solid 1px #999999;
    visibility:visible;
}

/* Green button styles*/
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}


 .greenbutton, .graybutton150, .greenbutton150 {
    background: transparent no-repeat scroll top right;
    color: #ffffff;
    display: block;
    float: left;
    font: 12px century gothic, sans-serif;
    font-weight:400;
    height: 24px;
    margin-right: 0px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    text-align:center;
    outline:none;
    cursor:pointer;
}

.greenbutton, .graybutton150, .greenbutton150 {
    background: transparent url('images/colourbutton.png') no-repeat scroll top right;
    display: block;
    line-height: 14px;
    padding: 5px 0px 5px 0px;
    border:0px;
    margin:0px;
    margin-left:2px;
    text-align:center;
    outline:none;
    cursor:pointer;
}   
 
#RateModel .greenbutton 
{
    margin-left:35px;
}


/*a.agreenbutton:active, a.agraybutton:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox 
}*/

.graybutton150 {background: transparent  url('images/button150gray.png') no-repeat;
                color:#666666;}
.greenbutton150 {background: transparent url('images/colourbutton150.png') no-repeat;}


.greenbutton:hover, .graybutton150:hover, .greenbutton150:hover 
{
    cursor:pointer;
}

.greenbutton:active, .graybutton150:active, .greenbutton150:active {
    background-position:  bottom left ;
    padding: 6px 0 4px 0px; /* push text down 1px */
    text-decoration:none;
    outline:none;
}


#home p
{
    text-align:justify;
    color:#050505;
    padding:10px 5px 0px 5px;
    width:97%;
    font-size:12px;
}

#home #imgHeader
{
    background:#a9d3e3;
    /*background:#bffb4a;*/
    border:solid 1px #555;
    border-bottom:0px;
    width:593px;
    height:22px;
    vertical-align:bottom;
    color:#000000;
    font-family:Century Gothic;
    font-size:1.2em;
    font-weight:normal;
    letter-spacing:2em;
    text-align:center;
}

#home .themes
{
    position:fixed;
    bottom:10px;
    right:10px;
    text-align:right;
}

#home .logos, #info .logos
{
    clear:both;
    position:fixed;
    bottom:12px;
    left:20px;
    text-align:left;
}
 .logos a img
 {
     border:0px;
 }
 
 #home img 
  {
      width:98px;
      height:98px;
      margin:0;
      border:0;
  }      
      
        
  #test1_1, #test1_2, #test1_3, #test1_4, #test1_5, #test1_6, 
  #test2_1, #test2_2, #test2_3, #test2_4, #test2_5, #test2_6, 
  #test3_1, #test3_2, #test3_3, #test3_4, #test3_5, #test3_6, 
  #test4_1, #test4_2, #test4_3, #test4_4, #test4_5, #test4_6
   {
    margin: 0;
    width: 98px;
    height: 98px;
    border: 1px solid #555;
  }   
    
    
  #test1_1:hover, #test1_2:hover, #test1_3:hover, #test1_4:hover, #test1_5:hover, #test1_6:hover, 
  #test2_1:hover, #test2_2:hover, #test2_3:hover, #test2_4:hover, #test2_5:hover, #test2_6:hover, 
  #test3_1:hover, #test3_2:hover, #test3_3:hover, #test3_4:hover, #test3_5:hover, #test3_6:hover, 
  #test4_1:hover, #test4_2:hover, #test4_3:hover, #test4_4:hover, #test4_5:hover, #test4_6:hover
  {
    outline:white 1px ridge;     
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter:alpha(opacity=60);
    opacity:0.6;
  }
  
  #test1_2, #test2_2, #test3_2, #test4_2 {
    margin: -100px 0px 0px 99px;
  }  
  #test1_3, #test2_3, #test3_3, #test4_3 {
    margin: -100px 0px 0px 198px;
  }
  #test1_4, #test2_4, #test3_4, #test4_4 {
    margin: -100px 0px 0px 297px;
  }
  #test1_5, #test2_5, #test3_5, #test4_5 {
    margin: -100px 0px 0px 396px;
  }
  #test1_6, #test2_6, #test3_6, #test4_6 {
    margin: -100px 0px 0px 495px;
  }
   
  #test2_1, #test3_1, #test4_1
  {
      margin-top:-1px;
  }
  
 
 .hoverLink
    {
        margin-bottom:30px;
        margin-top:30px;
        border:0px solid;
        text-align:left;
        width:100%;
    } 
   
    .hoverLink div
    {
        visibility: hidden;
        background:#559ebd;
        border:solid 1px #3e7085;
        color:white;
        width:550px;
        padding:10px;
        position:absolute;
        margin-top:-60px;
        margin-left:-520px;
        font-size:1em;
        letter-spacing:2px;
        text-align:center;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
        filter:alpha(opacity=90);
        opacity:0.9;
    }
    
    #home p
    {
        color:White;
    }
    
    #info a
    {color:#666666;}
    
    .buttonInfo, #info .buttonInfo
    {
        display:block;
        font-size:1.2em;
        letter-spacing:2px;
        /*margin-top:40px;*/
        margin-left:15px;
        width:95%;
        height:42px;
        color:#000000;
        background:#ffffff;
        border:1px outset #000000;
    }
    
    #info .buttonInfo
    {
        background:#bbd6e6;
        border:solid 1px #3e79b1;
        width:340px;
    }
    
     .buttonInfo:hover, #info .buttonInfo:hover
    {
        border:1px solid #559ebd;
        background:#bde1ef;
        /*background:#cae8f4;*/
    }
    
    
    .hoverLink:hover div
    {
        visibility:visible;
    }
    
    
    /*Info*/

    #info .buttonInfoLinks, #info .buttonInfoLinksHeader
    {    
        display:block;
        width:90%;
        text-align:left;
        padding:8px;
        margin-top:6px;
        margin-right:2px;
        color:#000000;
        background:#bbd6e6;
        border:solid 1px #3e79b1;
        text-decoration:none; 
        }
        
    #info .buttonInfoLinksHeader
    {border:none;height:11px;padding-top:3px;width:95%;}    

    #info .buttonInfoLinks:hover
    {
        color:#333333;
        border:1px solid #559ebd;
        background:#bde1ef;
    }

    
 .statshoverLink
    {
        margin-bottom:30px;
        margin-top:30px;
        border:0px solid;
        text-align:left;
        width:270px;
    }    
   
    .statshoverLink div
    {
        visibility: hidden;
        background:#559ebd;
        border:solid 1px #3e7085;
        color:white;
        padding:10px;
        position:absolute;
        margin-top:-150px;
        margin-left:250px;
        font-size:1em;
        letter-spacing:2px;
        text-align:left;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
        filter:alpha(opacity=90);
        opacity:0.9;
    }
    
    .statsbuttonInfo
    {
        display:block;
        font-size:1.2em;
        letter-spacing:2px;
        /*margin-top:40px;*/
        margin-left:15px;
        color:#000000;
        background:#ffffff;
        border:1px solid #000000;
    }
    
    
    .statshoverLink:hover div
    {
        visibility:visible;
    }
    
    .Hidden
    {
        visibility:hidden;
    }
    
       
    #RateFace .options 
    {
        padding:2px;
        display:inline;
        font-size:12px;
        color:#333333;
    }
    
    #RateFace table.options td label
    {
        vertical-align:top;
    }
    
    #RateFace .FaceBox
    {
        margin-top:20px;
        margin-bottom:25px;
    }
    
    #RateFace .FaceImage
    {
        width:15%;
    }
    
  .listoptions
  {text-align:left;color:Black;font-weight:bold;
  }
  
  .listoptions .col1, .listoptions .col2, .listoptions .col3, .listoptions .col4
  {
      border:solid 1px gray;
  }
   
    .col1{
      margin:2px 5px 5px 10px;
   padding: 0px 0px 0px 0px;
   overflow: hidden;
   float: left;
   position: relative;
   width:22%;
}
.col2{
      margin:2px 5px 5px 10px;
   padding: 0px 0px 0px 0px;
   overflow: hidden;
   float: left;
   position: relative;
   width:22%;
}
.col3{
      margin:2px 5px 5px 10px;
   padding: 0px 0px 0px 0px;
   overflow: hidden;
   float: left;
   position: relative;
   width:22%;
}
.col4{
      margin:2px 5px 5px 10px;
   padding: 0px 0px 0px 0px;
   overflow: hidden;
   float: left;
   position: relative;
   width:22%;
}