/* 
    Document   : main
    Created on : Jan 18, 2010, 4:15:10 PM
    Author     : ketso
    Description:
        Basic UI elements.
*/

body {
	font-family: Futura, Tahoma, sans-serif;
	font-size: 75%;
	background-color: #f1f1f3;
}

body textarea {
	font-family: Futura, Tahoma, sans-serif;
	font-size: 1em;
}

a {
	color: #30a1cb;
}

a:active {
	color: #ff0000;
}

ul#mainMenu {
	margin: 0 auto 1em auto;
	padding: 0 0 0.3em 0;
	width: 46em;
	overflow: hidden;
	text-align: center;
	list-style-type: none;
}

ul#mainMenu.customerBasic {
	width: 46em;
}

ul#mainMenu.customer {
	width: 67em;
}

ul#mainMenu.referrer {
	width: 46em;
}

ul#mainMenu.professional {
	width: 46em;
}

ul#mainMenu.thirdparty {
	width: 34em;
}

ul#mainMenu.administrator {
	width: 67em;
}

ul#mainMenu li {
	font-size: 1.1em;
	border-right: 0.1em solid #818181;
	width: 10em;
	height: 2.6em;
	text-align: center;
	float: left;
	background: #868686 url('../img/gradient_menu.png') repeat-x 0 0;
	color: #292929;
	text-shadow: #eeeeee 0.0em 0.1em 0.1em;
	box-shadow: 0 0.1em 0.3em #9c9c9c;
	-webkit-box-shadow: 0 0.1em 0.3em #9c9c9c;
	-moz-box-shadow: 0 0.1em 0.3em #9c9c9c;
}

ul#mainMenu li a {
	color: #292929;
}

ul#mainMenu li:first-child {
	border-top-left-radius: 0.5em;
	-webkit-border-top-left-radius: 0.5em;
	-khtml-border-top-left-radius: 0.5em;
	-moz-border-radius-topleft: 0.5em;
	border-bottom-left-radius: 0.5em;
	-webkit-border-bottom-left-radius: 0.5em;
	-khtml-border-bottom-left-radius: 0.5em;
	-moz-border-radius-bottomleft: 0.5em;
}

ul#mainMenu li:last-child {
	border-right: 0;
	border-top-right-radius: 0.5em;
	-webkit-border-top-right-radius: 0.5em;
	-khtml-border-top-right-radius: 0.5em;
	-moz-border-radius-topright: 0.5em;
	border-bottom-right-radius: 0.5em;
	-webkit-border-bottom-right-radius: 0.5em;
	-khtml-border-bottom-right-radius: 0.5em;
	-moz-border-radius-bottomright: 0.5em;
}


ul#mainMenu li.hover:hover {
	border-color: #5e5e5e;
	color: #eeeeee;
	text-shadow: #292929 0.0em -0.1em 0.1em;
	background-color: #5e5e5e;
	background-image: url('../img/gradientHover_menu.png');
}

ul#mainMenu li.hover:hover a {
	color: #eeeeee;
}

ul#mainMenu li.recessed {
	color: #eeeeee;
	text-shadow: #292929 0.0em 0.1em 0.1em;
	background-color: #343434;
	background-image: url('../img/gradientRecessed_menu.png');
}

ul#mainMenu li.recessed a {
	color: #eeeeee;
}

ul#mainMenu li a, ul#mainMenu li span {
	padding-top: 0.6em;
	text-decoration: none;
	color: inherit;
	display: block;
}

ul#mainMenu li:first-child a, ul#mainMenu li:first-child span {
	padding-top: 0.4em;
}

ul#mainMenu li.hover:first-child:hover a, ul#mainMenu li.hover:first-child:hover span {
	background-image: url('../img/logoHover.png');
	background-repeat: no-repeat;
	background-position: center 0.4em;
}

ul#mainMenu li a img {
	border: 0;
}

ul#mainMenu li.hover:first-child:hover a img, ul#mainMenu li.hover:first-child:hover span img {
	visibility: hidden;
}

div#main {
	margin: 0 auto 0 auto;
	width: 77em;
	padding: 3em;
	border-top-left-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	-khtml-border-top-left-radius: 1em;
	-moz-border-radius-topleft: 1em;
	border-top-right-radius: 1em;
	-webkit-border-top-right-radius: 1em;
	-khtml-border-top-right-radius: 1em;
	-moz-border-radius-topright: 1em;
	box-shadow: 0.2em 0.2em 0 #d0d2d3;
	-webkit-box-shadow: 0.2em 0.2em 0 #d0d2d3;
	-moz-box-shadow: 0.2em 0.2em 0 #d0d2d3;
	background-color: #ffffff;
	color: #323433;
	overflow: auto;
}

div#main .error {
	color: #ff002b;
}

div#main h1 {
	font-size: 1.8em;
	text-align: center;
	margin: 0 auto 1.4em auto;
}

div#main h2 {
	font-size: 1.8em;
	margin: 2em 0 1em 0;
	color: #404041;
}

div#main div.instructions {
	margin-bottom: 2em;
	font-size: 1.2em;
	text-align: center;
}

div#main div.empty {
	font-size: 1.2em;
	margin-bottom: 1em;
	text-align: center;
}

div#main form fieldset label {
	margin-top: 0.2em;
}

div#main form fieldset textarea, div#main form fieldset input {
	font-family: 'Lucida Grande';
}

div#main form fieldset input, div#main form fieldset select {
	font-size: 0.9em;
}

div#main form fieldset textarea.instructions, div#main form fieldset input.instructions {
	color: #808080;
}

div#main form fieldset textarea.error, div#main form fieldset input.error {
	border-color: #ff0000 !important;
	background-color: #ffdcdc !important;
}

div#main form fieldset input.submit {
	border: 0;
	border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
	-khtml-border-radius: 0.7em;
	-moz-border-radius: 0.7em;
	background-color: #26a9e0;
	color: #ffffff;
	display: block;
}

div#main div.video {
	text-align: center;
}

div#mainFooter {
	margin: 0 auto 0 auto;
	width: 81em;
	padding-left: 2em;
	border-bottom-left-radius: 1em;
	-webkit-border-bottom-left-radius: 1em;
	-khtml-border-bottom-left-radius: 1em;
	-moz-border-radius-bottomleft: 1em;
	border-bottom-right-radius: 1em;
	-webkit-border-bottom-right-radius: 1em;
	-khtml-border-bottom-right-radius: 1em;
	-moz-border-radius-bottomright: 1em;
	box-shadow: 0.2em 0.2em 0 #d0d2d3;
	-webkit-box-shadow: 0.2em 0.2em 0 #d0d2d3;
	-moz-box-shadow: 0.2em 0.2em 0 #d0d2d3;
	overflow: auto;
	background-color: #e6e7e8;
	color: #323433;
}

div#mainFooter ul {
	margin: 1em 0 1em 0;
	width: 15.5em;
	list-style-type: none;
	float: left;
}

div#mainFooter ul li {
	margin: 0.3em;
	padding-left: 0.3em;
}

div#mainFooter ul li.header {
	font-size: 1.1em;
	padding-bottom: 0.2em;
	border-bottom: 0.2em solid #b4b5b7;
}

div#mainFooter ul li a {
	text-decoration: none;
	color: #929497;
}

div#mainFooter ul li a:hover {
	text-decoration: underline;
}