/* --- global styles --- */

.warning
{
    color:Red;
}
.faq
{
    padding-top:20px;
}

.faq dt
{
    padding:5px;
    font-weight:bold;
    color:#190c6c;
}

.faq dd
{
    padding:5px;
    padding-left:15px;
    font-size:14px;
}

html, body { background-color: #1C016A; font-family: Verdana, sans-serif; }

input.button {background: url(../images/student-button-bg.png) top left repeat-x;}

table { border-collapse: collapse; }

sup {vertical-align: super; font-size: 75%;}

td { font-family: Verdana, sans-serif; }
.page-content { background-color: white; overflow: hidden; margin-bottom: 20px; height: 100%;}
body.stripes5 .page-content {background: white url(../images/5stripes.jpg) top right repeat-y; padding: 0;}
body.stripes3 .page-content {background: white url(../images/3stripes.jpg) top right repeat-y; padding: 0;}
body.stripes2 .page-content {background: white url(../images/2stripes.jpg) top right repeat-y; padding: 0;}
body.stripes1 .page-content {background: white url(../images/1stripe.jpg) top right repeat-y; padding: 0;}

body.stripes5 .main-content {float: left; width: 520px; padding: 20px;}
body.stripes3 .main-content {float: left; width: 680px; padding: 20px;}
body.stripes2 .main-content {float: left; width: 760px; padding: 20px;}
body.stripes1 .main-content {float: left; width: 840px; padding: 20px;}
body.stripes0 .main-content {float: left; width: 920px; padding: 20px;}
body.stripes5 .aside {float: right; width: 400px;}
body.stripes3 .aside {float: right; width: 240px;}
body.stripes2 .aside {float: right; width: 160px;}
body.stripes1 .aside {float: right; width: 80px;}

h1 {font-size: 16px; color: #007b99; line-height: 24px;}
h1 span {color: #1d026b;}

h2 {font-size: 14px; line-height: 24px; color: #190c6c; padding: 5px; background: white url(../images/heading-bg.jpg) top left repeat-x;}


h3 {font-size: 12px; line-height: 28px; color: #190c6c; }
h3 span {padding: 10px 0 10px 0px;}

p {line-height: 18px; padding: 6px 0;}

div.help { color: #1d026b; margin: 0 0px 10px; font-size: 14px; }

.hidden {display: none;}

.button {
	padding: 0 15px 5px; height: 34px; border: none;
	color: white; font-weight: bold;
}
span.button-alternative {display: inline-block; margin-bottom: 10px;}

div.page-wrapper {width: 965px; margin: 0 auto;}

.page-header { position: relative;  height: 64px;
    background: url(../images/a2om-logo.jpg) top left no-repeat }

.page-header a { color: white; text-decoration: none; font: bold 14px Arial, Helvetica, sans-serif; }

.page-header .nav ul.account {float: right;}
.page-header .nav ul.account li { padding: 4px 10px 0px 10px; }
.page-header .nav ul.account a { font-size: 13px; }
#account { border-right: 1px dotted white; }

.page-header .nav ul li {float: left;}

.page-header .nav ul.main { height: 40px; position: absolute; right: 0; bottom: -3px; padding-bottom: 3px;}
.page-header .nav ul.main li {height: 39px;border-bottom: 1px solid #1c016a;}
.page-header .nav ul.main li a {
	display: inline-block;
	height: 100%; padding: 0 12px;
	background: url(../images/joiner.gif) right bottom no-repeat;
}
.page-header .nav ul.main li > a {
	display: block;
}
.page-header .nav ul.main li a span {display: block; padding-top: 13px;}
.page-header .nav ul.main li.last a, .page-header .nav ul.main li.current a { background: none; }
	
body.page-header .nav ul.main li.current {
    background:url(../images/nav-selected.gif) top left no-repeat;
    margin-left: -1px; z-index: 20;
}
.page-header .nav ul.main li.current a {
	background: url(../images/nav-selected.gif) top right no-repeat;
}

body .page-header .nav ul.main li.extra-nav, body.private.student .page-header .nav ul.main li.extra-nav {
	background: url(../images/extra-nav-bg.jpg) repeat-x;
}
ul.main li.extra-nav.last {margin-right: 0px;}
.nav ul.main li.extra-nav.current {background-color: #666;}

.nav ul.main {background: url(../images/nav-shadow-0.png) bottom right no-repeat;}
body.stripes5 .nav ul.main { background: url(../images/nav-shadow-5.png) bottom right no-repeat}
body.stripes3 .nav ul.main { background: url(../images/nav-shadow-3.png) bottom right no-repeat}
body.stripes2 .nav ul.main { background: url(../images/nav-shadow-2.png) bottom right no-repeat}
body.stripes1 .nav ul.main { background: url(../images/nav-shadow-1.png) bottom right no-repeat}

.note {font-size: 14px;}

table {margin-bottom: 13px;}
th {padding: 13px 10px;}
td {padding: 10px; vertical-align: middle;}

th {background-color: #e5e3ee; border: 1px solid white; color: #1a036d; font-weight: bold;}
td {background-color: #f4f3f8; border-bottom: 1px solid white; color: #190469;}

td .button {margin: -6px 0;}

div.flash { background: #922; margin: 10px 0 20px; padding: 10px 15px; color: white; font-weight: bold; }


table.calendar td.calendar-heading {text-align: center; line-height: 16px;}
table.calendar td.calendar-heading span {font-size: 16px; font-weight: bold; color: white;}
table.calendar { margin-top: 60px; }
table.calendar td, table.calendar th { border-width: 0px; }
table.calendar th, table.calendar td {font-size: 11px;}
table.calendar th { padding: 8px 5px; text-align: center; color: white; }
table.calendar td { background: white; padding: 8px 5px; text-align: center;}
table.calendar td.other-month { color: #bbb; }
.calendar-heading #previous-month {float: left;}
.calendar-heading #next-month {float: right;}

.calendar-heading a {width: 25px; height: 29px;}
.calendar-heading a span {display: none;}

div.field-with-errors { border-bottom: 3px solid red; display: inline-block; }

div.panel {border: 1px solid #ededed; background: #fbfbfb; padding: 10px; margin: 20px 0;}
div.panel table {border: none;}
div.panel table tr, 
div.panel table tr td, 
div.panel table tr th {
	background: none;
	border: none;
}

div.tabbed-panel { margin: 20px 0; width: 100%; clear: both; }
div.tabbed-panel h1 { padding-left: 5px; }
div.tabbed-panel div.section { border: 1px solid #c2bed5; padding: 20px; z-index: -10; }
div.tabbed-panel div.nav { overflow: hidden; height: 38px; margin-bottom: -1px; z-index: 10; }
div.tabbed-panel div.nav ul { float: right;}
div.tabbed-panel div.nav ul li {
    float: left;
    position: relative; /* force IE to bring the tab to the top */
    height: 38px;
    background: url(../images/tab-bg.jpg) repeat-x; z-index: 10;
}

div.tabbed-panel div.nav ul li.current {background: url(../images/tab-bg-current.jpg) repeat-x;}

div.tabbed-panel div.nav ul li a {
    display: inline-block; 
    z-index: 20; 
    text-decoration: none; height: 38px; width: auto;
    background: url(../images/tab-bg-left.jpg) top left no-repeat;
}
div.tabbed-panel div.nav ul li > a { height:38px; display: block; }
div.tabbed-panel div.nav ul li a span {
    display: block; 
    background: url(../images/tab-bg-right.jpg) top right no-repeat;
}
div.tabbed_panel div.nav ul li a > span { display: block; }

div.tabbed-panel div.nav ul li a span span {
    width: auto; height: auto; padding: 12px 20px; color: #1c0466; font-size: 14px; cursor: pointer;
}
div.tabbed-panel div.nav ul li a span > span {
    display: block;
}
div.tabbed-panel div.nav ul li.current a {font-weight: bold;
    background: url(../images/tab-bg-current-left.jpg) top left no-repeat;
}
div.tabbed-panel div.nav ul li.current a span {
	background: url(../images/tab-bg-current-right.jpg) top right no-repeat;
}

div.tabbed-panel div.section ul {border: none; }

div.tabbed-panel div.section ul li {display: block; float: none; border: none; padding: 0;}

.overview h2 {background: none; border-top: 1px dotted #B5B2CB;}
.overview h2.top {border: none;}

body div.tabbed-panel div.welcome {padding: 20px; font-size: 120%; line-height: 150%;}
body div.tabbed-panel div.welcome ul {list-style-type: disc; margin-left: 30px;}
body div.tabbed-panel div.welcome ul li {display: list-item; padding-bottom: 5px;}

div.panel-intro {padding: 10px 0 0;}

div.tabbed-panel h1 {float: left;}

.no-events-message, p.overview, div.e-learning-status {padding-left: 20px;}
.e-learning-status em {font-weight: bold;}

div.events {float: left;}
div.events p {padding-bottom: 20px;}
div.events div.section {padding: 0;}
div.events p.note {padding-left: 20px;}
ul.events li div.card {
	width: 676px; /*height: 86px;*/ margin: 0 1px;
	position: relative; overflow: hidden;
	background: url(../images/event-card-bg.jpg) repeat-x;
}
ul.events li div.card div {float: left; padding: 10px;}
ul.events li div.card div p {padding: 5px; line-height: 1em;}
ul.events li div.card img {position: absolute; top: 15px; left: 10px;}
div.event-type {
	width: 80px; height: 66px;
}
ul.events li div.card div.event-type p {
    padding-left: 35px;
    font-size: 12px; font-weight: bold; color: #190171; line-height: 16px;
}
div.event-detail {width: 210px;}
div.event-detail p.date {font-size: 12px; color: #190171;}
div.event-detail p.event-type {font-size: 12px; font-weight: bold;}
div.event-links {position: absolute; top: 3px; right: 5px; font-size: 11px;}
.event-location {width: 280px; /*height: 60px; overflow: hidden;*/}

span.month-links a {padding: 0 10px; font-style: normal; font-size: 14px; color: #231585; text-decoration: none;}

/* --- generic styling --- */
div.inbox a.compose-link {float: right; margin-top: 9px; padding: 3px 0;}

div.message {background: white url(../images/h-dashed-line.jpg) bottom left repeat-x;}
div.message table {width: 100%;}
div.message table tr th {text-align: right; color: black; width: 50px;}
div.message table tr th, div.message table tr td {border-bottom: none; vertical-align: top; padding: 10px 15px; background-color: white;}

div.message .delete-button {float: right;}
div.message h2 span, div.inbox h2 span { padding-left: 10px; }

div.message textarea {width: 100%;}
div.message td span {padding: 0;}
div.message table form.button-to {display: inline;}
input.message-subject {width: 300px;}
a.message-reply {display: block; float: left; padding-top: 4px; padding-right: 30px;}

td.message-subject {width: 50%;}

div.error-messages h2 {background: none;}

.messages tr.unread td {font-weight: bold;}

/* --- Star Ratings --- */

div.star-rating { overflow: hidden; height: 100%; }
div.star-rating span { display: block; float: left; width: 20px; height: 20px;
  overflow: hidden; text-indent: 100px; padding: 0 3px; 
}
div.star-rating span.selected { background: url(../images/selected-star.gif) no-repeat; }
div.star-rating span.unselected { background: url(../images/unselected-star.gif) no-repeat; }
body.driving-feedback td { vertical-align: middle; padding: 5px; }
body.driving-feedback tr { height: 35px; }
body.driving-feedback thead tr { height: auto; }
body.driving-feedback th.competence-heading {border-bottom: none; border-right: none;}
body.driving-feedback .rating-heading th {
	border: none; border-bottom: 1px solid white; padding: 0px 10px 10px;
	font-size: 11px; font-weight: normal;
}


/* Login pages */
body.login-page form {
	background: url(../images/heading-bg.jpg) top left repeat-x;
	padding-top: 30px; overflow: hidden;
}
body.login-page th {text-align: right; color: black; width: 138px;}
body.login-page th, body.login-page td {background: white;}
body.login-page table {margin-left: 80px; width: 500px;}
body.login-page .field-list input {width: 250px;}
body.login-page .field-list select {width: 250px;}
body.login-page .submit-button {float: right;  margin: 10px 180px 40px; clear: both;}
body.login-page a.forgotten-password {float: right; margin: 0 180px 10px; font-size: 11px;}
body.login-page .signup { clear: both;}

/* --- Alerts --- */

div.alert { 
  background: #ffffcb; border: 1px solid #c7c2da; 
  padding: 5px; border-bottom: 3px solid #b8bac5;
  margin-bottom: 4px;
}
div.alert .delete-button { float: right; 
    border: none; background: url(../images/alert-delete.png) center no-repeat; 
    width: 12px; height: 12px;
    padding: 0;
    overflow: hidden; text-indent: -300px;
    cursor: pointer;
}

/* --- E Learning Table --- */

table.e-learning-overview td.deadline-passed {
  color: red; font-weight: bold;
}
table.e-learning-overview td.deadline-passed.passed {
  color: green; font-weight: normal;
}

/* --- Ajax Spinner --- */

#ajax-progress {
  background: white url(../images/spinner.gif) no-repeat 10px;
  padding-left: 20px; 
  border: 2px solid #BDBAD7;
}


/* --- site wide footer --- */

.page-footer { color: #666; text-align: center; }