@charset "utf-8";
/* CSS Document */

html, body {
    margin: 0; 
    padding: 0;     
    color: #444;    
    font-family: verdana,​helvetica,​arial,​sans-serif;   
    height:100%;
}

h1, h2, h3, h4 {
    font-family: verdana,​helvetica,​arial,​sans-serif;
    padding: 0;
    font-weight: normal;
}
h1 {
    font-size: 2em;
    color: #777;
    margin: 0 0 20px 0;
    line-height:28px;
}

#header {
    display: inline;  
    background-color: #00AEC7

}

#feedback {
	color:#FFF;
	font-weight:bold;
        font-size: 1.5em;
        position: fixed;
        top: 20px;
        width:90%;
        left: 5%;
        background-color: #00AEC7;
        line-height: 50px;
        padding: 5px;
        display: none;
}
#menu {    
    display: inline;
    position: relative;    
}

#nav {
    width:100%;
    height: 50px;
    background-color: #00AEC7;
    text-align: center;
}

#nav-links {
    margin-left: auto;
    margin-right: auto;
    min-width: 970px;
    max-width: 80%;
}

#nav ul {
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    list-style: none;
    list-style-position: outside;
    float: left;
    display: inline;
    text-align: center
}

#nav li {
    float: left;
    padding: 0px 6px;
    display: inline;
    border-right: 2px #333 solid;
}

#nav li:last-child {
    border-right: none;
}

#nav li a {
    color: #333;
    font-weight: bold;
    text-decoration: none;    
    float: left;
    display: inline;
    height: 25px;
}


#nav-second {
    background-color: #444;
    height: 30px;
}

#logo {                
    margin-left: auto;
    margin-right: auto;
    min-width: 970px;
    max-width: 80%;
    height: 80px;
}

#content {
    min-width: 970px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background: #fff;
    clear: both;
    min-height: 560px;    
}

#contentBody {
    //margin: 10px;    
    display: inline;
    /*background: url(../../images/rightColumnBg.png) repeat-y right;*/
    /*width: 940px;*/
    padding: 0 0 10px 10px;
}

.questionnaire {    
    margin-left:auto;
    margin-right:auto;
}

.group {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#000;
    margin-left:5px;
    margin-right:5px;
    position:relative;
}

.groupHeading {
    padding-bottom:10px;
}

.inactiveGroup {
    z-index:-1;
}

.activeGroup {
    z-index:1;
}

.questions{
    overflow:auto;
    min-height:305px;
    max-height:600px;
    padding-bottom:5px;
}

.question {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#000;
    font-weight:normal;
    border-bottom: thin solid #c3d2e7;
    min-height:25px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.questionText {
    /*	float:left;*/
}

.questionControls {
    clear:both;
    float:right;
    margin-right:50px;
}

.multiquestion {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#000;
    font-weight:normal;
    min-height:20px;
    margin-left:10px;
    padding: 5px;
}

.multiquestion:nth-child(odd) {
    background-color: #f1f1f1;
}

.multiquestionText {

}

.multiquestionControls {
    float:right;
    margin-right:50px;
}

.status {
    height:40px;
    background-color: #00AEC7;    
    padding:10px;
    color:#fff;    
    font-weight: bold;
}

.na-controls{
    background-color: #00AEC7;    
    padding:10px;
    color:#fff;    
    font-weight: bold;
}

#footer {
    clear: both;
    height: 200px;
    //background: #7488CE url(../images/footerBg.jpg) repeat-x top;
    background-color: #00AEC7;
    color: #222;
    font-weight: bold;
    text-align: right;
    padding-top: 10px;
    padding-right: 20%;
}

#data {
	max-width:550px;
        min-width: 500px;
        max-height:400px;
	overflow:auto;
}

/* Tab control styles */
ul.tabs { 
    list-style:none; 
    margin:0 !important; 
    padding:0;	
    border-bottom:1px solid #666;	
    height:40px;
}

/* single tab */
ul.tabs li { 
    float:left;	 
    text-indent:0;
    padding:0;
    margin:0 !important;
    list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
    //background: url(../images/tabsbg.png) no-repeat -420px -81px;
    font-size:1em;
    display:block;
    height: 40px;  
    line-height:40px;
    width: 175px;
    text-align:center;	
    text-decoration:none;
    color:#333;
    padding:0px;
    margin:0px;	
    position:relative;
    top:1px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: height .4s ease-in-out;
    -webkit-transition: height .4s ease-in-out;
    -moz-transition: height .4s ease-in-out;
}

ul.tabs a:active {
    outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
    background-position: -420px -41px;	
    background-color: #666;
    color:#fff;	
    min-width: 175px;    
    height: auto;    
    overflow:visible;
    position: relative;
    z-index: 1000;    
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    background-position: -420px -0px;		
    background-color: #00AEC7;
    cursor:default !important; 
    color:#fff !important;
    font-weight:bold;  
    width: 175px;
    padding-left: 0;
    padding-right: 0;
}

.panes {
    float:none;
    clear:both;    
    border-top: none;
    padding-top:5px;
    min-height:400px
}


th{        
    height:30px;
    text-align:left;    
    font-size:small;
}