/* = html
------------------------------------------------------------------------------------ */

body {
	margin: 0;
	padding: 0;
	background: #f3f8ff;
	color: #000;
	font-family: verdana, sans-serif;
	font-size: 62.5%; 
}

p, li, dt, dd, td, th, label, address {	
	font-size: 11px;
	line-height: 15px;	
}

input, select, text-area, legend {
	font-family: verdana, sans-serif;		
	font-size: 11px;
	line-height: 15px;	
}

#content strong {
	font-weight: bold;	
}

#content em {
	font-style: italic;	
}

p, 
table {
	margin: 0 0 15px 0;	
}

table {
	width: 100%;
}

th, td {
	padding: 8px 10px 7px;
	border-left: 1px solid #bacfef;
}

th {
	border-top: 1px solid #bacfef;
	background: #80a7e0;
	color: #fff;
	font-weight: bold;
}

tr.odd td {
	background: #f3f8ff;	
}

tr.last td {
	border-bottom: 1px solid #bacfef;	
}

tr th.last,
tr td.last {
	border-right: 1px solid #bacfef;	
}

h2 {
	margin: 0 0 15px 0;
	border-bottom: 1px solid #000;
	font-size: 13px;
	line-height: 15px;
	font-weight: bold;
}

h3 {
	margin: 0 0 15px 0;
	font-size: 11px;
	line-height: 15px;
	font-weight: bold;
}

h4 {
	margin: 0 0 15px 0;
	font-size: 10px;
	line-height: 15px;
	font-weight: bold;
}

h5 {
	margin: 0 0 15px 0;
	font-size: 9px;
	line-height: 15px;
	font-weight: bold;
}

h6 {
	margin: 0 0 15px 0;
	font-size: 9px;
	line-height: 15px;
	font-weight: normal;
}


/* = global
------------------------------------------------------------------------------------ */

#global {
	float: left;
	width: 100%;
	min-width: 1000px;
}

/* = header
------------------------------------------------------------------------------------ */

#header {
	position: relative;
	float: left;
	width: 100%;
	height: 130px;
	margin: 0 0 20px 0;
	background: #fff;
}

/* = logo 
------------------------------------------------------------------------------------ */

#logo {
	position: absolute;
	left: 0;
	top: 0;		
}

#logo a img {
	float: left;
	width: 220px;	
}


/* = logo-app 
------------------------------------------------------------------------------------ */

#logo-app {
	position: absolute;	
	left: 20%;
	top: 25px;
	margin: 0.5em;
}

#logo-app a img {
	float: left;
	width: 130px;
	margin: 0 1em 0 0;
}

#logo-app h1 {
	margin: 0.5em 0 0 0;
	font-weight: bold;
	font-size: 24px;
	line-height: 20px;
	font-family: arial, helvetica, sans-serif;
}

#logo-app a {
	color: #000;
	text-decoration: none;
}

/* = nav-user
------------------------------------------------------------------------------------ */

#nav-user {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 10px 5px 80px;
	background: #f7faff url(nav-user-bg.gif) 0 0 repeat-y;
	color: #4e77b4;
}

#nav-user li {
	display: inline;	
}

#nav-user a {
	color: #4e77b4;	
}

#nav-user a:hover {
	text-decoration: none;
}

/* = nav-meta 
------------------------------------------------------------------------------------ */

#nav-meta {	
	position: absolute;
	width: auto;
	right: 10px;
	bottom: 8px;
	color: #fff;
	z-index: 100;
}

#nav-meta form {
	float: left;
	margin: 0 20px 0 0;
}

#nav-meta form fieldset {
	float: left;
	width: auto;	
}

#nav-meta form input#search-query {
	float: left;
	margin: 0 5px 0 0;
	border: none;
	width: 160px;
	height: 15px;
	background: #f3f8ff;
	font-size: 11px;
}

#nav-meta form input#search-submit {
	float: left;
	margin: 0;
	border: 1px solid #fff;
	background: #7aa2db;
	color: #fff;
	font-size: 9px;
}

#nav-meta ul {
	float: left;
	width: auto;
}

#nav-meta li {
	display: inline;
}

#nav-meta a {
	color: #fff;
	text-decoration: none;
}

#nav-meta a:hover {
	text-decoration: underline;
}

/* = nav-main 
------------------------------------------------------------------------------------ */

#nav-main {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #1a498b url(nav-main-bg.gif) 0 100% repeat-x;
}

#nav-main ul,
#nav-main li {
	float: left;
	width: auto;	
}

#nav-main ul {
	margin: 0 0 0 20px;	
}


#nav-main li {
	font-size: 12px;
	line-height: 28px;
	font-weight: bold;
	height: 100%;
}

#nav-main a {
	float: left;
	width: auto;
	border-left: 1px solid #fff;
	padding: 0 10px;
	background: #658dc6 url(nav-main-normal-bg2.gif) 0 100% repeat-x;		
	color: #fff;
	text-decoration: none;
}

#nav-main a:hover {
	text-decoration: underline;		
	background: #80a7e0 url(nav-main-normal-bg.gif) 0 100% repeat-x;
}

#nav-main li.last a {
	border-right: 1px solid #fff;
}

#nav-main li.selected a {
	padding: 0 10px 2px;
	background: #cbdaef url(nav-main-selected-bg.gif) 0 100% repeat-x;
	color: #000;
}

#nav-main li.selected a:hover {
	background: #cbdaef url(nav-main-selected-bg.gif) 0 100% repeat-x;	
}

/* = nav-sub
------------------------------------------------------------------------------------ */

#nav-sub {
	float: left;
	width: 20%;
}

#nav-sub div.wrapper {
	padding: 0 20px 0 0;
}

#nav-sub li {
	float: left;
	width: 100%;
	font-size: 11px;
	line-height: 10px;
}

#nav-sub a {
	display: block;
	padding: 10px;
	background: #d2e1f6 url(nav-sub-parent-bg.gif) 0 0 repeat-x;
	color: #000;
	text-decoration: none;
}

#nav-sub a:hover {
	text-decoration: underline;	
	background: #c2d5f2 url(nav-sub-parent-bg2.gif) 0 0 repeat-x;		
}

#nav-sub li.selected a {
	font-weight: bold;
}

#nav-sub li.selected li a {
	padding: 5px 10px 5px 20px;
	background: #e3edfa url(nav-sub-child-bg.gif) 0 0 repeat-x;	
	font-weight: normal;
}

#nav-sub li.selected li.selected a {
	background: #fff url(nav-sub-child-bg.gif) 0 -200px repeat-x;
	font-weight: bold;
}


/* = main
------------------------------------------------------------------------------------ */

#main {
	margin: 20px;	
}

div.s-m-s #content,
div.s-m #content {
	width: 60%;	
}

div.s-l #content,
div.l #content, 
div.l-s #content {
	width: 80%;
}

div.xl #content {
	width: 100%;
}

div.x-m-x #content {
	width: 60%;
	margin: 0 20%;	
}

div.clear {
	clear: both;	
}

/* = content
------------------------------------------------------------------------------------ */

#content {
	float: left;
	background: #fff url(content-bg2.gif) 100% 0 repeat-y;
}

#content div.wrapper {
	border-left: 1px solid #c5cad0;	
	border-top: 1px solid #c5cad0;	
	padding: 10px;
	margin: 0 10px 0 0;
}

/* auto-clear wrapper container */

#content div.wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


#content div.wrapper {display: inline-block;}

/* Hides from IE-mac \*/
* html #content div.wrapper {height: 1%;}
#content div.wrapper {display: block;}
/* End hide from IE-mac */



#content div.bottom {
	clear: both;
	width: 100%;
	height: 10px;
	background: transparent url(content-bottom-bg.gif) 100% 100% no-repeat;
}

#content ol {
	margin: 0 0 15px 20px;
	list-style-type: decimal;	
}

#content ol ol {
	margin: 0 0 0 20px;	
}

#content ul {
	margin: 0 0 15px 20px;
	list-style-type: circle;	
}

#content ul ul {
	margin: 0 0 0 20px;	
}

#content dl {
	margin: 0;
}

#content dt {
	float: left;
	width: 20%;
	margin: 0 0 15px 0;
	text-align: right;
	font-style: italic;
	color: #666;
}

#content dd {
	float: left;
	width: 78%;
	margin: 0 0 15px 0;
	padding: 0 5px;		
}

#content a {
	color: #06c;
}

#content a:hover {
	text-decoration: none;	
}

#content a:visited {
	color: #80a7e0;
}

/* = images */

#content div.illustration {
	border: 1px solid #ccc;	
}

#content div.illustration div.image {
	float: left;
	border-bottom: 1px solid #ccc;	
}

#content div.illustration div.image img {
	float: left;
}

#content div.illustration-left {
	float: left;
	width: auto;
	margin: 0 10px 5px 0;
}

#content div.illustration-right {
	float: right;
	width: auto;
	margin: 0 0 5px 10px;
}

#content div.illustration div.description {
	clear: left;
	padding: 5px;	
	background: #f5f5f5;
}

#content div.illustration div.description p {
	margin: 0;
	font-size: 10px;
	line-height: 15px;		
	color: #333;
}

/* = context
------------------------------------------------------------------------------------ */

#context {
	float: left;
	width: 20%;
}

#context div.wrapper {
	margin: 0 0 0 10px;	
}

#context div.hint {
	border: 1px solid #cc6;
	padding: 9px 9px 4px 9px;
	background: #ffc;	
}

#context a {
	color: #000;	
}

#context a:hover {
	text-decoration: none;
}

#context li {
	line-height: 20px;	
}

/* = footer
------------------------------------------------------------------------------------ */

#footer {
	float: left;
	width: 100%;
	margin: 20px 0 0;
	border-top: 1px solid #153a6e;
	background: #153a6e;
}

#footer ul {
	border-top: 1px solid #f3f8ff;
	padding: 5px 0 5px 20px;	
}

#footer ul li {
	display: inline;
	color: #fff;
}

#footer a {
	color: #fff;
	text-decoration: none;
}

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


/* = message
------------------------------------------------------------------------------------ */

#message, ul.errorMessage {
	width: 100%;
	margin: 0 15px 5px 0;
	border-width: 1px 0;
	padding: 9px 0;
	background-repeat: no-repeat;
	background-position: 6px 6px;
}

div.global-hint {
	background-color: #ffc;
	border: 1px solid #cc6;
	background-image: url(icons/dialog-information.gif);	
}

div.global-success {
	background-color: #cbf5cd;	
	border: 1px solid #00cd00;
	background-image: url(icons/action-success.gif);	
}

div.global-error, ul.errorMessage {
	background-color: #ffcccb;
	border: 1px solid #f00;
	background-image: url(icons/dialog-error.gif);	
}

ul.errorMessage li {
	list-style-type: none;
	padding: 0 0 0 28px;
}

#message p {
	display: block;
	margin: 0;
	padding: 0 0 0 28px;
	line-height: 10px;
}


/* = forms
------------------------------------------------------------------------------------ */

div.input {
	float: left;
	width: 100%;
	margin: 0 0 15px 0;	
}

div.input label {
	float: left;
	padding: 5px 0;	
}

/* = submit */

div.submit {
	margin: 0;	
}

div.submit input {
	border: 1px solid #184481;
	padding: 4px 10px;
	background: #5f89c3 url(bt-submit-bg.gif) 0 0 repeat-x;	
	color: #fff;
	font-weight: bold;
}

div.right {
	text-align: right !important;
}

div.text input,
div.password input,
div.select select,
div.textarea textarea {
	float: left;
	margin: 0 -5px 0 0;
	border: 1px solid #a6adb3;
	padding: 4px;
	background: #f3f8fe;	
}

/* = textarea */

div.textarea textarea {
	height: 90px
}

div.h-xl textarea {
	height: 360px;
}

div.h-l textarea {
	height: 180px;
}

div.h-m textarea {
	height: 90px;	
}

div.h-s textarea {
	height: 45px;
}

div.h-xs textarea {
	height: 30px;	
}

/* = checkbox */

div.checkbox input,
div.radio input {
	clear: left;
	float: left;
	width: auto;
	margin: 6px 10px 0 0;
}




/* = hints & units 
------------------------------------------------------------------------------------ */

span.hint,
span.unit {
	font-size: 10px;
	line-height: 15px;
}

span.hint {
	float: left;
	width: 100%; 
	color: #666;
}

span.unit {
	float: left;
	width: 15%;
	margin: 5px 10px;
	color: #000;
}

/* = forms, simple
------------------------------------------------------------------------------------ */

form.top div.text label,
form.top div.password label,
form.top div.textarea label,
form.top div.select label {
	width: 100%;	
	text-align: left;
}


form.left div.text label, 
form.left div.password label, 
form.left div.textarea label, 
form.left div.select label {
	width: 18%;
	margin: 0 2% 0 0;
	padding: 5px 0;	
	text-align: right;		
}

form.top div.radio,
form.top div.checkbox,
form.top div.submit {
	margin: 0 0 15px 0;
	width: 100%;	
}

form.left div.radio,
form.left div.checkbox,
form.left div.submit {
	margin: 0 0 15px 20%;
	width: 80%;	
}

form.left div.submit {
	margin: 0 0 0 20%;
}


/* making .left default */

form div.text label,
form div.password label,
form div.textarea label,
form div.select label {
	width: 18%;
	margin: 0 2% 0 0;
	padding: 5px 0;	
	text-align: right;
}

form div.radio,
form div.checkbox,
form div.submit {
	margin: 0 0 15px 20%;
	width: 80%;	
}

form div.submit {
	margin: 0 0 0 20%;
}

form fieldset.submit {
	padding: 0 10px;	
}

/* = 2col, m-m */

form.m-m fieldset.submit {
	padding: 0 5px !important;	
}

form.m-m div.submit {
	margin: 0 0 0 10%;	
}

div.input span.hint {
	width: 80%; 
	margin: 0 0 0 20%;		
	display: block;
}

/* if label longer than column width */

div.long span.hint {
	width: 80%;	
	margin: 0;
}

/* = text,  textarea width */

/** 
div.xl input,
div.xl textarea { 
	width: 98%;	
}
 **/

div.l input, 
div.l textarea {
	width: 78%;	
}

div.m input, 
div.m textarea {
	width: 58%;	
}

div.s input, 
div.s textarea {
	width: 38%;	
}

div.xs input,
div.xs textarea {
	width: 18%;	
}

/* = select */

div.xl select { 
	width: 99%;	
}

div.l select {
	width: 79%;	
}

div.m select {
	width: 59%;	
}

div.s select {
	width: 39%;	
}

div.xs select {
	width: 19%;	
}


/* = input errors
------------------------------------------------------------------------------------ */

div.error input,
div.error textarea,
div.error select {
	border: 1px solid #f00;
}

div.error label,
div.error span.unit,
div.error span.hint {
	color: #f00;	
}


/* = fieldset
------------------------------------------------------------------------------------ */

#content fieldset.hidden,
#content fieldset.submit {
	border: none;
	margin: 0;
	padding: 0;	
}

#content fieldset.submit {
	padding: 0 15px;	
}

#content form.hidden fieldset.submit {
	padding: 0;	
}

#content fieldset {
	border: 1px solid #d2e1f6;
	padding: 14px;
	margin: 0 0 10px 0;
}

#content legend {
	margin: 0;
	color: #5f89c3;
	font-weight: bold;
}

/* = section, use for columns
------------------------------------------------------------------------------------ */

div.section-wrapper {
	float: left;
	width: 100%;	
}

div.section {
	float: left;	
}

div.m-m div.section {
	float: left;
	width: 48%;
	margin: 0 2% 0 0;
}


/* = nav-page
------------------------------------------------------------------------------------ */

div.nav-page {
	float: left;
	width: 100%;
	padding: 9px 0 0 0;
	border-top: 1px solid #e5e5e5;
}

div.nav-page div.paging {
	float: left;
	width: 50%;	
}

#content div.nav-page div.paging ul {
	float: left;
	margin: 0;	
}

#content div.nav-page div.paging ul li {
	float: left;
	margin: 0 2px 0 0;
	list-style-type: none;
}

div.nav-page div.paging ul li a {
	float: left;
	width: auto;
	background: #f3f8ff;
	border: 1px solid #bacfef;	
	padding: 1px 5px;
	text-decoration: none;
}

div.nav-page div.total {
	float: left;
	width: 50%;	
}

div.nav-page div.total p {
	float: right;
	margin: 0;
	padding: 2px 0;
}

#content div.nav-page div.total p strong {
	font-weight: normal;
	color: #666;
}