/*
	 BROWSER FIXES
*/
 
#illustraties,#vak,#peiler_tekst{
	overflow:hidden;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}

.ui-tabs-nav li {
    min-width: 84px; /* be nice to Opera */
}

/* Cursors*/
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}

/*
	 HOOFDMENU
*/

#menu{
	width:465px;
	height:20px;
	padding:10px 18px 0 0;
	float:right;
}
#menu li{
	margin-right:2px;
	float:left;
}
#menu li a{
	width:91px;
	height:22px;
	padding:3px 0 0 0;
	font-size:1.3em;
	text-align:center;
	text-decoration:none;
	text-transform:lowercase;
	color:#2a272a;
	display:block;
	background:url('../images/css/a_bg.gif') no-repeat;
}
#menu li a.active,
#menu li a.active:hover{
	font-weight:bold;
	color:#fff;
	background:url('../images/css/a_active.gif') no-repeat;
}
#menu li a:hover{
	background:url('../images/css/a_hover.gif') no-repeat;
}

/* 
	PEILERS 
*/

#rotate{
	width:570px;
	float:left;
}

#peilers{
	width:196px;
	float:left;
}
#peiler_tekst{
	position:relative;
	width:320px;
	height:135px;
	font-size:.9em;
	padding:7px 0 0 25px;
	float:left;
}

/* Peiler lijst */
ul#peiler_lijst{
	width:206px;
    padding: 0 0 0 5px;
	float:left;
}
#peiler_lijst li{
	width:201px;
	height:30px;
	float:left;
	margin-left:-5px;
}
#peiler_lijst li a{
	width:180px;
	height:23px;
	font-size:1.3em;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
	padding:7px 0 0 40px;
	display:block;
	overflow:hidden;
	float:left;
}
span.pijl{
	width:7px;
	height:8px;
	position:relative;
	bottom:12px;
	right:10px;
	float:right;
}

/* Peiler lijst: kleuren */
.ui-tabs-nav a.paars{	
	background:#f9f9fa url('../images/utp/punten/paars.gif') 5% 50% no-repeat;	
}
.ui-tabs-nav .ui-tabs-selected a.paars, .ui-tabs-nav a.paars:hover, .ui-tabs-nav a.paars:focus, .ui-tabs-nav a.paars:active{
	color:#a33393!important;
	background:#e8e9ea url('../images/utp/punten/paars.gif') 5% 50% no-repeat;	
}

.ui-tabs-nav a.blauw{	
	background:#f9f9fa url('../images/utp/punten/blauw.gif') 5% 50% no-repeat;	
}
.ui-tabs-nav .ui-tabs-selected a.blauw, .ui-tabs-nav a.blauw:hover, .ui-tabs-nav a.blauw:focus, .ui-tabs-nav a.blauw:active{
	color:#4a90cb!important;
	background:#e8e9ea url('../images/utp/punten/blauw.gif') 5% 50% no-repeat;	
}

.ui-tabs-nav a.groen{	
	background:#f9f9fa url('../images/utp/punten/groen.gif') 5% 50% no-repeat;	
}
.ui-tabs-nav .ui-tabs-selected a.groen, .ui-tabs-nav a.groen:hover, .ui-tabs-nav a.groen:focus, .ui-tabs-nav a.groen:active{
	color:#0fd31d!important;
	background:#e8e9ea url('../images/utp/punten/groen.gif') 5% 50% no-repeat;	
}

.ui-tabs-nav a.oranje{	
	background:#f9f9fa url('../images/utp/punten/oranje.gif') 5% 50% no-repeat;	
}
.ui-tabs-nav .ui-tabs-selected a.oranje, .ui-tabs-nav a.oranje:hover, .ui-tabs-nav a.oranje:focus, .ui-tabs-nav a.oranje:active{
	color:#f7960c!important;
	background:#e8e9ea url('../images/utp/punten/oranje.gif') 5% 50% no-repeat;	
}

.ui-tabs-nav a.rood{	
	background:#f9f9fa url('../images/utp/punten/rood.gif') 5% 50% no-repeat;	
}
.ui-tabs-nav .ui-tabs-selected a.rood, .ui-tabs-nav a.rood:hover, .ui-tabs-nav a.rood:focus, .ui-tabs-nav a.rood:active{
	color:#ba0c0c!important;
	background:#e8e9ea url('../images/utp/punten/rood.gif') 5% 50% no-repeat;	
}

/* Bolletjes */
span#bolletje{
	width:9px;
	height:8px;
	margin:0px 0 0 1px;
	float:left;
}

span.paars{background:url('../images/utp/punten/paars.gif') no-repeat;}
span.blauw{background:url('../images/utp/punten/blauw.gif') no-repeat;}
span.groen{background:url('../images/utp/punten/groen.gif') no-repeat;}
span.oranje{background:url('../images/utp/punten/oranje.gif') no-repeat;}
span.rood{background:url('../images/utp/punten/rood.gif') no-repeat;}

/* Illustraties */
#illustraties,
#illustratie{
	width:222px;
	height:224px;
}

#illustratie{
	overflow:hidden;
}

#illustraties{
	left:600px;
	z-index:200;	
	overflow:hidden;	
}
#illustratie.fragment-1{
	background:url('../images/utp/illustraties/paars.png') no-repeat;
}

#illustratie.fragment-2{
	background:url('../images/utp/illustraties/blauw.png') no-repeat;
}
#illustratie.fragment-3{
	background:url('../images/utp/illustraties/groen.png') no-repeat;
}
#illustratie.fragment-4{
	background:url('../images/utp/illustraties/oranje.png') no-repeat;
}
#illustratie.fragment-5{
	background:url('../images/utp/illustraties/rood.png') no-repeat;
}

/* 
	BUTTONS
*/

a.button,a.thickbox{
	height:20px;
	padding:2px 0 0 5px;
	text-decoration:none;
	color:#fff;
	display:block;
}
span.btn_left,span.btn_right{ 
	width:5px;
	height:22px;
	position:relative;
	bottom:2px;
}
span.btn_left{
	position:relative;
	right:5px;
	float:left;
}
span.btn_right{
	position:relative;
	left:5px;
	float:right;
}

/* 
	Sidebar actions
*/

#actions{
	width:193px;
}
#actions a{
	margin:10px 0 10px 0;
	display:block;
}
#actions a.button#grijs:hover,#actions a.thickbox#grijs:hover{background: url('../images/css/buttons/btn_bg_paars.gif') repeat-x;}
#actions a.button#grijs:hover .btn_left,#actions a.thickbox#grijs:hover .btn_left{background: url('../images/css/buttons/btn_left_paars.gif') no-repeat; }
#actions a.button#grijs:hover .btn_right,#actions a.thickbox#grijs:hover .btn_right{background: url('../images/css/buttons/btn_right_paars.gif') no-repeat;}

.telefoon,.email{
	width:16px;
	height:16px;
	float:left;
	padding-right:10px;
}

.telefoon{background: url('../images/css/phone.png') left no-repeat;}
.email {
	background: url('../images/css/email.png') left no-repeat;
}

/* UTP/Header buttons */
#peilers a.button {
	width:265px;
	height:22px;
	padding:0 0 0 10px;
	font-size:1em;
	margin-top:10px;
	color:#fff;
}
#peilers span.btn_left,
#peilers span.btn_right{ 
	width:5px;
	height:22px;
	position:relative;
	top:0px;
}
#peilers strong{
	display:block;
}

/*<span class="btn_left"></span><span class="btn_right"></span> */

a.button#grijs{background: url('../images/css/buttons/grijs.jpg') no-repeat;}
a.button#paars{background: url('../images/css/buttons/paars.jpg') no-repeat;}
a.button#blauw{background: url('../images/css/buttons/blauw.jpg') no-repeat;}
a.button#groen{background: url('../images/css/buttons/groen.jpg') no-repeat;}
a.button#oranje{background: url('../images/css/buttons/oranje.jpg') no-repeat;}
a.button#rood{background: url('../images/css/buttons/rood.jpg') no-repeat;}

/* Grijs */
a.button#grijs,a.thickbox#grijs{background: url('../images/css/buttons/btn_bg.gif') repeat-x;}
a.button#grijs .btn_left,a.thickbox#grijs .btn_left{background: url('../images/css/buttons/btn_left.gif') no-repeat; }
a.button#grijs .btn_right,a.thickbox#grijs .btn_right{background: url('../images/css/buttons/btn_right.gif') no-repeat;}