/**
 * Main CSS File
 *
 * Uses 960GS Framework with 24 Columns, 
 * overwrites here the sizes and handles main positioning and design of all elements. 
 *
 * @copyright  2010 BitConstructor Co. Ltd.
 * @version    $Id: global.css 221 2011-03-02 06:18:09Z nuttaphat $
 * @since      File available since Release 0.1
 */ 
 
/* STANDARD declarations */

/* define main background and font */
body {
     background: #FFF;
}

/* main text color */
body, input, select {
     font-family: sans-serif;
     color:#000;     
}

/* changing default margin */
p {
     margin-bottom: 10px;     
}
p.small{
	font-size:85%;
}
/* form element style*/ 
input, select {
     border: 1px solid #000;
     background-color: #FFF;
     width: 160px;
}

 textarea {
    border: 1px solid #000;
    background-color: #FFF;
    width: 240px;
    height: 80px;
}
#feedback textarea {
    border: 1px solid #000;
    background-color: #FFF;
    width: 480px;
    height: 120px;
}
#customemails input[type="text"]{
	width:640px;
}
#customemails input[type="submit"]{
	width:160px;
}
#customemails textarea {
    border: 1px solid #000;
    background-color: #FFF;
    width: 640px;
    height: 120px;
}
/* wider select field for 2px */
select, .fieldwidth {
     width: 162px;
}

/* reset radio and checkbox size */
input[type="radio"], input[type="checkbox"] {
     width: 1em;   
}

/* all buttons are bold */
input[type="submit"], .next-button {
    border: 1px solid black;
     background: #AAA;
     color: #FFFFFF;
     cursor: pointer;
     font-size: 12px;
     font-weight: bold;
     padding: 3px 0;
     width: 162px;
}

input#save {
    position: relative;
    left: 556px;
    margin-top:10px;
}

.center_form {
    width: 380px;
}

/*input#severity-2,#severity-3,#severity-4,#severity-5,#severity-6 {
    margin-left: 379px;
}*/
/* link button - imitates style of input button*/
#linkbutton  {
	 border: 1px solid black;
     background: #AAA;
     color: #FFFFFF;
	 text-align:center;
     cursor: pointer;
     font-size: 12px;
     font-weight: bold;
     padding: 3px 0;
     width: 162px;

}
/* default hr style */
hr {
     height: 1px;
     border: none;
     margin: 3px 0px;
     font-size: 18px;
}
hr.fullwidth {
     height: 2px;
	 width: 100%;
     border:thick;
	 border-color:#cccccc;
	 border-bottom-style:double;
     margin: 3px 0px;
}
/* heading 2 default */
h2 {
    /*font-size: 16px;*/
    margin-bottom: 10px;
    margin-left: 214px;
}
/* heading 2 left align */
h2.leftalign {
    /*font-size: 16px;*/
    margin-left: 0px;
}

/* main font size */
h3 {
     font-size: 14px;
}

h4 {
    font-size:14px;
	color:#006600;
}
sub {
	position: relative;
	top: 0.3em;
	font-size: 0.8em;
}
/* stretch table */
table {
     width: 100%;
}

/* padding for all data */
table th, table td {
    padding: 2px 0px;
}

/* td top border */
table td {
     /*border-top: 1px solid #000;*/
}

/* table header default */
th {
     text-align: left;     
     font-size: 13px;
     font-weight: bold;
}

/* border for last table row */
table tr:last-child td {
     /*border-bottom: 1px solid #000;*/
}

/* std links */
a {
     text-decoration: none;
     color: #00F;
	 
}

a:hover {
    color: #00F;
    text-decoration: none;
}
/* link buttons */
a.button {
     border: 1px solid #000;
     background: #AAA;
     text-align: center;
     display: block;
     color: #FFF;
     text-decoration: none;
     font-weight: bold;
	 width:auto;
}
a.button:hover{
     border: 1px solid #000;
     background: #666;
     text-align: center;
     display: block;
     color: #FFF;
     text-decoration: none;
     font-weight: bold;
	 width:auto;
}

a.noframe{
	outline:none;
}
/* remove margins */
.nomargin {
     margin: 0px;
}

/* margins left */
.marginleftS {
     margin-left: 7px;
}

.marginleftM {
     margin-left: 25px;
}

/* TODO remove class or comment properly */
.paddingtop {
     padding-top: 20px;
}

/* border top */
.bordertop {
     border-top: 1px solid #000;
}

/* border bottom*/
.borderbottom {
     border-bottom: 1px solid #000;
}

/* break line */
.break {
     clear: both;
}

/* float right */
.floatright {
    float: right;
}

/* float left */
.floatleft {
    float: left;
}

/* 100% width */
.expandwidth {
     width: 100% !important;
}

/* force block */
.block {
     display: block;
}

/* small bottom margin (before page bottom) */
.marginbottomS {
     margin-bottom: 1em;
}
/* large bottom margin */
.marginbottomL {
    margin-bottom: 2em;
}

/* align content right */
.right {
     text-align: right;
}

/* align content left */
.left {
     text-align: left;
     line-height:30px;
}
/* align content center */
.center {
    text-align: center;
}

/* bold text */
.bold {
     font-weight: bold;
}

/* minimum height */
.minheight {
     min-height: 560px;
}
/* hide/unhide text */
.hidden { display: none; }
.unhidden { display: block; }

/* CONTAINERS */

/* Main Container, reset to left align, width to 1024px */
.container_24 {
     margin: 0px 0px 0px 0px;
     width: 1024px;
}

/* Left column, size definition */
.container_24 .grid_6 {
     width: 200px;
     margin: 40px 0px 0px;
     text-align: center;
     padding-top: 5px;
	 border-right:1px dotted #aaa;
}

/* main content, size definition */
.container_24 .grid_18 {
     width: 775px;
     margin: 0px;
	 padding-left:20px;
}
/* main content, size definition */
.container_24 .grid_15 {
     width: 580px;
     margin: 0px;
	 padding-left:20px;
}

.menuleft{
	padding-left:10px;
}
/* Clear Width and Height */
.clearwidth {     
     width: 0px;
}
.clearheight {
     height: 0px;     
}

/* FORM design */
.zend_form {
     margin-bottom: 0px;     
     width: 730px;
    margin-left: 40px;
}
.login-box .zend_form,
.register-box .zend_form,
.activate-box .zend_form 
.disclaimer-box .zend_form,{
    margin-left: 0px;
}
/* form error message */
.errors {
    margin-bottom: 0px; 
    /*width: 730px;*/
    /*margin-left: 40px;*/
}
.errors li {
    display: inline;
    position: absolute;
    margin-left: 0px;
    background-color: #FFF;
    border: 1px solid #F00;
    border-top: 5px solid #F00;
    padding: 3px;
    line-height: 13px;
    width: 154px;
}
#edit .errors li {
    margin-left: 3px;
}
/* PAGE SPECIFIC DESIGNS */
.marginRightS {
     margin-right: 10px;
}
.marginLeftM {
     margin-left: 40px;
}

/* set display none */
.displayNone {
     display: none;
}
.confirmation-msg {
    color: #3C6;
}
#edit dt {
     clear: both;
     float: left;
     height: 20px;
     vertical-align: middle;
     width: 60%;
}
#edit dd {
    padding: 5px;
    border-bottom: 1px solid #CCCCCC;
    width: 97%;
}
#edit input[type="checkbox"] {
    border: 0px;
}
#edit input[type="radio"] {
    border: 0px;
}
#edit input[type="text"] {
    margin-left: 3px;
}
#edit select {
    margin-left: 3px;
}
#edit label {
    padding-left: 5px;
}
dt#email-label {
    clear: none;
    float: none;
}
dt#password-label {
    clear: none;
    float: none;
}
dt#login-label {
    display: none;
}
dt#forgotten-element-label {
    display: none;
}
dd#email-element {
    border-bottom: medium none;
    padding: 0px;
}
dd#password-element {
    border-bottom: medium none;
    padding: 0px;
}
dd#login-element {
    border-bottom: medium none;
    padding: 0px;
}

/* footer */
div#footer {
    clear: both;
    padding-top: 20px;
}

/* header */
div#header {
	margin-left:0px;
	margin-top: 0px;
}
div#loginRegister {
    position:absolute;
    top:0px;
	margin-left:780px;
	margin-top:5px;
	margin-bottom:10px;
    padding:0;
	width:200px;
}
div#buttonLeft {
    margin-left:0px;
	margin-top:5px;
	margin-bottom:10px;
    padding:0;
	width:200px;
}
div#mainContainer {
    margin: 0 auto;
    width: 990px;
    position: relative;
}

fieldset.fieldgroup {
     margin-bottom: 0.5em;
     display: block;
     clear: both;
}
 
fieldset.fieldgroup legend {
    width: 96.5%;
    margin-bottom: 0.1em;
    padding: 0.5em;
    float: left;
    /* jquery ui ui-widget-header */
    border: 1px solid #CCC; 
    color: #222222; 
    font-weight: bold; 
    background-color:#EEE;
}

fieldset#fieldset-last {
    width: 100%;
}
/* side menu styles */
/* left menu bottom margin */
ul.left {
  margin-bottom: 40px;
}

ul {
    list-style: none;
}

li {
    margin-right: 10px;
    border-bottom: 1px solid #778899;
}

ul.sub {  
    margin-bottom:0px;
}
li.sub {  /* format second level menu  */
    margin-left:20px;
	border-bottom:1px dashed #778899;
	font-size:90%;
}
/* side menu styles */

ul.normal{
	list-style:disc;
	}
li.normal {
    margin-left: 40px;
    border:none;
}
ul.normalsub{
	list-style:circle;
	margin-bottom:0px;
	}
li.normalsub {
    margin-left: 80px;
    border:none;
}
#edit dt {
    padding-top: 8px;
    vertical-align: middle;
}
#edit dd * {
    vertical-align: middle;
}
#edit dd * {
    vertical-align: middle;
}
#edit dd img {
    padding-left: 5px;
}
.showstatistic {
    float: left;
}
a#showstatistic {
    float: left;
    margin-left:0px;
}
#statisticdetail {
    float: left; 
    width: 470px; 
    padding-left: 0px;
}
/* register/edit account */
#captcha-input {
    display: block;
}
/* account list */
#list_result {
    width: 765px;
}
/* activate page */
#activate_table {
    width: 50%;
}
#chk_activate-label {
    float: left;
}
/* piechart title*/
.chart-country {
    float: left; 
    width: 525px; 
}
.chart-div {
    float: left; 
    width: 555px; 
}
.jqplot-title {
    text-align: left !important;
    font-size: 13px !important; 
}
.jqplot-series-shadowCanvas, .jqplot-grid-canvas {
    display: none !important;
}
/*piechart legend*/
table.jqplot-table-legend {
    width: 300px;
    border-spacing: 0px;
}
td.jqplot-table-legend {
     font-size: 11px;
    padding: 0px 0px 0px 5px;
}
td.jqplot-table-legend > div {
    border: 0;
}
/*piechart field table legend*/
table.legend {
    margin-bottom: 0px;
    width: 300px;
    padding: 0px;
    border-spacing: 0px;
}
table.legend td{
    padding-top: 0px;
    padding-bottom: 0px;
}
/*piechart number legend*/
table.legend td.number {
    text-align: right;
    width: 25px;
}
/*piechart text legend*/
table.legend td.text {
     padding-left: 5px;
    text-align: left;
    width: 180px;
}
/*piechart % total legend*/
table.legend td.total {
    text-align: right;
    width: 80px;
    padding-right: 5px;
}
table.legend tr:last-child td {
    border: 0;
}
table.legend td {
    border: 0;
}
.jqplot-table-legend-swatch {
    margin: auto;
}
/* Left column, size definition */
.container_24 .grid_6statistic {
    width: 220px;
    margin-top: 0px;
    text-align: left;
}
.statistic-menu {
    /*border-bottom: 1px solid #778899;*/
}
.statistic_grid1 {
    width: 215px;
    margin: 0px;
}
.statistic_grid2 {
    width: 370px;
    margin: 0px;
}
table.statistic {
    margin-bottom: 0px;
    border-bottom: 0px;
    border-top: 0px;
}
td.statistictd {
    border-bottom: none;
    border-top: none;
    padding-right: 20px;
}
table tr:last-child td.statistictd {
    border-bottom: none;
}
.statistic_country {
    padding-left: 10px;
}
.zend_form fieldset legend:hover {
    cursor: pointer;
}
fieldset.fieldgroup dt {
    display: none;
}
fieldset.fieldgroup dd {
    display: none;
}
dt#placeincident-label, dt#placeincident-label > label {
    cursor: pointer;
}
dd#placeincident-element, dt#place_otherinfo-label, dd#place_otherinfo-element, dt#next3-label, dd#next3-element  {
    display: none;
}

dt#severity-label, dt#severity-label > label {
    cursor: pointer;
}
dd#severity-element {
    display: none;
}
/*Right align for the next buttons*/
dd#next1-element {
    text-align: right;
}
dd#next2-element {
    text-align: right;
}
dd#next3-element {
    text-align: right;
}
dd#next4-element {
    text-align: right;
}
dd#next5-element {
    text-align: right;
}
dd#next6-element {
    text-align: right;
}
dd#next7-element {
    text-align: right;
}
dd#next8-element {
    text-align: right;
}
/*Next button's class*/
.btn-next {
    font-size: 11px;
}

form dl fieldset#fieldset-generalinformation {
    padding-top: 8px;
}

dt#placeincident-label {
     background-color: #EEEEEE;
     border: 1px solid #CCCCCC;
     color: #222222;
     float: left;
     font-weight: bold;
     margin-bottom: 0.5em;
     padding: 0.2em;
     width: 97.6%;
}

dd#placeincident-element input {
     left: 493px;
    position: relative;
}
dd#placeincident-element {
     border: none;
	 padding-top:32px;
}

dd#placeincident-element label{
     position:relative;
     border-bottom:1px solid #CCCCCC;
     display:block;
     padding-bottom:5px;
     padding-left:5px;
     right:5px;
     top:7px;
     width:714px;
     margin-bottom:7px;
}
dd#placeincident-element label input {
     position: absolute;
     left:435px;
}
dd#placeincident-element br {
     display: none;
}

dt#severity-label {
     background-color: #EEEEEE;
     border: 1px solid #CCCCCC;
     color: #222222;
     float: left;
     font-weight: bold;
     margin-bottom: 0.1em;
     padding: 0.2em;
     width: 97.6%;
}

dd#severity-element input {
     left: 493px;
    position: relative;
}

dd#severity-element {
     border: none;
	 padding-top:32px;
}

dd#severity-element label{
     position:relative;
     border-bottom:1px solid #CCCCCC;
     display:block;
     padding-bottom:5px;
     padding-left:5px;
     right:5px;
     top:7px;
     width:714px;
     margin-bottom:7px;
}
dd#severity-element label input {
     position: absolute;
     left:435px;
}
dd#severity-element br {
     display: none;
}
.confirmation {
     margin: 100px;
     text-decoration: underline;
}
.contact-title {
    width: 10%;
    font-weight: bold;
}
.training-title {
    width: 10%;
    font-weight: bold;
}
#language {     
     width: 775px;
	 position: absolute;
     top: 124px;
}
#language ul {
     float: right;
     padding-right: 10px;
}
#language ul li {
     display: inline;
     border-bottom: none;
     padding: 0px;
     margin: 1px;
}

#sponsor {
     text-align: left !important;
}
#sponsor span {
     display: block;
     margin-bottom: 2px;
}
#sponsor ul li {
     border: none !important;
}
.company_th {
    width: 180px;    
}
#hover_span
 {
 font-size: 12pt;
 }

#hover_span:hover
 {
 cursor: crosshair;
 background:#CC00FF;
 }
