/* Main stylesheet */
/*Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

body {
  font: 62.5%/1.4 Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    background: #f0cab2 url(images/body-bg.jpg) center top no-repeat;
  text-align: center;
}

.notice-wrap {
	position: fixed;
	top: 50px;
	right: 50px;
	width: 350px;
	z-index: 9999;
}

* html .notice-wrap {
	position: absolute;
}

.notice-item {
	height: 60px;
	background: #e8ab8b;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
    behavior: url(css/PIE.htc);
	color: #000;
	padding: 6px 6px 0 6px;
	font-size: 14px;
	border: 2px solid #999;
	display: block;
	position: relative;
	margin: 0 0 12px 0;
}

.notice-item-close {
	position: absolute;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	right: 6px;
	top: 6px;
	cursor: pointer;
}
#wrapper {
	width: 960px;
	margin: 0 auto;
	text-align:left;
	font-size:1.4em;
}

#header {
}
	#header h1 {
		font-size: 20px;
        padding-top: 15px;
        padding-bottom: 1px;
		color: #660000;
        padding-left: 20px;
        text-align: center;
	}
	#header h2 {
		font-size: 16px;
        padding-top: 5px;
		color: #000;
        padding-left: 20px;
        text-align: center;

	}
    #header a {
        position: absolute;
        width: 120px;
        height: 15px;
        padding: 5px;
        text-align: center;
        display: block;
        border: 1px solid black;
        background: #e8ab8b url("images/home-btn-bg.jpg") center no-repeat;
        top: 10px;
        left: 810px;
        color: #000;
        font-size: 14px;
        text-decoration: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        behavior: url(css/PIE.htc);
    }

#login_form_wrapper{
    width: 360px;
    margin-left: 300px;
    margin-top: 50px;
    font-size: 17px;
        text-align: center;
}
#login_form_wrapper h2 {
    font-size: 24px;

    padding-bottom: 20px;
}
#login_form_wrapper input {
    font-size: 17px;
    margin-top: 10px;
}

#content {
    position: relative;
}

.home_btn {
    overflow: hidden;
    background: #e8ab8b url("images/home-btn-bg.jpg") center no-repeat;
    border: 3px solid #000;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(css/PIE.htc);
}

#home_navigation {
    margin-top: 30px;
}
#home_navigation li {
    display: block;
    float: left;
    width: 180px;
    height: 40px;
    padding: 10px;
    margin-left: 85px;
}

#home_navigation li a {
    display: block;
    padding-left: 70px;
    height: 48px;
    font-size: 28px;
    color: #000;
    text-decoration: none;
}
#home_navigation li a:hover {
    color: #666;
}

#dashboard_ce_entry a {
    background: url(images/pen.png) 0 -5px no-repeat;
}
#dashboard_reports a {
    background: url(images/list.png) 0 -5px no-repeat;
}
#dashboard_settings a {
    background: url(images/settings.png) 0 -5px no-repeat;
}

/* Settings */
#header h1.h1_settings {
    background: url(images/settings.png) 390px 40px no-repeat;
    text-align: left;
    font-size: 28px;
    color: #000;
    padding-left: 450px;
    padding-top: 50px;
}

#top{
    overflow: hidden;
    margin-top: 30px;
}
#navigation{
    width: 150px;
    padding-right: 10px;
    float: left;
}
#top-content{
    float: left;
    width: 640px;
    font-size: 14px;
    overflow: hidden;
}

#settings_form label, #settings_form input{
    display: inline-block;
}
#settings_form label{
    text-align: right;
    width: 300px;
    margin: 5px 10px 5px 0;
}

#settings_form label.error {
    display: block;
    margin-left: 320px;
    color: #ff0000;
    text-align: left;
}
#site_name {
    width: 300px;
    font-size: 14px;
}

#emt_require, #paramedic_require {
    width: 50px;
    font-size: 14px;
}

#navigation a, #update_settings, #clear_entry, #submit_entry, #entry_undo, #entry_ok, #reports_by_individual, #reports_full_personnel, #print {
    overflow: hidden;
    display: inline-block;
    background: #e8ab8b url("images/home-btn-bg.jpg") center no-repeat;
    border: 3px solid #000;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(css/PIE.htc);
    padding: 10px;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    height: 20px;
    font-weight: bold;
    text-align: center;
}
#navigation a {
    width: 100px;
}
#update_settings {
    margin-left: 80px;
    vertical-align: top;
}

#bottom-content-header{
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
#bottom-content-header h2{
    width: 300px;
    float: left;
    font-size: 24px;
}
#bottom-content-header a {
    overflow: hidden;
    display: block;
    float: left;
    margin-left: 330px;
    width: 240px;
    background: #e8ab8b url("images/home-btn-bg.jpg") center no-repeat;
    border: 3px solid #000;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(css/PIE.htc);
    padding: 0 10px 10px 10px;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    height:18px;
    font-weight: bold;
    text-align: center;
}

.person-wrapper {
    margin-bottom: 10px;
}

.person-header {
    height: 20px;
    overflow: hidden;
    background: #0000cc;
    border: 3px solid #000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(css/PIE.htc);
    padding: 10px;
    font-size: 18px;
    color: #cccccc;
}

.person-name{
    width: 400px;
    float: left;
    margin-left: 20px;
}

.person-expiration {
    width: 300px;
    float: left;
    margin-left: 190px;
}

.person-header a {
    display: block;
    margin-top: -15px;
    color: #ccc;
    font-size: 36px;
    text-decoration: none;
}
.person-header a:visited {
    color: #ccc;
}
span.person-expiration-date {
    color: #fff;
}

.person-details {
    margin: 0 50px 20px 50px;
    background: #fff;
    overflow: hidden;
    border: 3px solid #000;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-radius: 0 0 10px 10px;
    behavior: url(css/PIE.htc);
    border-top: none;
    font-size: 16px;
    padding: 10px;
    display: none;
}

.details-state-label, .details-county-label {
    display: inline-block;
    width: 200px;
}
.details-state, .details-county {
    display: inline-block;
    width: 100px;
    border: 2px solid #666;
    padding: 0 10px;
    margin: 5px 0;
}

.is_emt_label, .is_paramedic_label {
    display: inline-block;
    width: 100px;
    margin-left: 300px;
    text-align: right;
}

.person-periods {
    float: left;
    margin-top: 30px;
    width: 400px;
    margin-left: 200px;
}

.current-period {
    margin-bottom: 20px;
}
.current-period-label {
    color: #ff0000;
}

.current-period input {
    border: none;
    font-size: 16px;
    width: 120px;
}
.previous-period-label {
    color: #666;
}
div.add-period
{
    float: left;
    margin-top: 30px;
    width: 180px;
}
.add-period a {
    text-decoration: none;
    color: #0000ff;
}

.add-period a:visited {
    color: #0000ff;
}

.add-period-start {
    display: none;
    text-align: center;
}
.add-period-start a {
    overflow: hidden;
    display: block;
    width: 100px;
    margin: 10px auto;
    background: #e8ab8b url("images/home-btn-bg.jpg") center no-repeat;
    border: 3px solid #000;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(css/PIE.htc);
    padding: 0 10px 10px 10px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    height:14px;
    font-weight: bold;
    text-align: center;
}

.inline_edit {
    width: 100px;
}
.add-period-start span {
    font-size: 11px;
    color: red;
}

#add-person-wrapper {
    display: none;
    font-size: 16px;
}

#add-person-wrapper input, #add-person-wrapper label{
    font-size: 16px;
    display: inline-block;
    margin-bottom: 10px;
}
#add-person-wrapper label.error {
    color: #ff0000;
}
#add-person-wrapper label{
    width: 180px;
}

#first_name, #last_name, #expiration, #period_end {
    width: 250px;
    margin-right: 20px;
}
#state_license, #county_license {
    width: 100px;
    margin-right: 170px;
}

#add_person{
    overflow: hidden;
    display: block;
    width: 100px;
    margin: 10px auto 20px;
    background: #e8ab8b url("images/home-btn-bg.jpg") center no-repeat;
    border: 3px solid #000;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(css/PIE.htc);
    padding: 0 10px 10px 10px;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    height:18px;
    font-weight: bold;
    text-align: center;
}


/* ce entry*/
#header h1.h1_entry {
    background: url(images/pen.png) 390px 40px no-repeat;
    text-align: left;
    font-size: 28px;
    color: #000;
    padding-left: 450px;
    padding-top: 50px;
}
#top-content h2{
    margin: 40px 0 10px 0;
    text-align: center;
    font-size: 24px;
}
#top-content h3{
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 18px;
}
#entry_form table{
    width: 100%;
}
#entry_form td, #entry_form th{
    padding: 10px 20px 0 20px;
    font-size: 16px;
    text-align: center;
}

#entry_form input{
    width: 100%;
    font-size: 16px;
}
#entry_form th {

    font-weight: bold;
}
.col-1 {
    width: 160px;
}
.col-2{
    width: 160px;
}
.col-3{
    width: 420px;
}
.col-4 {
    width: 60px;
}

#entry-persons{
    width: 400px;
    margin: 20px 280px;
}
#entry_form h3{
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
}
#entry-persons label {
    display: inline-block;
    width: 40px;
    padding-right: 10px;
    text-align: right;
    margin: 8px 0;
}
#entry-persons input.entry_person_name {
    width: 340px;
}
#entry_form input.error {
    background: #ff0000;
    color:#000;
}
#add_more {
    display: block;
    width: 200px;
    text-align: right;
    margin: 0 0 20px 480px;
}

#clear_entry{
    width: 100px;
    margin-left: 372px;
}
#submit_entry {
    width: 100px;
    margin-left: 50px;

}
.ui-autocomplete {
    font-size: 16px;
}

#entry_dome{
    display: none;
    font-size: 16px;

}
#entry_dome h2{
    text-align: center;
    font-size: 24px;
}
#entry_dome h2 span{
    color: #ff0000;
}
#entry_dome h3{
    text-align: center;
    font-size: 20px;
}
#entry_dome ul{
    display: block;
    width: 200px;
    margin: 20px 380px;
}
#entry_dome ul span{
    display: inline-block;
    color: #666;
    margin-right: 10px;
}
#entry_undo {
    width: 150px;
    margin-left: 10px;
}
#entry_ok{
    width: 150px;
    margin-left: 540px;
}
#date_done, #provider_done, #title_done, #hours_done {
    color: #666;
}

/* Reports */
#header h1.h1_reports {
    background: url(images/list.png) 390px 40px no-repeat;
    text-align: left;
    font-size: 28px;
    color: #000;
    padding-left: 450px;
    padding-top: 50px;
}

#reports_by_individual{
    width: 180px;
    margin-left: 200px;
} 
#reports_full_personnel{
    width: 200px;
    margin-left: 100px;
    
}

h3.h_reports {
    font-size: 18px;
    text-align: center;
    text-decoration: underline;
}

ul.persons_list{
    width: 200px;
    margin-left: 380px;
    font-size: 16px;
    margin-top: 20px;
}

ul.persons_list a {
    color: #000;
}
ul.persons_list a:hover {
   background: #333;
    color: #fff;
}

/* Individual report */
#top-content h2.individual_header {
    margin-top: 0;
}
h2.h_reports {
    font-size: 24px;
    text-align: center;

}
.report_label {
    display: inline-block;
    font-size: 18px;
    color:#666;
    width: 200px;
    margin-left: 100px;
    text-align: right;
}

.report_value {
    display: inline-block;
    font-size: 18px;
    width: 100px;
    margin-left: 10px;
}


.period-wrapper {
    margin-bottom: 10px;
}

.period-header {
    height: 20px;
    overflow: hidden;
    background: #0000cc;
    border: 3px solid #000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(css/PIE.htc);
    padding: 10px;
    font-size: 18px;
    color: #fff;
}

.period-dates{
    width: 440px;
    float: left;
    margin-left: 20px;
}
.period-dates span, .period-total span {
    color: #ccc;
}
.period-total{
    width: 200px;
    float: left;
    margin-left: 20px;
}
.period-remaining{
    width: 200px;
    float: left;
    margin-left: 20px;
}
.period-remaining span{
    color: pink;
}

.period-header a {
    display: block;
    margin-top: -15px;
    color: #ccc;
    font-size: 36px;
    text-decoration: none;
}
.period-header a:visited {
    color: #ccc;
}


.period-details {
    margin: 0 50px 20px 50px;
    background: #fff;
    overflow: hidden;
    border: 3px solid #000;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;

    border-radius: 0 0 10px 10px;
    behavior: url(css/PIE.htc);
    border-top: none;
    font-size: 16px;
    padding: 10px;
    display: none;
}

.period-details table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}
.period-details td {
    border: 2px solid #333;
    padding: 3px;
    background: #ddd;
}
.period-details th {
    text-align: center;
}

.period-person-name{
    width: 200px;
    float: left;
    margin-left: 20px;
    color:#ccc;
}

.period-expiration{
    width: 200px;
    float: left;
    margin-left: 20px;
    color:#ccc;
}
.period-expiration span{
    color: #fff;
}

.period-header a.report_link{
    font-size: 18px;
    margin: 0 0 0 20px;
}

.full_report_label {
    display: inline-block;
    font-size: 18px;
    color:#666;
    width: 200px;
    margin-left: 340px;
    text-align: right;
}

.full_report_value {
    display: inline-block;
    font-size: 18px;
    width: 100px;
    margin-left: 10px;
}

h3.h_full_report{
    font-size: 20px;
    margin: 0 0 10px 20px;
}

#print_menu {
    width: 150px;
    padding-left: 10px;
    float: left;
}

#print {
    width: 100px;
}

#print_options {
    display: none;
    position: absolute;
    top:44px;
    left: 790px;
    z-index: 10;
    /*background: #e8ab8b;*/
    background: #fff;
    padding: 10px;
    width: 140px;
    border: 2px solid black;
    text-align: center;
    font-size: 14px;
}
#print_options li{
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #000;
}
#print_options a{
    text-decoration: none;
    color: #000;
}
@media screen {
    .print_only {
        display: none;
    }

}
@media print {
    #navigation a {
        visibility: hidden;
    }
    #print {
        display: none;
    }
    .no_print, #header a {
        display: none;
    }
    .period-details {
        display: block;
    }
}