/* CSS Document */

body {
    margin: 0 90px;
    /* height: 500px;
    border: 1px solid #000; */
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 0.6em;
    background-color: #eee;
}

#content {
    height: 760px;
    background-color: #353f74; 
    border: 1px solid #000;
    width: 100%;
}

span, label {
    /* background-color: #eee; */
    color: #eee;
}

.inactive {
    border: 1px dashed #999;
}

.hidden {
    display: none;
}

.step.newline {
    clear: left;
}

.step {
    float: left;
    width: 50px;
    height: 50px;
    border: 0;
    text-indent: -9000px;
    position: relative;
    top: 100px; 
}



.step.inactive {
    background-image: url(./img/step-inactive.png);
}

.step.active {
    background-image: url(./img/step-active.png);
}

input.active, textarea.active {
    border: 1px solid #000;    
}

input.inactive, textarea.inactive {
    border: 1px dashed #999;
}

.actblock, .stats {
    border: 1px solid #353f64;
    float: left;
    background-color: #353f64;
    width: 22%;
    height: 200px;    
    padding: 20px 5px;
    margin: 5px;
}

.actblock {
    text-align: center;
}

* html .actblock, * html .stats { /* for IE6 */ 
    width: 20%;
}

.actblock.right {
    /* background-color: #fee; */
    clear: right;
}

.actblock.middle {
    /* background-color: #efe; */
}

.actblock.left {
    /* background-color: #eef; */
    /* clear: left; */ /* left is already cleared by .step.newline */
}

/* .span.newline + .actblock.left {
    clear: none; // left is already cleared by .step.newline 
} */

.actblock.centered, .stats.centered {
    /* background-color: #fef; */
    clear: both;
    width: 100%;
    height: auto;
}

.actblock.prepared {
    border: 1px dashed #656f80;
}

.actblock.active {
    border: 1px solid #959Fc0;
}

.actblock.inactive {
    border: 1px dashed #959Fc0;    
}

.actblock span, .actblock label {
    display: block;
    width: 100%; 
    padding: 10px 0;  
}

.stats.centered {
    width: 98%;
}

.actblock input[type=text], .actblock textarea {
    width: 80%;
}

.actblock input[type=text], .actblock input[type=submit], .actblock textarea {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 1em;
}

.prepared *, .prepared span, .prepared label {
    display: none;
    border: 1px dashed #eee;
}

.actblock.inactive span, .actblock.inactive label {
    color: #333;
}

/* input[type=submit].inactive {
    border: 1px dashed #999;
} */

#banner {
    background-color: #353f64;
    width: 100%;
    border: 2px groove #000;
    position: relative;
    left: -1px;
}

#pageLoadingStatus, #dataLoadingStatus {
    background-color: #fff;
    /* background-image: url('./img/blue_gradient30x1.gif'); */
    background-repeat: repeat-y;
}

#pageLoadingStatus {
    border-bottom: 0; 
} 

#tables {	
    height: auto;
    width: 100%;
    border: 1px solid #000;
}

#tables table {
    float: left;
}

#number-act {
    margin-left: 55px;
    text-align: center;
} 

* html #number-act { /* for IE6 */
    margin-left: 30px;
}

input#lepro-number, input#group-name {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 2em;
    width: 70%;
    /* text-align: center; */
}

#system-block img, #system-block span {
    display: block;
    border: 1px solid #000;
    border-bottom: 0;
    width: 100%;
    text-align: center;     
}

#system-block span.hidden {
    display: none;
}

#system-block img {
    height: 5px;
}

#system-block span {
    padding: 2px 0;
    color: #eee;
    font-weight: bold;
}

.actblock#modes-switch, .stats#tables {
    padding: 20px 0;
    margin: 0;
}

#errOutput {
    text-transform: capitalize;
    background-color: #c00;
}

#infoOutput {
    background-color: #353f64;
    height: 12px;
    border: 0;
}

.username {
    font-weight: bold;
}

.username-unknown {
    font-weight: bold;
    color: #999;
}

#copyright {
	clear: both;
    display: block;
    border: 1px solid #000;
    width: 100%;
    text-align: right;
    background-color: #353f64;
    color: #ccc; 
}

#copyright a {
    color: #eee;
}

#enter-act-2 span {
    padding: 0;
    color: #999;
}

#enter-act-2 label {
    padding: 0;
}

#captcha {
    display: block;
    height: 30px;
    position: relative;
    left: 24%;
    width: 51%;
}

#captcha.enlarged {
    height: 60px;
    left: 0;
    z-index: 2;
    width: 100%;
}

#enter-err-result.error, #approve-err-result.error, #confirm-err-result.error {
    background-color: #a72a2a;
    border: 2px solid #352929;
}

#user-info, #group-info {
    color: #ddd;
}

#user-info strong, #group-info strong {
    color: #999;
}

input[type=text].invalid, input[type=password].invalid {
    border: 1px dashed #a72a2a;
}

img#loading-process {
    position: fixed;
    top: 0;
    left: 0;
    margin: 8px;
    padding: 10px;    
    border: 1px dashed #000;
    background-color: #ddd;    
}

/* textarea#card-code, textarea#card-scode {
    background-color: #a7acbc;
    color: #eee;
    font-family: Courier New, monospace;
    font-size: 1em;
} */

#card-code, #card-scode {
    background-color: #a7acbc;
    color: #000;
    /* color: #eee;
    font-family: Courier New, monospace;
    font-size: 0.8em; */
    padding: 5px;
    overflow: auto;
}

#score-label {
    padding-left: 20px;
    width: 80%;
}

#score-num {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 4em;
    margin-top: 30px;
    margin-left: 10px;
    padding: 10px;
    width: 80%;
    color: #959fc0;
}

.actblock.inactive #score-num {
    color: #333;
}

#approve-act-1 {
    padding: 5px 5px 40px;
}

#approve-act-1 label[for=card-code] {
    padding-top: 0;
    padding-bottom: 5px;
}

#approve-act-1 span {
    padding: 5px 0;
}

input#code-entered {
    margin: 5px;
}

input#reenter-gname {
    display: block;
    position: relative;
    top: 70px;
    left: 31%;
}

#letters-code-label {
    padding: 0;
}

a#rules-link {
    border: 1px dashed #000; 
    padding: 10px; 
    position: fixed;
    right: 10px; 
    top: 10px;     
    text-decoration: none; 
    background-color: #ddd; 
    color: #336; 
}

a#stats-link {
    border: 1px dashed #000; 
    padding: 10px 2px; 
    position: fixed;
    right: 10px; 
    top: 50px;     
    text-decoration: none; 
    background-color: #ddd; 
    color: #336;	
}

/* TODO: move to stats.css */

#tables #user-groups {
    width: 71%;
}

#tables #all-groups {
    clear: both;
}

#info-form {
    /* float: right; */
    float: left;
    width: 25%;
    background-color: #99c;
    border: 1px dashed #000;
    padding: 5px;
    color: #336;
    text-align: center;
    margin-bottom: 10px;
    margin-left: 5px;
    /* visibility: hidden; */
}

#info-form input {
    margin: 0;
}

#info-form label {
    color: #336;
}

#info-form input {
    border: 1px solid #000;
}

img#info-type-img {
    margin: 10px;
}

#info-content {
    /* background-color: #aae; */
    background-color: #88a;
    margin-bottom: 5px;
    overflow: hidden;
    padding: 10px;
}

#info-content .field {
	overflow-x: hidden;
}

#info-content .field .label {
	font-weight: bold;
	/* color: #ddd; */
	color: #fff;
}

#info-content .field .value {
	color: #333;
}

div#info-type-radios, table#info-type-radios {
    background-color: #aae;
    margin: 10px;
    position: relative;
    left: 20%;
}

#info-type-radios input[type=radio] {
    margin: 5px;
}

#refresh-span {
	color: #fff;
	background-color: #696;
	border: 1px dashed #fff;
	cursor: pointer;
	font-weight: bold;
	position: relative;
	top: -10px;
    left: 47%;	
	margin: 5px;
	padding: 5px;
}