/**********************************
  Common Elements v1.0
**********************************/

body {
	padding: 0;
    padding-bottom: 25px;
	margin: 0;
	font: 80% arial, helvetica, sans-serif;
	background: white url(../images/bg.gif) top left repeat;
}

a {
	color: #214f80;
}

a:hover {
	color: #802121;
	text-decoration: none;
}

pre, textarea {
	font-size: 115%;
}

img {
	display: inline;
}

.clear {
	clear: both;
}

#content h1 {
	font-weight: bold;
	font-size: 2.0em;
	padding: 3px 20px;
	margin: 8px 0;
	color: #214f80;
	
	border-bottom: 1px solid #214f80;
	background: white url('../images/header.gif') no-repeat right top;
}

#content h2 {
	font-weight: normal;
	font-size: 1.6em;
	padding: 8px 28px 0 28px;
	margin: 12px 0 8px 0;
	color: #214f80;
}

#content h3 {
	font-weight: normal;
	font-size: 1.2em;
	padding: 8px 30px 0 30px;
	margin: 10px 0 8px 0;
	color: #214f80;
	font-weight: bold;
}

#content strong {
	font-weight: bold;
	color: #802121;
}

#content form {
	padding: 0;
	margin: 0;
}

#content p {
	padding: 0 40px;
	margin: 0 0 8px 0;
}

#content .centertext, #content .centertext h2, #content .centertext h3 {
	text-align: center;
}

#content .centertext h2, #content .centertext h3 {
	padding-left: 5px;
	padding-right: 5px;
}

#content {
	zoom: 1.0;
}


/**********************************
  Big Table
**********************************/

#content table {
	clear: right;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

#content td {
	padding: 1px 2px;
	margin: 0;
}

#content th, th a {
	padding: 2px;
	padding-top: 0;
	text-align: left;
	color: #888888;
	font-weight: bold;
}

#content td {
	border-top: 1px solid #CCCCFF;
}


/**********************************
  Formular
**********************************/

.textfield,
.selectfield {
	margin: 3px 2px;
}

.checkfield {
	margin: 2px;
}

.checkfield label, .radiofield label {
	padding: 0;
	vertical-align: 1px;
}

.checkfield input {
	padding: 0;
}

.textfield input, textarea, select {
	border: 1px solid;
	border-color: #666 #ccc #ccc #666;
}

.textfield label.invalid {
	color: red;
	font-weight: bold;
}

span.required {
	font-weight: normal;
	color: #A00;
}

/* Classic Style */

form.classic .textfield label,
form.classic .selectfield label,
form.classic .linkfield div {
	float: left;
	margin: 0;
	padding: 2px 6px 2px 2px;
	width: 205px;
	height: 18px;
	text-align: right;
}

form.classic .checkfield,
form.classic .radiofield,
form.classic .selectfield,
form.classic .linkfield,
form.classic .submitfield {
	padding-bottom: 2px;
}

form.classic .textfield input,
form.classic .selectfield select {
	width: 150px;
	display: block;
}

form.classic .checkfield input,
form.classic .radiofield input,
form.classic .selectfield select,
form.classic .submitfield input {
	padding-left: 5px;
	margin-left: 215px;
}

form.classic .submitfield input {
	width: 150px;
}

#content form.classic .linkfield p {
	padding-top: 2px;
}

form.classic .fieldhelp {
	display: block;
	width: 360px;
	text-align: right;
	color: #999;
	margin-bottom: 10px;
}

form.classic .fieldset {
	float: left;
	width: 380px;
}

form.classic .info {
    display: inline;
	float: right;
    
	width: 340px;
	border: 1px solid #EFE5CC;
	background-color: #FFF5DD;
	padding: 10px;
    margin-right: 25px;
}
    
#content form.classic p.checkfield {
	padding: 0 0 5px 25px;
	margin: 0 20px 5px 205px;	
}

form.classic p.required {
	text-align: right;
}


/**********************************
  General Layout
**********************************/

#container {
	width: 1000px;
	margin: 0 auto;
}

#header {
	margin-top: 4px;
  padding-top: 4px;
  background: white url(../images/header_top.gif) top left repeat-x;
}

#topmenu {
	display: block;
	height: 36px;
	background: black url(../images/topmenu_default.gif) center center repeat-x;
	border-right: 1px solid black;
}

#topmenu img {
	float: left;
	padding: 0px 20px;
}

#topmenu ul {
	float: left;
  
	overflow: hidden;
	margin: 1px 0px 1px 80px;
	padding: 0;
	border: 0;
	list-style-type: none;
	border-left: 1px solid #888888;
}

#topmenu li {
	float: left;
}

#topmenu li a {
	/* display: block; */
	float: left;

	padding: 9px 15px;
	height: 16px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
	border-right: 1px solid #888888;
}

#topmenu li a:hover, #topmenu li a.current {
	background: transparent url(../images/topmenu_active.gif) center center repeat-x;
}

#subheader {
	clear: both;
	background: #2c68a7 url(../images/subheader_bg.gif) top left repeat-x;	
}

#submenu {
	margin: 0px 5px;
	padding: 4px;
	padding-bottom: 6px;
	height: 16px;
	text-align: center;
	font-size: 1.0em;
	background: #2c68a7 url(../images/subheader_white.gif) top left repeat-x;	
  border-bottom: 1px solid #002b58;
  color: #779;
}

#main {
    clear: both;

    border: 5px solid #2c68a7;
    border-top: 0;
}

#footer {
    border-top: 1px solid #002b58;	
    
	padding: 5px;
	height: 18px;
	margin: 0;
              
	text-align: right;
	color: #888;	
	background-color: white;
}

#footer a {
	padding-left: 6px;
	margin-left: 6px;
	border-left: 1px solid #AAA;
	color: #2c68a7;
}

#footer a:hover {
	text-decoration: none;
	color: #002b58;
}

/**********************************
  Layout Nav Left
**********************************/

.main_navleft {
    background: white url(../images/main_nav_bg_grad.gif) top left repeat-y;	
}

.main_navleft #content {
	float: left;

    margin: 0;
    min-height: 400px;    
    width: 788px;	
	padding: 0 6px;
    height: 1%;
    
	background-color: white;
    border-left: 1px solid #cdcdcd;
}

#nav {
	float: left;
	width: 169px;
	padding: 10px;
}

#nav h2 {
	margin: 0;
	font-size: 1.0em;
	font-weight: bold;
	color: #FFF;

	padding: 3px 7px;
	border-bottom: 1px solid #97b1cb;
	background-color: #58A;
}

#nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
 	border: 1px solid #97b1cb;
	border-bottom: 0;
}

#nav ul ul {
	border: 0;
	margin: 0;	
}

#nav li {
	padding: 0;
	margin: 0;
	border: 0;
}

#nav li a {
	display: block;

	padding: 3px 7px;
	height: 24px; /* for IE */
	hei\ght: 17px;
	margin: 0;

	color: #002b58;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.0em;
	border-bottom: 1px solid #97b1cb;
}

#nav li li li a {
	padding-left: 15px;
}

#nav li a:hover {
	background: white;
	color: black;
}

/**********************************
  Layout Center Box
**********************************/

.main_centerbox {
	padding: 80px 0 0 0;
	background: #83a1c1 url(../images/bg_centerbox.gif) top left no-repeat;
}

.main_centerbox #content {
	margin: 0 auto 80px auto;
	width: 400px;
	min-height: 200px;
	padding: 15px;
	background-color: white;
	border: 1px solid #57a;
}

.main_centerbox #content h1 {
	text-align: center;
	margin-bottom: 10px;
	padding: 5px 0 5px 0;
	color: #57a;
	border-bottom: 1px solid #57a;
	
	background: white url('../images/header.gif') no-repeat center top;
}

.main_centerbox #content form {
	text-align: right;
	margin: 20px 90px 20px 0;
}

.main_centerbox #content input {
	width: 150px;
}

.main_centerbox #content p {
	padding: 0 5px;
	margin: 0 0 8px 0;
}

.main_centerbox #content .textfield {
	margin: 5px;
}

.main_centerbox #content .submitfield {
	margin: 5px;
	margin-right: 57px;
}

.main_centerbox #content .submitfield input {
	width: 100px;
}

/**********************************
  Inbox v1.0
**********************************/

/* Layout */

.selectors {
	margin: 15px 20px 0px 7px;
	padding: 0 0 2px 0;
	float: right;
	text-align: right;
}

.selectors .textfield input {
	width: 80px;
	text-align: center;
}

#multiaction {
	float: left;
	padding: 5px;
	margin-top: 5px;
	width: 300px;
}

#content #multiaction p {
	float: left;
	padding: 10px 0 0 5px;
}

#multiaction div {
	float: right;
}

#multiaction img {
	display: inline;
	border: 0;
}

#multiaction span {
	vertical-align: 2px;
}

#multiaction a {
	display: block;
	text-decoration: none;
	margin-bottom: 5px;
}

#multiaction a:hover {
	text-decoration: underline;
}

#bottomlinks {
	float: right;
	margin-top: 20px;
	padding-right: 20px;
}


/* Inbox Table */

tr.altham1 { background-color: #d8eaff; }
tr.altham2 { background-color: #e6f2ff; }
tr.altspam1 { background-color: #ffead8; }
tr.altspam2 { background-color: #fff2e6; }
tr.altgray1 { background-color: #feffd9; }
tr.altgray2 { background-color: #f8faca; }
tr.altwhite1 { background-color: #f6f9ff; }
tr.altwhite2 { background-color: #f0f3f9; }

td.check {
	width: 20px;
}

td.subject {
	width: 370px;
}

td.subject label {
	display: block;
	
	padding: 0;
	margin: 0;
	width: 100%;
}

td.sender {
	width: 200px;
}

td.date {
	width: 98px;
}

td.spamscore {
	width: 30px;
	text-align: right;
}

td.action {
	width: 50px;
}

td.noresults {
	line-height: 30px;
	text-align: center;
	font-weight: bold;
	color: #555;
}

/* Inbox Table Action Cell */

td.action a.spam {
	background: transparent url(../images/icon_spam.gif) center center no-repeat;
}

td.action a.ham {
	background: transparent url(../images/icon_ham.gif) center center no-repeat;
}

td.action a.white {
	background: transparent url(../images/icon_white.gif) center center no-repeat;
}

td.action div.onwhite {
	float: left;
	
	width: 18px;
	height: 18px;
	padding: 0px 2px;
	background: transparent url(../images/icon_onwhite.gif) center center no-repeat;
}

/**********************************
  Whitelist
**********************************/

td.action a.delete {
	background: transparent url(../images/icon_delete.gif) center center no-repeat;
}

#whitelist #multiaction {
	width: 330px;
}

#whitelist #multiaction p {
	padding-top: 0;
}


/**************************
  DatePicker v1.0
**************************/

/* the div that holds the date picker calendar */
.dpDiv {}

/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #eef2f6;
	border: 1px solid #AAAAAA;
}

/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {}

/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {}

/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {}

/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {}

/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #eef2f6;
}

/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
}

/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #98a9ac;
	border: 1px solid #888888;
	cursor: pointer;
	color: white;
}

/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	white-space: nowrap;
}

/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {}

/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {}

/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #BBBBBB;
	border: 1px solid #AAAAAA;
	color: white;
}

/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
}

/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: #4060ff;
	font-weight: bold;
}

/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #eef2f6;
	font-weight: bold;
	padding: 0px;
}

/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #eef2f6;
	font-weight: bold;
}
/**********************************
  Various v1.0
**********************************/

/* SSL Image */
img.infoimage {
	float: right;
	margin: 0 0 5px 5px;
	padding: 0;
	border: 0;
}

/* Small Table */
#content table.small {
	width: 700px;
	margin-left: 40px;
}
#content table.small td {
	padding: 3px;
}

/* Table Action Links */
td.action a {
	float: left;
	
	width: 18px;
	height: 18px;
	padding: 0px 2px;
}

td.action a.edittext {
	width: 80px;
	padding-left: 20px;
	text-align: left;
	background: transparent url(../images/icon_edit.gif) left center no-repeat;	
	white-space: nowrap;
}


/* Centered Submit Button */
#content #singlesubmit {
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
#content #singlesubmit input {
	width: 180px;	
}


/**********************************
  Pages
**********************************/

#content .pages {
    padding-left: 10px;
    margin-top: 15px;
}

#content .pages a {
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
}

#content .pages a:hover {
    text-decoration: underline;
}

#content .pages strong {
    color: #999;
}


/**********************************
  Big Information Box (Overview)
**********************************/

#infobox {
	width: 300px;
	float: right;
	padding: 10px;
	border: 2px solid #EFE5CC;
	background-color: #FFF5DD;
	margin: 20px;
	color: #444;
}

#content #infobox h2 {
	padding: 5px;
	margin: 5px;
	color: #444;
}

#content #infobox p {
	padding: 5px;
	margin: 5px;
}

#content #infobox ul {
	padding: 0 20px 0 35px;
	margin: 0 0 5px 0;
}

/**********************************
  Index Page - Presentation
**********************************/

#index_header {
	background: transparent url('../images/logo.png') no-repeat center top;
	text-align: center;
	padding-top: 230px;
	margin-bottom: 20px;	

	font-size: 130%;
	color: #163;
	font-weight: bold;
}

#index_left {
	width: 50%;
	float: left;
}

#index_right {
	width: 50%;
	float: right;
}

#index_left p, #index_right p {
	font-size: 110%;
	line-height: 130%;
	padding: 5px 35px 20px 35px;
	text-align: justify;
}


/**********************************
  Step by Step Help
**********************************/

#stephelp {
	text-align: center;
}

#stephelp table td {
	text-align: left;
}

#stephelp p {
	margin: 30px;
}

#stephelp img {
	display: block;
	margin: auto;
	margin-bottom: 10px;
}



/**********************************
  Account Wait
**********************************/

#wait {
	margin: 40px 20px;
	text-align: center;
}

#content #wait img {
	margin-bottom: 20px;
}

/**********************************
  Account Table
**********************************/

td.action a.edit {
	background: transparent url(../images/icon_edit.gif) center center no-repeat;
}

td.username {
	font-weight: bold;
}

td.iteration a {
	font-weight: bold;
}

em.ok, em.wait, em.inactive, em.error {
	font-weight: bold;
	font-variant: normal;
}

em.ok {
	color: #070;
}

em.wait {
	color: #770;
}

em.inactive {
	color: #777;
}

em.error {
	color: #700;
}


/**********************************
  Info Box on top of page
**********************************/

#content #info strong {
	color: #226622;
}

#content #info {
	margin: 10px 20px;
	padding: 0 8px;
	border: 2px solid #338833;
	background-color: #CCFF99;
}

#content #info p {
	margin: 8px 0;
	padding: 0;
}


/**********************************
  Form Validation error List-Box
**********************************/

#content .validation {
	padding: 5px;
	margin: 10px;
	border: 2px solid #c77;
	background-color: #fcc;
}

.validation ul {
	padding: 0 20px 0 40px;
	margin: 0;
}

.validation li {
	padding: 0;
	margin: 5px 0;
	font-weight: bold;
}