* { margin: 0; padding: 0; font-family: sans-serif; font-size: 13px; }
a { color: #ff4136; text-decoration: none; }
a:hover { color: #333333; }
table { margin: auto; border-collapse: separate; border-spacing: 15px; }
input, textarea, select, option { padding: 2px 3px; }
textarea { resize: none; }
ul { list-style: none; }
button { height: 25px; min-width: 100px; padding: 0 10px; }
.alert-box { padding: 5px 35px; color: #555555; }
.error { background: #ffecec url('../images/error.png') no-repeat 10px 50%; border: 1px solid #f5aca6; }
.success { background: #e9ffd9 url('../images/success.png') no-repeat 10px 50%; border: 1px solid #a6ca8a; }
.ui-datepicker { padding: 10px; background: #fcfcfc; border: 1px solid #cccccc; }
.ui-datepicker a { cursor: pointer; text-decoration: none; }
.ui-datepicker-next { float: right; }
.ui-datepicker-title { text-align: center; font-weight: bold; }
#ui-datepicker-div { display: none; }



#login { width: 250px; margin: 0 auto; margin-top: 30px; margin-bottom: 10px; border: 1px solid #aaaaaa; }
#login h1 { padding: 10px; border-bottom: 1px solid #aaaaaa; text-align: center; }
#login form { padding: 10px; }
#login input { width: calc(100% - 12px); padding: 4px 5px; margin: 5px 0; border: 1px solid #aaaaaa; }
#login button { height: 25px; width: 100%; margin-top: 5px; background-color: #333333; color: #ffffff; border: 0; cursor: pointer; }
#login button:hover { background-color: #ff4136; }



header { width: 100%; position: fixed; top: 0px; }
#logo { float: left; height: 50px; width: 250px; line-height: 50px; background-color: #333333; text-align: center; }
#logo img { height: 25px; width: 200px; display: inline-block; vertical-align: middle; }
#topbar { float: right; height: 50px; width: calc(100% - 270px); line-height: 50px; padding: 0 10px; background-color: #333333; color: #ffffff; text-align: right; letter-spacing: 0.5px; }



section { width: 100%; margin-top: 50px; }
#sidebar { float: left; height: calc(100% - 50px); width: 250px; position: fixed; }
#navigation { height: calc(100% - 40px); background-color: #e9e9e9; overflow-y: auto; }
#navigation ul { margin: 10px auto 20px auto; width: 200px; list-style-type: none; }
#navigation li a { display: block; margin-bottom: -1px; padding: 7px 15px; color: #000000; text-decoration: none; border: 1px solid #aaaaaa; }
#navigation li a:hover { background-color: #333333; color: #ffffff; border: 1px solid #333333; }
#navigation img { display: inline-block; vertical-align: top; }
footer { height: 40px; width: 100%; line-height: 40px; background-color: #333333; color: #ff4136; text-align: center; }



#main { float: right; height: 100%; width: calc(100% - 270px); padding: 10px; }
#titlebar { padding: 5px 10px; display: block; background-color: #e9e9e9; border: 1px solid #aaaaaa; overflow: auto; }
#content { min-height: 200px; margin-top: 20px; padding: 10px; border: 1px solid #aaaaaa; overflow: auto; }



.timeoff { margin: auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
.timeoff td { width: 80px; padding: 6px 0; border: 1px solid #aaaaaa; text-align: center; }
.timeoff td:first-child { width: 180px; padding-left: 10px; text-align: left; }
.timeofftaken { margin: 15px auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
.timeofftaken th, .timeofftaken td { padding: 6px; border: 1px solid #aaaaaa; text-align: center; }
.timeofftaken th { background-color: #e9e9e9; font-weight: bold; }
.timeoffpending { margin: auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
.timeoffpending th, .timeoffpending td { width: 100px; padding: 6px; border: 1px solid #aaaaaa; text-align: center; }
.timeoffpending th { background-color: #e9e9e9; font-weight: bold; }
.timeoffpending th:nth-child(2) { width: 300px; }
.timeoffpending td:nth-child(2) { padding-left: 5px; text-align: left; }
.timeoffstats { margin: auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
.timeoffstats th { padding: 6px; border: 1px solid #aaaaaa; text-align: center; }
.timeoffstats td { width: 100px; padding: 6px 0; border: 1px solid #aaaaaa; text-align: center; }
.timeoffstats td:first-child { width: 350px; padding-left: 10px; text-align: left; }














#profilepage { height: auto; width: 580px; margin: 0 auto; overflow: hidden; }
#profilepage #photo { float: left; width: 100px; }
#info1 { float: right; width: 450px; }
#profilepage table { border-collapse: separate; border-spacing: 0 7px; width: 100%; margin-top: -7px; }
#profilepage td:first-child { width: 150px; }
#profilepage td:nth-child(2) { width: 10px; }
#titleheader { padding: 5px 0; background-color: #e9e9e9; text-align: center; }
#clearfix { display: block; clear: both; }
#info2 { width: 580px; }
#profilepage #education { margin: 2px 0; border: 1px solid #aaaaaa; padding: 0 5px; }



#pdalist { border-collapse: collapse; border: 1px solid #aaaaaa; }
#pdalist th { width: 100px; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#pdalist th:nth-child(2) { width: 160px; }
#pdalist th:nth-child(4) { width: 110px; }
#pdalist th, #pdalist td { padding: 6px 0; border: 1px solid #aaaaaa; text-align: center; }



#pdaheader { display: block; margin-bottom: 10px; padding: 5px; background-color: #e9e9e9; border: 1px solid #aaaaaa; }
#pdaheaderlast { display: block; margin-bottom: 0; padding: 5px; background-color: #e9e9e9; border: 1px solid #aaaaaa; }



#pda4c { margin: 15px auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#pda4c th { width: 200px; padding: 6px 0; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#pda4c th:first-child { width: 20px; }
#pda4c th, #pda4c td { border: 1px solid #aaaaaa; }
#pda4c td { height: 25px; text-align: center; }
#pda4c textarea { height: 70px; width: 188px; margin: 2px; }
#pda4c #justify { padding: 3px 5px; text-align: justify; }



#pda2c { margin: 15px auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#pda2c th { width: 282px; padding: 6px 0; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#pda2c th, #pda2c td { border: 1px solid #aaaaaa; }
#pda2c td { height: 25px; text-align: center; }
#pda2c textarea { height: 70px; width: 270px; margin: 2px; }
#pda2c #justify { padding: 3px 5px; text-align: justify; }



#oprlist { margin: 15px auto; border-collapse: collapse; border: 1px solid #2a2a2a; }
#oprlist td { border: 1px solid #2a2a2a; padding: 7px 10px; text-align: center; }
#oprlist a { color: #000000; cursor: pointer; }



#pda2r { margin: 15px auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#pda2r td { width: 293px; border: 1px solid #aaaaaa; }
#pda2r td:first-child { padding: 6px 0; }
#pda2r textarea { height: 70px; width: 271px; margin: 2px; }
#pda2r input { width: 281px; margin: 2px; }
#pda2r #justify { padding: 3px 5px; text-align: justify; }



#pda3c { margin: 15px auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#pda3c th { height: 25px; width: 273px; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#pda3c th:first-child { width: 20px; }
#pda3c th, #pda3c td { border: 1px solid #aaaaaa; }
#pda3c td { height: 25px; text-align: center; }
#pda3c textarea { height: 70px; width: 261px; margin: 2px; }
#pda3c #justify { padding: 3px 5px; text-align: justify; }



#pda3c2 { margin: 15px auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#pda3c2 th { height: 25px; width: 242px; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#pda3c2 th:first-child { width: 80px; }
#pda3c2 th, #pda3c2 td { border: 1px solid #aaaaaa; }
#pda3c2 td { height: 25px; text-align: center; }
#pda3c2 textarea { height: 70px; width: 230px; margin: 2px; }
#pda3c2 #justify { padding: 3px 5px; text-align: justify; }



#solist { margin: auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#solist th { background-color: #e9e9e9; font-weight: bold; text-align: center; }
#solist th:first-child { width: 100px; }
#solist th:nth-child(2) { width: 394px; }
#solist th:nth-child(3) { width: 80px; }
#solist th, #solist td { padding: 6px 0; border: 1px solid #aaaaaa; }
#solist td { text-align: center; }
#solist td:nth-child(2) { padding-left: 5px; text-align: left; }



#soprofile { margin: auto; margin-bottom: -10px; }
#soprofile td { padding-bottom: 10px; }
#sopda { margin: 0 auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#sopda th { width: 90px; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#sopda th:nth-child(2) { width: 130px; }
#sopda th, #sopda td { padding: 6px 0; border: 1px solid #aaaaaa; }
#sopda td { text-align: center; }



#sopda2 { margin: auto; border-collapse: collapse; border: 1px solid #aaaaaa; }
#sopda2 th { width: 90px; background-color: #e9e9e9; font-weight: bold; text-align: center; }
#sopda2 th:nth-child(3), #sopda2 th:nth-child(4) { width: 130px; }
#sopda2 th, #sopda2 td { padding: 6px 0; border: 1px solid #aaaaaa; }
#sopda2 td { text-align: center; }



















@media screen and (min-width: 600px) {
	#blackout { display: none; }
}



@media screen and (max-width: 599px) {
	header, section { display: none; }
	#blackout { margin-top: 20px; text-align: center;	}
}