body,html{
position:relative;
font-family: Arial;font-size: 14px;
height:100%;width: 100%;
padding: 0;margin: 0; 
color:#000;background:#EFEFEF;
}
.pageWrapper{ /*media query exists*/
position:relative;
margin:0px auto;
background:#FFF;
}
#pageHead{
border-bottom:1px dotted #999;
background:#305B65
}
#pageLogo{
width:auto;
height:80px;
padding:10px;
display:inline-block;
vertical-align:middle;
}
#pageTitle{
display:inline-block;
vertical-align:middle;
font-size:200%;
font-weight:bold;
color:#666666;
width:60%;
padding:5px;
}
#pageTitle i{
font-weight:normal;
}
#pageMenuIcon{
float:right;
border-left:1px solid #CCC;
font-size:220%;
padding:5px 12px;
background:#000;
color:#FFF;
font-weight:bold;
cursor:pointer;
}
#pageMenuIcon:hover{
background:#CCC;
color:#000;
}
#pageMenu{
display:table-cell;
vertical-align:middle;
height:auto;
text-align:right;
}
#pageMenu>ul{
display:table;
float:right;
margin:5px;	
border-radius:10px;
transition:background 1s ease;
}
#pageHead.sticky #pageMenu>ul{
background:rgb(255,255,255,0.8);
}
#pageMenu>ul>li{
display:table-cell;
vertical-align:middle;
text-align:center;
}
#pageMenu a,#pageMenu span{
display:inline-block;
color:#FFF;
padding:15px 20px;
margin:0px 1px;
border-bottom:2px solid rgb(255,255,255,0);
border-radius:2px;moz-border-radius:2px;webkit-border-radius:2px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
/*fade transition*/
-webkit-transition: color 300ms ease;
-moz-transition: color 300ms ease;
-o-transition: color 300ms ease;
transition: color 300ms ease;
-webkit-transition: border 300ms ease;
-moz-transition: border 300ms ease;
-o-transition: border 300ms ease;
transition: border 300ms ease;
}
#pageMenu a.active,#pageMenu a:hover{
background:none;
color:#000;
background:rgb(255,255,255,0.5);
border-radius:10px;
transition:background 0.5s ease;
}
#welcomeBar{
background:#F3F1ED;
padding:5px 7px;
border-bottom:1px dotted #999;
}
#pageBody,#pageFoot{
padding:20px;
min-height:200px;
}
#pageFoot{
border-top:1px solid #FFF;
color:#777;
background:#F4DFB9;
}
#menuMain li>ul{
padding-left:50px;
}
#menuMain li a{
display:block;
border-bottom:1px dotted #AAA;
padding:10px 10px 10px 10%;
font-weight:bold;
}
#menuMain li a:hover{
background:#26498A;
color:#FFF;
}
#menuMain li a.inactive{
font-weight:normal;
color:#AAA;
}
#menuMain li a.inactive:hover{
background:none;
}
a{color:#3E5B71; text-decoration: none;}
a:hover {color:#003;text-decoration: none;}
a.boxed{
padding:3px;
border:1px solid #AAA;
margin:1px;
font-size:80%;
border-radius:2px;moz-border-radius:2px;webkit-border-radius:2px;
}
a.boxed:hover{
background:#777;
color:#FFF;
}
h1{
color:#353535;
font-size:200%;
padding:25px;
}
h2{
background:#EEE;
font-size:100%;
padding:3px;
}
.navig1{
color: #003399;
margin: 5px;
font-weight:bold;
text-align:center;
font-size:120%;
}
.navig1 a,.navig1 .active{
font-weight: bold;
display:inline-block;
color: #333;
padding: 7px 15px;
margin:2px;
border: 1px solid #EFEFEF;
border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;  
}
.navig1 a:hover{
color:  #4F4539;
background-color: #E0DBD6;
border: 1px solid #CCC;
}
.navig1 .active{
border: 1px solid #000;
}

/*form  components*/
.msgAck,.msgSuccess {
font-size: 12px;
font-weight: bold;
color:#003300;
margin: 2px;padding: 7px;
background:#CFDEC5;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgErr,.msgFail {
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;padding: 7px;
background:#F0E4BF;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgForm{
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;padding: 2px;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgAck li,.msgSuccess li,.msgErr li,.msgFail li{
list-style-type:circle;
padding:3px 0px;
}
.tblDefault td{padding:5px;}
input[type=submit],input[type=button],button{
cursor:pointer;
padding:5px 10px;
}
input[type=radio]{
position:relative;
top:2px;
margin-right:3px;
}
input[type=text],input[type=password],select{
display:inline-block;
font-size:16px;
padding:5px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   
}
input[type=number]{
width:50px;
font-size:16px;
}
fieldset {
border:1px solid #EEE;
padding:7px;
margin:7px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset legend{
font-size:14px;
font-weight:bold;
}
fieldset>ul>li{
position:relative;
display:table;
width:100%;
margin:3px 0px;
padding:3px 0px;
clear:both;
line-height:24px;
border-top:1px dotted #EEE;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset>ul>li>label>span,fieldset>ul>li>span{
display:table-cell;
min-width:200px;
width:20%;
padding-left:20px;
padding-bottom:7px;
vertical-align:top;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset>ul>li>label>div,fieldset>ul>li>div{
display:table-cell;
vertical-align:top;
padding-bottom:7px;
padding-right:5px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.btnMain,button{
border:none;
background:#F5C503;
color:#000;
display:inline-block;
min-width:100px;
cursor:pointer;
font-size:130%;
text-align:center;
padding:10px 20px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
border-radius:20px;moz-border-radius:20px;webkit-border-radius:20px;
opacity:0.9;filter:alpha(opacity=90);
}
.btnMain:hover,button:hover{
background:#000;
color:#bd994f;
/*fade transition*/
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
transition: background-color 300ms ease;
}
.btnMain[disabled],button[disabled],
.btnMain:hover[disabled],button:hover[disabled]{
background:#bd994f;
color:#000;
opacity:0.5;
}

/* site specific */
#dayTasks{
float:right;
width:250px;
background:#FFF;
opacity:0.9;filter:alpha(opacity=90);
border:1px solid #CCC;
padding:10px;
margin:10px;
}
#dayTasks li{
margin:3px 0px;
}
#dayTasks li.open::before{
display:inline-block;
content:' ';
background:red;
width:10px;
height:10px;
margin-right:5px;
}
#dayTasks li.close::before{
display:inline-block;
content:' ';
background:green;
width:10px;
height:10px;
margin-right:5px;

}
@media screen and (min-device-width:650px){ /* tablets or desktop */
.pageWrapper{
min-width:650px;
max-width:80%;
padding:20px;
border-left:1px dotted #999999;
border-right:1px dotted #999999;
}
}