﻿body {
    font-size: .85em;
    line-height:1;
    font-family: Helvetica, Arial, Sans-Serif;
    color: #232323;
    background-color:#fff;
    margin:0;
    padding:0;
  
}
 
header, footer, nav, section {
    display: block;

}
footer p {
   
    padding:10px;
    padding-bottom:5px;
    height:10px;
    max-width:100%;
    background-color:transparent;
    font-size: 12px;
    font-family:'Source Sans Pro', sans-serif;
    text-align:center;
 
}
    
a {
    padding-right: 3px;
    padding-left: 3px;
    list-style-type: none;
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:400;
    color:#959eaa;
    line-height: 1;
    text-decoration:none; 
   
}
    a:hover {
    color:#2c98cf;
    }
/*Styles for the Attendance form
    ------------------------------------------*/
#AttendanceParent {
    background-image:url(images/shattered.png);
    width:100%;
    margin: 0 0 0 0;
    overflow:hidden;
 
}

#AttendBtns {
    background-color:#f4f4f4;
    border-color:#2686b7; 
    position:relative; 
    margin:70px auto auto auto;
    float:none;
    top:0; 
    z-index:1;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    height:326px;
    width:800px;
}

.attendanceAddBy { 
    background-color:#272b32;
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    font-weight:900;
    color:#959eaa;
    padding:7px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
    border-radius: 3px;
    display:inline;
    list-style-type:none;
    text-align:center;
}

    .attendanceAddBy a {
        font-size:1.4em;
    }
.attendanceBeltStyle {
    margin: 2px 0px 2px 0;
    padding:.1in;
    background-color:#d5d7d7;
    border:1px solid;
    border-color:#3991be;
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    font-weight:900;
    font-size:1em;
    color:#272b32;
   text-shadow: 0px 1px 1px rgba(242, 255, 255, 1);
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
    border-radius: 3px;
    display:inline-table;
    
    height:30px;
    text-align:center;
    white-space:normal;
}
.attendanceBeltStyleBig {
    width:140px;
    padding:.1in;
    font-size:1.8em;
}
.attendanceBeltStyleBigCancel {
    width:145px;
    padding:.1in;
    font-size:1.8em;
}
.attendanceBeltStyleMed {
    width:140px;
    padding:.08in;
    font-size:1.2em;
}
.attendanceBeltStyleSm {
    width:100px;
    padding:.08in;
    font-size:1em;
}

 
 a.attendanceBeltStyle:hover,a.attendanceBeltStyle:active {
   

     background-color:#3991be;
     border:1px solid;
     border-color:#2a323b;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    font-weight:900;
    color:#124964;
    box-shadow: 0px 1px 2px rgba(89, 50, 50,0.40);
    text-shadow:1px 1px 0px #3ebcf7;
   
}

 .confirmButtonClass{
     background: #32CD32 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x !important;
     min-width: 90px;
 }
 .cancelButtonClass{
     min-width: 90px;
 }
/* Styles for basic forms
-----------------------------------------------------------*/
.formButton {
    padding:.1in;
    margin: -7px 0 0 0;
    background-color:#272b32; 
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    font-size:1em;
    font-weight:900;
    color:#959eaa;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
    border:none;
}

fieldset {
    border:none;
    padding: 0 1.4em 1.4em 1.4em;
    margin:  0 1.5em 0; 
    
}

legend {
    font-family:'Source Sans Pro', sans-serif;
    font-size: 1.8em;
    font-weight: bold;
    padding:10px;
    color:#2c98cf;
    
}

textarea {
    min-height: 75px;
   
}

.editor-label {
    margin: 1em 0 0 0;
    font-family:'Source Sans Pro',Helvetica, sans-serif; 
    font-weight:400;
    font-size:2em;
    
}

.editor-field {
    margin: 0.5em 0 1.5em 0;
    width:90%;
    height:60px;
   
}



/* Styles for validation helpers
-----------------------------------------------------------*/
#entryForm {
background-color:#f4f4f4;
position:relative; 
margin:20px auto 0 auto;
float:none;
z-index:2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:0px; 
width:350px;
height:50%;
}

.field-validation-error {
color: #f00;
font-size:1.5em;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
    
}

.validation-summary-errors {
    font-weight: bold;
    font-family: "Source Sans Pro", sans-serif;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

/* Begin ACC mods 
-----------------------------------------------------------*/

#homeMessage {
    width:615px; margin:auto; 
    background-color:#f4f4f4;-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:0px; padding:10px;  
}

.text-box {
    font-size:2.4em;
    width:100%;
}

.k-autocomplete, .k-combobox, .k-datepicker, .k-timepicker, .k-datetimepicker, .k-colorpicker, .k-numerictextbox, .k-dropdown, .k-selectbox, .k-textbox {
    width:100%;

    }
.k-block, .k-widget, .k-inline-block, .k-textbox > input, .k-input[type="text"], .k-input[type="number"], .k-textbox, .k-picker-wrap .k-input, .k-button, .k-draghandle {
            font-size:1.4em;
        }
    .k-reset {
        font-size:1.4em;
    }

.statusbar {
    position: fixed;
    top: 25%;
    
    margin-left: auto;
    margin-right:auto;
    height: 40px;
    width:100%;
    
    padding: 5px;
 
    background:#2c98cf;
    color: white;    
    font-size:2em; 
    border-radius:12px;
 
    opacity: .70;    
    filter: alpha(opacity="70"); 
    z-index: 200;
    border:0;
    overflow: hidden;
    overflow-y: auto;
    font-family:"Source Sans Pro", sans-serif;
    font-weight:700;
    letter-spacing:1px;
    text-align:center;

}

.statusbarhighlight
{
    font-weight: bold;
    background-color:#d52424;
    color: Maroon;
    border: solid 1px silver;
}

.statuserror {
    font-weight: bold;
    background-color:#e50a0a;
    color: white;
    border:0;
}
.statusbarclose {
    float:right;
}



/* Styles for Navigation menu
-----------------------------------------------------------*/

  
/* Styles for Headers */
.optima_icon {
    height:60%;
    width:50%;
    margin:10px 0 -30px 10px;
    /*background-image:url(images/OptimaLogo.png);*/
    background-repeat:no-repeat;
    
}
#navLogo {
    float:left; 
    padding-bottom:1em; 
    padding-left:0;
    margin-top:-10px;
    margin-left:55px;
    line-height:1em;
    color:#959eaa;
    font-family:'Source Sans Pro Bold', sans-serif;
    font-weight:bold;
    letter-spacing:1px;
    font-size:16px;
 
}
nav {
    background-color:#272b32;
    height: 60px;  
    width: 100%;  
    font-size: 12pt;  
    font-family: "Source Sans Pro", Arial, sans-serif;  
    font-weight: 600;
    position: relative; 
    
    
}
    nav ul {
    padding-left:5px;  
    margin: 0 auto;  
    float:right;
    height: 40px; 
    }

    nav li {  
    display: inline;  
    float: left; 
    margin: 0 0 0 0; 
}  
    .clearfix:before,  
    .clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  
nav a {  
    
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 30px;  
 
}  

nav li:last-child a {  
    border-right: 0;  
} 
nav a:hover, nav a:active {  
   
}  
nav a#pull {  
    display: none;  

}
.blueHR {
    background-color: #2c98cf;
    height: 4px;
    width: 100%;
    max-width: 100%;
}
h2 {
    font-family:'Source Sans Pro Bold', sans-serif;
    letter-spacing:1px;
    color:#2c98cf;
}
/* Styles for Background Image 
    ------------------------------------------- */

.silContainer {
  width:100%;
  height:360px;
  margin: -50px 0 0 0;
}
 
#loginIMG {
    background-image:url(images/shattered.png);
    height:590px;
    max-width: 100%;
   
}
#homeIMG {
    background-image:url(images/shattered.png);
    height:590px;
    max-width: 100%;

}


/* Responsive Styles
    ----------------------------------*/

@media only screen and (max-width:1024px)  {
   
     .clearfix {
        height:85px;
    
    }
	.nav {
		position: relative;
		min-height: 40px;
       
	}	
	.nav ul {
		width: 180px;
		padding: 5px;
		position:relative;
		top: 0;
		left: 0;
		
		background-color:#2c98cf;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: block;
	    margin:0;

	}

	.nav a {
		display: block;
		padding:-20px -20px -20px -20px;
		text-align: center;
        font-size:14px;
        width:70px;
	}
	.nav .current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}
	
    /*attendance data entry form */
    #AttendBtns {
        width:640px;
    }
    .attendanceBeltStyle {

        height:30px;
        font-size:2em;
    }
    .attendanceBeltStyleBig {
        width:100px;
        height:60px;
        padding:.1in;
        font-size:2em;
    }
      .attendanceBeltStyleBigCancel {
        width:145px;
        height:60px;
        padding:.1in;
        font-size:2em;
    }
    .attendanceBeltStyleMed {
        width:100px;
        height:58px;
        padding:.05in;
        font-size:1.4em;
    }
    .attendanceBeltStyleSm {
        width:70px;
        padding:.09in;
        font-size:.95em;
    }

}
@media only screen and (max-width:392px) {

    #homeMessage {
        width:290px;
    }

    .clearfix {
        height:150px;
    
    }
	.nav {
		position: relative;
		min-height: 40px;
       
	}	
	.nav ul {
		width: 180px;
		padding: 5px;
		position:relative;
		top: 0;
		left: 0;
		
		background-color:#2c98cf;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: block;
	    margin:0;

	}

	.nav a {
		display: block;
		padding:-20px -20px -20px -20px;
		text-align: center;
        font-size:14px;
        width:70px;
	}
	.nav .current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		
	}

	/* right nav */
	.nav.right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	.nav.center ul {
		left: 50%;
		margin-left: -90px;
	}

    /*attendance data entry form*/
    #AttendBtns {
        width:360px;
    }
    .attendanceBeltStyle {
        width:45px;
        height:30px;
    }
    .attendanceBeltStyleBig {
        padding:.05in;
        font-size:1.2em;
    }
    .attendanceBeltStyleBigCancel {
        padding:.05in;
        font-size:1.2em;
    }
    .attendanceBeltStyleMed {
        padding:.03in;
        font-size:.8em;
    }
    .attendanceBeltStyleSm {
        padding:.01in;
        font-size:.7em;
    }
}