/** background-color **/
body{
	background-color: #FFFFFF;
	font-size: 12px;
}

/** headings **/
h1{
	font-size: 1.3em;
}

h2{
	font-size: 1.2em;
}

h3{
	font-size: 1.2em;
}

h4{
	font-size: 1.1em;
}

h5{
	font-size: 1em;
}

/** line seperator **/
hr{
	color: #B7B7BA;
	background-color: #B7B7BA;
	height: 1px;
	border: none;
}
div.infobox table#shoppingcart-table thead tr td{
	border-bottom: 1px solid #B7B7BA;
}

/** Fields **/
input, select, textarea, button{
	background-color: #FFF!important;
	color: #000000;
	border: 1px solid #B7B7BA;
}
input {
	font-family: Trebuchet MS;
	font-size: 12px;
}
select{
	font-family: Trebuchet MS;
	font-size: 12px;
}
/** validation field error display **/
.error {
	color: #FF0000;
	border: 1px solid red!important;
	clear: both;
}

.errornoclear {
	color: red;
	border: 1px solid red!important;
}

/***********************************************
************ General font settings. ************
***********************************************/
.font{
	font-family: Trebuchet MS;
	font-size: inherit;
}
.color{
	color: #2C2C2C;
}
.head-color{
	color: #FFFFFF;
}
.highlight{
	color: #009FE3;
}
.inactive{
	color: #B7B7BA;
}
.head-inactive{
	color: #FFFFFF;
}

/** links (sometimes divs are clickable, they need the same style) **/
a, .link_color{
	color: #2C2C2C;
	text-decoration: underline;
}
a:hover, .link_color:hover{
	color: #009FE3;
	text-decoration: none;
}
a:active, link_color:active{
	color: #009FE3;
}

/***********************************************
**************** General makeup. ***************
***********************************************/

.header{
	font-weight: bold;
	background-color: #2C2C2C;
}

/** default border settings **/
.border{
	border: 1px;
	border-style: solid;
	border-color: #B7B7BA;
}
.border-active{
	border: 1px solid #2C2C2C;
}
.border-highlight{
	border: 1px solid #009FE3;
}
.border-radius{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

/** used by steps! **/
.border-fat{
	border: 2px;
	border-style: solid;
	border-color: #B7B7BA;
}
.border-fat-active{
	border: 2px;
	border-style: solid;
	border-color: #009FE3;
}
.border-fat-highlight{
	border: 2px;
	border-style: solid;
	border-color: #009FE3;
}

.content{
	border-bottom: 1px solid #B7B7BA;
}

/** loading bar top of screen **/
#loading{
	background-color: #FFFFFF;
	border-bottom: 2px solid #009FE3;
}

/** infoboxbox (shop cart box below steps) **/
div.infobox{
	border:1px dotted #B7B7BA;
}

/** questionmark at top of screen **/
span.note{
	font-size: 1.3em;
	color: #2C2C2C;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

/** the tooltip, mouseover question mark **/
#tooltip{
	background-color: #FFFFFF;
}

/** Calendar **/
table.ui-datepicker-calendar span{
	color: #2C2C2C;
}
table.calendar tr td.border-highlight{
	background-color: #2C2C2C!important;
}
table.calendar tr td.border-highlight a{
	color: #FFFFFF!important;
}

table.calendar tr td.border-highlight:hover{
	background-color: #009FE3!important;
}
table.calendar tr td.border-highlight:hover a{
	color: #FFFFFF!important;
}

/** Download button **/
div.download_holder {
	border: 1px solid #2C2C2C;
	border-right: 0;
	background-color: #2C2C2C;
	text-align: center;
}

div.download_holder a{
	color: #2C2C2C;
}

div.download_holder div.bttn input.downloadticket{
	background-color: #2C2C2C;
	text-transform: uppercase;
	border: 1px solid #2C2C2C;
	color: #FFFFFF;
}

/** Download button HOVER **/
div.download_holder:hover {
	border: 1px solid #009FE3;
	border-right: 0;
	background-color: #009FE3;
}
div.download_holder:hover div.bttn input.downloadticket{
	background-color: #009FE3;
	border: 1px solid #009FE3;
	color: #FFFFFF;
}

/** The help button **/
#zenbox_border{
	border: 1px solid #2C2C2C;
	border-right: 0;
}

#zenbox{
	background-color: #2C2C2C;
	color: #FFFFFF;
}

#zenbox:hover{
	background-color: #009FE3;
}
#zenbox:hover a{
	color: #FFFFFF!important;
}

/**************************************************
********* JQuery content & header classes *********

! Don't forget the !important to overwrite the default jQuery classes !

********************** USAGE **********************
If you want a dark background color, dont forget to edit the image color's code in the URL to the white images! (ffffff)
Only two available at the moment are black (000000) and white (ffffff)

You can change this to:
"images/ui-bg_flat_100_000000_40x100.png" for light backgrounds,
"images/ui-bg_flat_100_ffffff_40x100.png" for dark backgrounds!

***************************************************/

.ui-widget {
	font-family: Trebuchet MS!important;
	font-size: 12px!important;
}

.ui-widget-content {
	border: 1px solid #B7B7BA!important;
	background: #FFFFFF url(../../images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x!important;
	color: #2C2C2C;!important;
} .ui-widget-content a { color: inherit; }

.ui-widget-header {
	border: 1px solid #2C2C2C!important;
	background: #2C2C2C url(../../images/ui-bg_flat_100_6193C9_40x100.png) 50% 50% repeat-x!important;
	color: #FFFFFF!important;
	font-weight: bold!important;
} .ui-widget-header a { color: inherit; }

/** DEFAULT **/
.ui-state-default, .ui-widget-content .ui-state-default {
	border: 1px solid #2C2C2C!important;
	background: #2C2C2C url(../../images/ui-bg_flat_100_efefef_40x100.png) 50% 50% repeat-x!important;
	color: #FFFFFF!important;
}

/** DEFAULT LINK <a>
		Don't forget the !important **/
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	color: #FFFFFF!important;
	text-decoration: underline;
}

/** DEFAULT HOVER
		Don't forget the !important **/
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
	border: 1px solid #009FE3!important;
	background: #009FE3 url(../../images/ui-bg_glass_50_EAB700_1x400.png) 50% 50% repeat-x!important;
	font-weight: normal!important;
	color: #FFFFFF!important;
}

/** DEFAULT LINK HOVER
		Don't forget the !important **/
.ui-state-hover a, .ui-state-hover a:hover {
	color: #FFFFFF!important;
	text-decoration: underline;
}

/** DEFAULT ACTIVE
		Dont forget the !important **/
.ui-state-active, .ui-widget-content .ui-state-active {
	border: 1px solid #B7B7BA!important;
	background: #FFFFFF url(../../images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x!important;
	font-weight: normal!important;
	color: #FFFFFF!important;
}

/** DEFAULT ACTIVE LINK <a>
		Don't forget the !important! **/
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: #009FE3!important;
	text-decoration: underline;
}

/**
 * JQUERY'S CALENDAR ACTIVE
 *		overwrites DEFAULT ACTIVE for calendar only!
 */
.ui-widget-content .ui-datepicker-calendar .ui-state-active {
	background:  url(../../images/ui-bg_glass_50_d4e0ec_1x400.png) 50% 50% repeat-x!important;
	border: 1px solid #B7B7BA!important;
	background: #2C2C2C url(../../images/ui-bg_glass_50_d4e0ec_1x400.png) 50% 50% repeat-x!important;
	font-weight: normal!important;
	color: #FFFFFF!important;
}

/** DEFAULT HIGHLIGHT
	@example - today's date
	Don't forget !important **/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {
	border: 1px solid #009FE3!important;
	background: #009FE3 url(../../images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x!important;
	color: #FFFFFF!important;
}

/** HIGHLIGHT LINK <a>
	@example today's date **/
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a {
	color: #FFFFFF!important;
}

/** AUTOLOAD FORM SECTION **/
.ui-menu .ui-menu-item {
	color: #000000!important;

}