﻿BODY
{
    font-family: Roboto, Arial, Verdana, Helvetica, sans-serif;
    font-size: 0.8em;
    border-width: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    COLOR: #454545; 
    height: 100%;
    background-color:  #262a2d;
}

INPUT
{
    FONT-SIZE: 0.9em;    
}

input[type=button]
{
    -webkit-appearance: none;
}

TEXTAREA
{
    FONT-SIZE: 0.9em
}

H1 {
    MARGIN: 0px;    
}


IMG
{
    BORDER-BOTTOM: 0px;
    BORDER-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    BORDER-TOP: 0px;
    BORDER-RIGHT: 0px;
    PADDING-TOP: 0px
}
FORM
{
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px
}

A
{
    COLOR: #2981c0;
    FONT-WEIGHT: bold;
    TEXT-DECORATION: none
}
A:link
{
    COLOR: #2981c0;    
}
A:visited
{
    COLOR: #2981c0;    
}



A:hover
{
    TEXT-DECORATION: underline
}
A:active
{
    TEXT-DECORATION: underline
}
Q
{
    FONT-STYLE: italic
}
HR.sectionDivider
{
    BORDER-BOTTOM: 0px;
    BORDER-LEFT: 0px;
    BACKGROUND-COLOR: #e0dbdb;
    MARGIN: 10px 0px;
    HEIGHT: 1px;
    COLOR: #e0dbdb;
    BORDER-TOP: 0px;
    BORDER-RIGHT: 0px
}
DIV.clearer
{
    CLEAR: both
}

div.note {
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 0.8em;
}


/***************************************
 Form Inputs                               
****************************************/
div.formInstructions {
    text-align: center;
    padding: 2em;    
}

fieldset
{
    border: 0;
    padding: 0;
    text-align: left;
    margin: 0;    
}

fieldset div.formElement
{
    clear: both;
    margin-bottom: 5px;
    position: relative;
}
    
/* force container to have height */
fieldset div.formElement:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

fieldset div.formElement label
{
    padding: 0.5em;
    width: 25%;
    display: block;
    MARGIN-RIGHT: 1%;
    TEXT-ALIGN: right;
    float: left;
}

fieldset div.formElement select,
fieldset div.formElement input[type=text],
fieldset div.formElement input[type=password],
fieldset div.formElement textarea {
    width: 65%;        
    box-sizing: border-box;    
}

fieldset div.formElement select {
    color: #6a6f73;
    background-color: #f2f3f7;
    border: 1px solid #b6c0c1;
    border-radius: 2px;
    padding: 0.3em;
}

fieldset div.formElement input[type=text],
fieldset div.formElement input[type=password],
fieldset div.formElement textarea {
    padding: 0.5em;
    border: 1px solid #b6c0c1;
    border-radius: 2px;
    vertical-align: middle;
    float: left;
}

/* hide the actual checkbox */
fieldset div.formElement input[type=checkbox] { 
    display:none; 
} 

fieldset div.formElement input[type=checkbox] + label {
    padding: 5px 0 0 0;    
    font-size: 1.2em;
    text-align: left;
}

fieldset div.formElement input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 3px;    
    content: "\2610"; /* IE*/
    content: "\f096"; 
    color: #b6bdc3;
}

/* change icon for checked icon */
fieldset div.formElement input[type=checkbox]:checked + label:before { 
    content: "\2611"; /* IE*/
    content: "\f14a"; 
    color: #43a7e3;
} 


fieldset div.formElement div.note {
    text-align: right;
    font-size: 0.8em;
    float: left;
}



@media all and (max-width: 768px) {
    fieldset div.formElement label {        
        width: 80%; 
        text-align: left;
        padding-left: 0;
        padding-bottom: 0;
        float: none;
    }

    fieldset div.formElement select,
    fieldset div.formElement input[type=text],
    fieldset div.formElement input[type=password],
    fieldset div.formElement textarea {
        float: none;
        width: 80%;
    }
}

@media only screen and (max-width: 750px) { 
    select.isSafari, 
    input[type="text"].isSafari { 
        font-size: 16px !important; 
    } 
    input[type="radio"] { max-height: 13px;} 
    input[type="checkbox"] { max-height: 15px;} 

}


/***************************************
 Standard Tables
****************************************/
table.core
{
    WIDTH: 100%;
    BORDER-COLLAPSE: collapse;
}

table.core tr
{
    border-bottom: 1px solid #f4f4f4;
}

table.core tr.highlight {
    background-color: #ffe7c3;
}

table.core tr.footer {
    background-color: #f2f3f7;
}

table.core th
{
    background-color: #798a94;
    color: white;
    font-weight: bold;    
}

table.core th.highlight {
    background-color: #a5b2ba;
}

table.core th,
table.core td
{
    padding: 10px;
    text-align: center;
}

table.core td.highlight {
    background-color: #e8ecef;
}


table.core .text
{
    text-align: left;
}

table.core .number
{
    text-align: right;
}

table.core .label
{
    text-align: right;
    font-weight: bold;
}

/***************************************
 Responsive Tables
****************************************/
.responsiveTableContainer {
    position: relative;   
}

.responsiveTableScrollableContainer {
    overflow: auto;    
}


.responsiveTableContainer table {
    border-collapse: collapse;
    empty-cells: show;
    table-layout: auto;
}

.responsiveTableContainer table tr {
      
}

.responsiveTableContainer table th,
.responsiveTableContainer table td {
    vertical-align: top;
    min-height: 32px;
    height: 32px;      
}

.responsiveTableContainer.lockCol table th:first-child,
.responsiveTableContainer.lockCol table td:first-child {
    position: absolute;    
    left: 0;
    overflow: hidden;    
}

/* Some pre-set widths for locked columns
    Note: width is locked column plus padding on cells */
.responsiveTableContainer.lockCol.colSmall .responsiveTableScrollableContainer {
    margin-left: 60px;    
}
.responsiveTableContainer.lockCol.colSmall table th:first-child,
.responsiveTableContainer.lockCol.colSmall table td:first-child {
    width: 40px;    
}

.responsiveTableContainer.lockCol.colMedium  .responsiveTableScrollableContainer {
    margin-left: 100px;    
}
.responsiveTableContainer.lockCol.colMedium table th:first-child,
.responsiveTableContainer.lockCol.colMedium table td:first-child {
    width: 80px;    
}

.responsiveTableContainer.lockCol.colLarge .responsiveTableScrollableContainer {
    margin-left: 140px;    
}
.responsiveTableContainer.lockCol.colLarge table th:first-child,
.responsiveTableContainer.lockCol.colLarge table td:first-child {
    width: 120px;    
}



/***************************************
 Message Boxes                               
****************************************/
div.form_error,
div.form_warning,
div.form_success,
div.form_info {
    border-width: 1px;
    border-style: solid;
    text-align: left;
    padding: 1em 1em 1em 5em;
    position: relative;
    margin-bottom: 1em;     
}

div.form_error
{
    border-color: #ff8587;
    background-color: #ffe5e6;        
}
div.form_warning
{
    border-color: #ecbb80;
    background-color: #fbf4d8;        
}
div.form_success
{
    border-color: #4ed980;
    background-color: #dffae7;        
}
div.form_info
{
    border-color: #ecbb80;
    background-color: #fbf4d8;        
}

/* Icon */
div.form_error:before,
div.form_warning:before,
div.form_success:before,
div.form_info:before {
    font-family: FontAwesome;        
    font-size: 2em;
    
    position: absolute;
    left: 3%;
  top: 50%;
  transform: translateY(-50%);
}

div.form_error:before {
    content: "\f057";        
    color: red;
}
div.form_warning:before {
    content: "\f06a";    
    color: yellow;
}
div.form_success:before {
    content: "\f058";    
    color: green;
}
div.form_info:before {
    content: "\f06a";    
    color: #e8aa53;
}

/* list items */
div.form_error ul,
div.form_warning ul,
div.form_success ul,
div.form_info ul {
    margin: 0; 
    padding: 0 0 0 15px;       
}

div.form_error li,
div.form_warning li,
div.form_success li,
div.form_info li {
    padding: 2px 0;
}


/***************************************
 Buttons
****************************************/
div.buttonBar {
    TEXT-ALIGN: center;
    padding: 15px
}

button,
.button
{
    -webkit-appearance: none;
    border-radius: 0;

    color: white;
    font-size: 1.1em;
    font-weight: bold;
    background: #41A5E1;
    border: 1px solid;
    border-radius: 4px;
    text-align: center;
    margin: 3px;
    padding: 1.1em 0;
    width: 13em;    
}

a.button {
	color:white;
    text-decoration: none;
    display: inline-block;
}

a.button:hover,
INPUT.button:hover,
BUTTON:hover {
    background: #3c93c8;
    cursor: pointer
}

.button.secondary {
    background: #798a94;
}

.button.alternate {
    background: none;
    color: #41A5E1;
}

a.button.alternate:hover,
INPUT.button.alternate:hover,
BUTTON.alternate:hover {
    background: #41A5E1;
    color: white;
    cursor: pointer;
}

/*NEW AD RULES FOR FREESTAR TOP BANNER*/

.adContainer {
    /***text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 90px;**/
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 106px;
}

@media only screen and (max-width: 1000px) {
    .adContainer {
        height: 116px !important;
    }
}