@import url();
@import url("reset.css");
@import url("tooltipster.css");
@import url("popups.css");
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic);

/* Preloader */
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:200; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../images/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}
#container {     
    width:1330px;
    height:725px;
    background-color:#a3a3a3;
    border:2px solid #000000;
    position:relative;
    margin:auto;
}
#accDiv {   /* THE DIV THAT MAKES MOUSE CLICKS NOT WORK, FOR ACCESSIBILITY */
    background-color: rgba(1,255,1,0.0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index:200;
}
body{
   font-family: 'Source Sans Pro', sans-serif;
    overflow:hidden;
}

/*========================================
// HEADER BAR STYLES
//========================================*/
#topBar {     /* MAIN TOP BAR STYLING */
    width:100%;
    height:42.15px;
    background-color:#333333;
    position:absolute;
    top: 0px;
    left: 0px;
}
#topBar #logo{           /* POSITIONING AND SIZE OF LOGO */
    position: absolute;
    height: 30px;
    width: 30px;
    top: 5px;
    left: 9px;
}
#topBar #topText{        /* POSITIONING AND SIZE OF TEXT */
    position: absolute;
    top: 7px;
    left: 48.60px;
    font-size:24px;
    color:#ffffff;
}

#topBar #accessText {
    display: none;
}

#topBar #accessText ul{  /* FOR THE 508 TEXT AT TOP BAR*/
    position:absolute;
    top: 0px;
    left:0px;
    list-style-type: none;
}
#topBar #accessText li {   /* FOR THE 508 TEXT */
    display: inline;
    position:relative;   
    padding-top:8px !important;
    float:left !important;
    right:300px;
    font-size:13px !important;
    color:#ffffff !important;
    text-align:center !important;
	z-index:201 !important;
}
#topBar #accessText .sideLine {    /* FOR THE 508 TEXT */
    border-right: 3px solid #3d3d3d;
    padding:0 5px 0 5px;
    height:34px;
}
#topBar #accessText .noLine {   /* FOR THE 508 TEXT */
    padding:0 3px 0 5px;
}
#topBar ul{              /* DEFINITION FOR <ul> TOP MENU */
    position: absolute;   
    top: 0px;
    right: 0px;
    list-style-type: none;
}
#topBar .topli{           /* STYLING OF TOP MENU BUTTONS */
    display: inline;
    position:relative;   
    padding-top: 12px;
    width: 41.95px;
    height:29.95px;
    border-radius: 10%;
    float:right;
    margin-right:5px;
    font-size: 17px;
    color:#8C8C8C;
    text-align: center;
    cursor: pointer;
}
.nopointer {
	cursor:default !important;
}
#topBar .accessOff {
    background-color:#3D3D3D;
}
#topBar .accessOn {
    background-color:#E85C1C;
    color:#FFFFFF;
    border-radius: 10%;
    -webkit-box-shadow:0 0 0 2px #B94800 inset;
    -moz-box-shadow:0 0 0 2px #B94800 inset;
    box-shadow:0 0 0 2px #B94800 inset;
}

/*========================================
// SIDE MENU STYLES
//========================================*/
#sideMenu {            /* DEFINITION OF SIDE PANEL MENU */
    position:absolute;
    width:300px;
    height:672px;
    top: 48px;
    left: 6px;
    float:left;
    background-color:#8c8c8c;
    overflow:hidden;
}
#sideMenu h3{                   /* STYLING OF THE ACCORDIAN MENU 'CLICKABLES' */
    position: relative;
    height: 30px;
    width: 300px;
    background-color: rgba(51,51,51, 0.8);
    margin-top: 6px;
    cursor:pointer;
}
#sideMenu .topMenu{             /* STYLING OF THE TOP MOST MENU ITEM (IT REMAINS IN THE SAME POSITION) */
    position: relative;
    height: 30px;
    width: 300px;
    background-color:rgba(51,51,51, 0.8);
    margin-top: 0px;
    cursor:pointer;
}
.sideText{                      /* STYLING OF THE SIDE MENU TEXT WITHIN THE <h3> TAG */
    position: absolute;
    top: 7px;
    left: 41px;
    font-size:17.2px;
    color: white;
    cursor:pointer;
}
.sideLetter {              /* STYLING OF THE LETTER ASSOCIATED W/ EACH MENU ITEM */
    font-size:17.2px;
    font-weight:700;
    width:30px;
    height:23.5px;
    text-align:center;
    padding-top: 6px !important;
    position:absolute;
    left:0;
    top:0;
}
.sideNum{                    /* STYLING OF THE NUMBERS AT THE SIDE OF THE PROCEDURE AND DATA TABLES (INACTIVE) */
    position: relative;
    float: right;
    margin-right: 5px;
    font-size:17.2px;
    padding-top: 8px;
    color:#8e8e8e;
    font-weight:600;
    width: 30px;
    height: 22px;
    text-align:center;
    background-color: #5d5d5d;
}
.sideNumActive{            /* STYLING OF THE NUMBERS AT THE SIDE OF THE PROCEDURE AND DATA TABLES (ACTIVE) */
    position: relative;
    float: right;
    margin-right: 5px;
    font-size:17.2px;
    padding-top:8px;
    background-color:#E85C1C;
    border-radius: 10%;
    -webkit-box-shadow:0 0 0 2px #B94800 inset;
    -moz-box-shadow:0 0 0 2px #B94800 inset;
    box-shadow:0 0 0 2px #B94800 inset;
    color:white;
    font-weight:600;
    width: 30px;
    height: 22px;
    text-align:center;

}
.sideNumCompleted {      /* STYLING OF THE NUMBERS AT THE SIDE OF THE PROCEDURE AND DATA TABLES WHEN COMPLETED */
    position: relative;
    float: right;
    margin-right: 5px;
    font-size:17.2px;
    padding-top:8px;
    background-color:#66AF45;
    border-radius: 10%;
    -webkit-box-shadow:0 0 0 2px #4D7F33 inset;
    -moz-box-shadow:0 0 0 2px #4D7F33 inset;
    box-shadow:0 0 0 2px #4D7F33 inset;
    color:white;
    font-weight:600;
    width: 30px;
    height: 22px;
    text-align:center;
}
.endNum{                     /*  END NUMBER TO BE FLUSHED AT RIGHT SIDE */
    margin-right: 0px;
}
.sideLetterAccessOff {         /* STYLING OF SIDE LETTER WITH NO 508 */
    background-color:rgba(51,51,51, 0.85);
    color:#8C8C8C;
} 
.sideLetterAccessOn {           /* STYLING OF SIDE LETTER WITH 508 */
    background-color:#E85C1C;
    border-radius: 10%;
    -webkit-box-shadow:0 0 0 2px #B94800 inset;
    -moz-box-shadow:0 0 0 2px #B94800 inset;
    box-shadow:0 0 0 2px #B94800 inset;
    color:white;
}
#sideMenu .content{             /* DEFINES THE SIZE OF EACH MEUS CONTENT AREA */
    overflow: hidden;
    -ms-overflow-style: none; 
    overflow: -moz-scrollbars-none;
    height: 100%;
    padding: 5px;
    background-color:#ffffff;
    position: relative;
	
}
#sideMenu .content::-webkit-scrollbar { width: 0 !important } /*COMPLETLY REMOVE SCROLLBAR IN WEBKIT*/
#sideMenu ol{ 
    margin-left:33px;
}
#sideMenu li { 
    font-size:14px;
    font-weight: 400;
    list-style-type:decimal;
    margin-right:12px;
    padding:12px 12px 12px 6px;
    line-height:130%;
}
#arrowHolder{
    width: 100%;
    height: 30px;
    background-color:rgba(51,51,51, 0.8);
    position: absolute;
    margin-left: -5px; 
}
#arrw_L{
    width: 30px;
    height:30px;
    background-image: url(../images/arrow.png);
    position: absolute;
    left: 0;
    cursor: pointer;

}
#arrw_R{
    width: 30px;
    height:30px;
    background-image: url(../images/arrow.png);
    transform: scaleX(-1);
    position: absolute;
    right: 0;
    cursor: pointer;
}
.accessOffArrL{             /* ACCESSIBILITY FOR LEFT ARROW IN PROCEDURES PANEL */
    background-image: url(../images/arrowOrange.png) !important;
    transform: scaleX(-1) !important;
}
.accessOffArrR{           /* ACCESSIBILITY FOR RIGHT ARROW IN PROCEDURES PANEL */
    background-image: url(../images/arrowOrange.png) !important;
    transform:none !important;
}
#doltContainer{                 /* DOLT CONTAINER STYLES */
    width:240px;
    height: 30px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    float: left;
    margin-left: 30px;
}
#doltContainer ul{              /* THE UL FOR THE DOLTS IN SIDE PANEL  */
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin: auto;

}
#doltContainer li{              /* INITIAL STYLES FOR DOLTS WHEN THEY ARE CREATED */
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin: 10px 8px 0 0;
    padding: 0;
}
#doltContainer li:last-of-type{
    margin: 0;
}
#doltContainer .inactive{       /* COLOR FOR INACTICVE DOLTS */
    background-color: grey;
}
#doltContainer .active{         /* COLOR FOR ACTIVE DOLTS  */
    background-color: white;
}


/*========================================
// CONENT AREA STYLES
//========================================*/
#contentArea {                        /* DEFINES THE MAIN CONTENT/WORK AREA */
    width: 1012px;
    height:672px;
    position: absolute;
    top: 48px;
    left: 312px;
    /*background:transparent url(../images/background.png) no-repeat center center; */
}