/*Body
 * ------------------------------------------------------------------------------*/
body{
margin:0px;
}
#uname{ 
    background-color: white;
    width: 100%;
    text-align:left;
    line-height:30px;
    top: 47px;
position: relative;
}
#header{ 
    background-color: white;
    width: 100%;
}

#content {
    width:100%;
    min-height:82vh;
    //padding-bottom: 2.5rem;
   // margin-top: 108px;
}

#greyscreen {
    position:fixed;
    background-color: grey;
    top:0;
    left:0;
    bottom:0;
    opacity:0.6;
    width: 100%;
    height:100%;
    z-index:1;
    display:none;
}

#menuwrapper{
   width:100%;
   //background-color: rgb(150, 12, 34);
   background-color: #54585A;
}
#submenuwrapper{
   width:100%;
   background-color:rgb(150, 12, 34);
   margin:auto;
   top: 47px;
position: relative;
}
#footer {
    background-color: #54585A;
    width: 100%;
    height: 2.5rem;
    position: relative; 
    margin-top:47px;
    //bottom:0;
    //position: fixed; 
    //position:relative;
    //top: 67px; 
}

#container {
    background-color: white;
    //width: 1200px;
    width: 100%;
    //height: 100%;
    position:relative;
    //min-height:100vh;
    overflow: visible;
    margin:auto;
    font-family:arial;
    font-size:14px;
    color:black;
    text-align:center;
    display:block;
}

#logotype {
    width: 475px; 
}


#logout_button {
    float: right;
    margin-right: 8px;
    margin-top: 11px;
    width: 55px;
}
#menu_button {
    float: left;
/***
    margin-left: 8px;
    margin-top: 8px;
***/
    width: 35px;
}

#app_welcome {
    background-color: #ececec;
    width: 100%;


}
#app_subtitle {
    background-color: rgb(90,90,90);
    color:white;
    font-size: 17px;
    line-height:30px;
    width: 100%;
}
#app_const_name {
    color: grey;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    width: 100%;
    max-width:230px;
}

/*  DIV ---------------*/
.tiles-area-a{text-align:center; margin:0 auto;width:450px}
.tile-a{ width:100px; height:100px; max-width:100px; max-height:100px; overflow:hidden;cursor:pointer;display:inline-block;border:solid 1px #a9a9a9; border-radius:4px;background-repeat:no-repeat; background-position:50% 4px; background-size: 64px 64px; background-color:#efefef; text-align:center; position:relative; margin:2px;}
.tile-a:hover{background-color:#fefefe;}

/*  HEADER ------------*/
h1,h2,h3,h4,h5,h6{color:#666686; font-family:Helvetica, Helvetica Neue, Arial; text-align:center; font-weight:bold; }
h1{font-size:2.2em; margin-bottom: 10px;}
h2{font-size:2em;}
h3{font-size:1.8em; color: black;font-size: 16px;font-weight: bold;border-bottom: 1px solid #9EA9AB; text-align: left; font-family: verdana;}
h4{font-size:1.6em;}
h5{font-size:1.4em;}
h6{font-size:1.2em;}

/*  IMAGE -------------*/
img{vertical-align:middle;}
img.button{cursor:pointer;}

/*  MISC --------------*/
.clb{clear:both;}
.error{color:#cc0000;}
span.fail {color:#cc0000;}
span.pass {color:#003399;}
.hidden{display:none;}

.top{vertical-align:top;}

.left{text-align:left;} .center{text-align:center;} .right{text-align:right;}

.clear{clear:both;} .f_right{float:right;} .f_left{float:left;}

.h75{height: 75px;}
.h210{height: 210px;}
.h325{height: 325px;}


.p10 {padding: 10px;}

.w25{width:25px;} .w35{width:35px;} .w40{width:40px;} .w50{width:50px;} .w60{width:60px;} .w75{width:75px;} .w85{width:85px;}
.w100{width:100px;} .w110{width:110px;} .w125{width:125px;} .w150{width:150px;} .w160{width:160px;} .w175{width:175px;}
.w200{width:200px;} .w225{width:225px;} .w250{width:250px;} .w275{width:275px;} .w280{width:280px;}
.w300{width:300px;} .w325{width:325px;} .w350{width:350px;} .w375{width:375px;}
.w400{width:400px;} .w425{width:425px;} .w430{width:430px;} .w435{width:435px;} .w470{width:470px;}
.w500{width:500px;} .w515{width:515px;} .w520{width:520px;} .w525{width:525px;} .w545{width:545px;} .w550{width:550px;}
.w750{width:750px;}
.w850{width:850px;}
.hidden{display:none;}

.wid_25 {width: 25px;}
.wid_35 {width: 35px;}
.wid_40 {width: 40px;}
.wid_50 {width: 50px;}
.wid_60 {width: 60px;}
.wid_75 {width: 75px;}
.wid_100 {width: 100px;}
.wid_125 {width: 125px;}
.wid_150 {width: 150px;}
.wid_175 {width: 175px;}
.wid_200 {width: 200px;}
.wid_225 {width: 225px;}
.wid_250 {width: 250px;}
.wid_275 {width: 275px;}
.wid_300 {width: 300px;}
.wid_325 {width: 325px;}
.wid_350 {width: 350px;}
.wid_375 {width: 375px;}
.wid_400 {width: 400px;}
.wid_425 {width: 425px;}
.wid_500 {width: 500px;}

/*  TABLE ---------------*/
td.lb{font-weight:bold; text-align:right;}
table.type-a{width:100%;}
table.type-a tr td{border-bottom:solid 1px #cccccc; min-height:20px; padding:2px;}
table.type-a tr.e td{background-color:#eeeeee;}

table.type-c{margin-left:auto;margin-right:0;}
table.type-c tr td{text-align:left;}

table.type-d {width: 100%;}
table.type-d tr td {border-bottom: solid 1px #efefef; padding: 5px;}

/*  FORM Format ----------*/
input[type=text],input[type=password], select, textarea{border:solid 1px #a9a9a9; padding:0; margin:0; padding:2px; background-color:#ffffcc;}
.number, .digits{text-align:right; width: 75}
textarea{vertical-align:top;}
.digits{width: 50px;}
input[type=radio]{cursor: pointer;}

input.date {
/**	background: url('../img/calendar.png') no-repeat 99% 50%;  **/
	width: 150px;
}

.two-cols{ display:inline-block; vertical-align:top;}

.ui-widget .lb, .ui-widget td.lb{color:#555555; font-size:.9em;}
.ui-widget td{padding:2px; height: 20px;}
.ui-widget .datatable{font-size:11px;}

h5{font-weight:bold; color:#666686;}
h5.type-a{border-bottom:solid 1px #666686; text-align:left; margin-bottom:5px;}

hr.line-a{height:5px;background-color:#bbbbbb;border:solid 1px #bbbbbb;margin-bottom:10px;margin-top:10px;}
hr.line-b{border:none; border-bottom:2px solid #cccccc; margin:5px 0;}

/*  Hyperlink ----------------*/
a, a:visited, a:link, a:active{/*color:#003399; */color: #0066CC;}

.tile-a > a{display:block; height:92px; margin:4px 0;}
.tile-a > a > span{font-weight:bold; position:absolute; bottom:4px; display:block; width:100%;}

a.btn-a{ white-space:nowrap; display:inlie-block; margin:2px; border-radius:4px; background-color:#e6e6e6; border:1px solid #d3d3d3;font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;text-decoration:none;font-weight:bold;cursor:pointer;padding:3px 10px 3px 5px; line-height:2em;}

a.btn-a{color:#555555;}
a.btn-a:hover{background:#dadada;border:1px solid #999999;color:#212121;}
a.btn-a:active{background-color:#e6e6e6;border:1px solid #d3d3d3;color:#555555;}

a.btn-a img{margin:-3px 0 1px 0;padding:0;border:none;width:16px;height:16px;}

a.btn-a.green{color:#529214;}
a.btn-a.green:hover{background-color:#E6EFC2;border:1px solid #C6D880;color:#529214;}
a.btn-a.green:active{background-color:#529214;border:1px solid #529214;color:#fff;}

a.btn-a.red{color:#d12f19;}
a.btn-a.red:hover{background:#fbe3e4;border:1px solid #fbc2c4;color:#d12f19;}
a.btn-a.red:active{background-color:#d12f19;border:1px solid #d12f19;color:#fff;}

a.btn-a.blue{color:#136C81;}
a.btn-a.blue:hover{background:#D0D7DD;border:1px solid #5A7086;color:#136C81;}
a.btn-a.blue:active{background-color:#136C81;border:1px solid #136C81;color:#fff;}

a.btn-a.yellow{color:#A39816;}
a.btn-a.yellow:hover{background:#F9F3CA;border:1px solid #E1DE85;color:#A39816;}
a.btn-a.yellow:active{background-color:#A39816;border:1px solid #A39816;color:#fff;}

#browser-alert{ text-align:center; display:block; font-size:2em; color:#cc0000; font-weight:bold; padding:10px;}
img.small{max-height:64px; max-width:64px;}


/*Ajax Loading Background*/
div#ws{height: 100%;width: 100%;background-color:#ffffff;position: fixed;left: 0;top: 0;z-index: 1100; filter: Alpha(Opacity=80);opacity: 0.8;}
div#sws{background:transparent url('../img/spinner.gif') no-repeat left center;padding:5px 10px 5px 40px;position:fixed;left:50%;top:50%;margin: -25px 0 0 -121px;color:#0085C5;font-family:'Trebuchet MS', Vendana;font-size:16px;z-index: 1101;}

.dn{display:none;}

form table tr td {padding: 2px; vertical-align: top;}
form table tr td.sub-title{color:#627AAD;border-bottom: 1px solid #1D4088; font-size: 1.6em; padding: 10px 0 0;}
form table tr td.lb{color: #666666; font-weight: bold; text-align: right;}
form table tr td.space-a{line-height: 10px;}
form table tr td.space-b{line-height: 20px;}
form table tr td input[type=checkbox]+label, form table tr td input[type=radio]+label{cursor: pointer;}
.sp-a{display: inline-block; margin: 0 20px; font-weight: bold; color: #1D4088;}

form table tr td ul li{margin: 2px 0;}

#frm_register {text-align: center;}
#frm_register > table {margin: 0 auto; text-align: left;}

form.long-text input[type=text],
form.long-text input[type=password],
form.long-text textarea, 
form.long-text select{width: 300px;}

form.long-text textarea {height: 45px;}

form.long-text input.digits{width: 50px;}

table.course-register {margin: 0 auto;}
table.course-register tr th {color: #627AAD; border-bottom: 1px solid #1D4088;font-size: 1.6em; padding: 5px 5px 0;}
table.course-register tr td{padding: 5px;}
table.course-register tr th {text-align: left;}


.information {
    color:#fff;
}


.my-error-msg {
    color:red;
}

.bg_c {
    background-color: #F9F3CA;
}

.bg_e {
    background-color:#EEE;
}

#dv_sticky {
 position: fixed !important; 
 top: 0px; 
z-index: 5; 
//width: 1200px;
//max-width:1200px;
width:100%;
background-color:#c8102e;
}

.dvData {
width:7.9%;
display:inline-block;
}

.dv_test {
width:25%;
display:inline-block;
padding-bottom:7px;
text-align:top;
margin:auto;
}
.box{
margin-top: 67px;
}
/**
#dv_conf_485{
 width:200px;
}
**/

@media screen and (max-width: 64em) {
#logotype {
    width:60%;
    max-width: 340px; 
}

#menuwrapper{width:100%;}
#submenuwrapper{width:100%;}
#submenuwrapper{display:none;}
#dv_sticky{width:100%;}
#uname{width:100%; }
#nav{width:100%;}
#container {width:100%;}
#greyscreen {width:100%;}
#header {width:100%;}
#header img{width:96%;}
#login {width:100%;}
#content {width:100%;}
#footer {width:100%;}
#app_welcome { width:100%; }
#app_const_name { width:100%; }
.box {width:100%; overflow:auto;margin-top:67px;}
.box-header { width:100%; }

form.search table td.left_column {
  min-width:25%;
}
form.search table td.middle_column {
  min-width:25%;
}
form.search table td.right_column {
  min-width:25%;
}

#footer .box img {
    width:100%;
    max-width: 435px; 
}
#menu_button {
    width: 35px;
}

.dvData {
width:15%;
}
}

@media screen and (max-width: 50em) {
.dv_test {width:50%;}
}

@media screen and (max-width: 30em) {


#menu_button {
    width: 35px;
}

.dvData {
width:24%;
}

}