/**
 * Main
 * Stylesheet for Use-IT
 *
 * @media		screen, projection
 * @copyright	3RDS	<http://www.3rds.be>
 * @author		Bram Van Damme <bram@3rds.be>
 */

/**
 * = Clearfix
 * ----------------------------------------------------------
 */

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


/**
 * = 1. Primary Selectors (Font-sizes & Colors)
 * ----------------------------------------------------------
 */

	body {
		font: 400 12px Arial, Helvetica, sans-serif;
		background: #ed1b23;
		padding: 0;
		color: #000;
	}
	
	h1, h2, h3, h4, h5, h6 {
		color: #000;
		font-weight: 700;
		line-height: 1;
		font-family: Arial, Helvetica, sans-serif;
		margin-bottom: 5px;
	}

	h1 {	font-size: 24px; }
	h2 {	font-size: 22px; margin-bottom: 12px; }
	h3 {	font-size: 18px; }
	h4 {	font-size: 16px; }
	h5 {	font-size: 14px; }
		
	a {
		color: #ED1B23;
	}
	
	a:hover {
		text-decoration: underline;
	}

	.mceContentBody a { /* Undo piece of the above in Tiny :) */
		color: #ed1b23 !important;
	}

	hr.hidden {
		display: none;
	}

/**
 * = 2. Primary Selectors (Margins & Paddings)
 * ----------------------------------------------------------
 */

 	ul, ol {
		padding: 0 0 12px 20px;
	}

	ul {
		list-style: square;
	}

	ol {
		list-style: decimal;
	}

	strong, b {
		font-weight: 700;
	}

	em, i {
		font-style: italic;
	}

	sub {
		vertical-align: sub;
	}

	sup {
		vertical-align: super;
	}

	img.floatLeft {
		display: block;
		float: left;
		margin: 0 25px 25px 0;
	}

	img.floatRight {
		display: block;
		float: right;
		margin: 0 0 25px 25px;
	}
	
	p {
		padding-bottom: 12px;
	}
	
/**
 * = 3. General Positioning
 * ----------------------------------------------------------
 */
 
 	#wrapper {	
		min-width: 960px;
		height: 720px;
		margin: 0 auto 0;
		position: relative;
	}
	
	.inner {
		position: relative;
	}
	
	/**
	 * = 3.1 General Positioning - Sidebar
	 * ------------------------------------------------------
	 */
	
		#wrapper #sidebar {
			width: 378px;
			height: 720px;
			
			background: transparent url(../images/layout/sidebar.gif) no-repeat 0 0;
			overflow: hidden;
			
			position: absolute;
			left: 0;
			top: 0;
		}
	
	/**
	 * = 3.2 General Positioning - Header
	 * ------------------------------------------------------
	 */
	
		#wrapper #header {
			width: 460px;	
			height: 111px;	
			position: absolute;
			left: 378px;
			left: 40%;
			top: 0;
		}
	
	/**
	 * = 3.3 General Positioning - Navigation
	 * ------------------------------------------------------
	 */
	
		#wrapper #navigation {
			width: 460px;		
			height: 555px;
			position: absolute;
			left: 378px;
			left: 40%;
			top: 111px;
		}
	
	/**
	 * = 3.4 General Positioning - Footer
	 * ------------------------------------------------------
	 */
	
		#wrapper #footer {
			width: 460px;	
			height: 53px;	
			position: absolute;
			left: 378px;
			left: 40%;
			top: 666px;
		}
	
	/**
	 * = 3.4 General Positioning - Extra (Birds)
	 * ------------------------------------------------------
	 */
	
		#wrapper #extra {
			width: 122px;	
			height: 720px;
			position: absolute;
			right: 0;
			top: 0;
		}
	
	/**
	 * = 3.5 General Positioning - About
	 * ------------------------------------------------------
	 */
	
		#wrapper #about {
			width: 306px;	
			height: 179px;
			position: absolute;
			left: 63px;
			top: 678px;
		}
		
		
/**
 * = 4. Header
 * ----------------------------------------------------------
 */
 
 	#header .inner {
		width: 460px;	
		height: 111px;	
	}
	
	#header h1 {
		width: 315px;
		height: 105px;
		position: absolute;
		top: 0px;
		right: 13px;
		margin: 0;
		padding: 0;
	}
	
	#header h1 a {
		display: block;
		width: 315px;
		height: 105px;
		margin: 0;
		padding: 0;
		text-indent: -9999px;
		background: transparent url(../images/layout/header_h1.gif) no-repeat 0 0;
	}
	
	#header h1 a:hover {
		background-image: url(../images/layout/header_h1-hover.gif)
	}
	
	#header h2 {
		width: 97px;
		height: 42px;
		position: absolute;
		top: 30px;
		left: 13px;
		margin: 0;
		padding: 0;
	}
	
	#header h2 a {
		display: block;
		width: 97px;
		height: 42px;
		margin: 0;
		padding: 0;
		text-indent: -9999px;
		background: transparent url(../images/layout/nononsense.gif) no-repeat 0 0;
	}
	
	#header h2 a:hover {
		background-image: url(../images/layout/nononsense-hover.gif)
	}
 	
	
/**
 * = 5. Navigation
 * ----------------------------------------------------------
 */
 	
	#navigation {
		background:  transparent url(../images/nav/navigation.gif) no-repeat 0 0;
	}
 	
	#navigation ul {
		margin: 0;
		padding: 0;
		list-style: none;
		
		width: 460px;		
		height: 555px;
	}
 	
	#navigation ul li {
		margin: 0;
		padding: 0;
		list-style: none;
		
		position: absolute;
	}
 	
	#navigation ul li a {
		display: block;
		text-indent: -9999px;
	} 	
	
	/**
	 * = 5.1 Navigation - Antwerp
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_1 {
			width: 155px;
			height: 133px;
			top: 8px;
			right: 42px;
			z-index: 3;
		}
		
		#navigation ul li#mnu_1 a {
			width: 155px;
			height: 133px;		
			background: transparent url(../images/nav/navigation_antwerp.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_1 a:hover {
			background-image: url(../images/nav/navigation_antwerp-hover.gif); 
		}
		
		#b_13 #navigation ul li#mnu_1 a {
			background-image: url(../images/nav/navigation_antwerp-selected.gif); 
		} 	
	
	/**
	 * = 5.2 Navigation - Bruges
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_2 {
			width: 180px;
			height: 133px;
			top: 8px;
			left: 83px;
			z-index: 2;
		}
 	
		#navigation ul li#mnu_2 a {
			width: 180px;
			height: 133px;		
			background: transparent url(../images/nav/navigation_bruges.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_2 a:hover {
			background-image: url(../images/nav/navigation_bruges-hover.gif); 
		}
		
		#b_12 #navigation ul li#mnu_2 a {
			background-image: url(../images/nav/navigation_bruges-selected.gif); 
		} 	
	
	/**
	 * = 5.3 Navigation - Brussels
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_3 {
			width: 157px;
			height: 132px;
			top: 322px;
			left: 169px;
		}
 	
		#navigation ul li#mnu_3 a {
			width: 157px;
			height: 132px;
			background: transparent url(../images/nav/navigation_brussels.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_3 a:hover {
			background-image: url(../images/nav/navigation_brussels-hover.gif); 
		}
		
		#b_11 #navigation ul li#mnu_3 a {
			background-image: url(../images/nav/navigation_brussels-selected.gif); 
		}
	
	/**
	 * = 5.4 Navigation - Ghent
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_4 {
			width: 128px;
			height: 131px;
			top: 129px;
			left: 135px;
			z-index: 1;
		}
 	
		#navigation ul li#mnu_4 a {
			width: 128px;
			height: 131px;
			background: transparent url(../images/nav/navigation_ghent.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_4 a:hover {
			background-image: url(../images/nav/navigation_ghent-hover.gif); 
		}
		
		#b_14 #navigation ul li#mnu_4 a {
			background-image: url(../images/nav/navigation_ghent-selected.gif); 
		}
	
	/**
	 * = 5.5 Navigation - Leuven
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_5 {
			width: 134px;
			height: 118px;
			top: 260px;
			right: 0;
			z-index: 1;
		}
 	
		#navigation ul li#mnu_5 a {
			width: 134px;
			height: 118px;
			background: transparent url(../images/nav/navigation_leuven.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_5 a:hover {
			background-image: url(../images/nav/navigation_leuven-hover.gif); 
		}
		
		#b_66 #navigation ul li#mnu_5 a {
			background-image: url(../images/nav/navigation_leuven-selected.gif); 
		}
	
	/**
	 * = 5.6 Navigation - Mechelen
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_6 {
			width: 134px;
			height: 122px;
			top: 138px;
			right: 0;
			z-index: 2;
		}
 	
		#navigation ul li#mnu_6 a {
			width: 134px;
			height: 122px;
			background: transparent url(../images/nav/navigation_mechelen.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_6 a:hover {
			background-image: url(../images/nav/navigation_mechelen-hover.gif); 
		}
		
		#b_60 #navigation ul li#mnu_6 a {
			background-image: url(../images/nav/navigation_mechelen-selected.gif); 
		}
	
	/**
	 * = 5.7 Navigation - Book Cheap Flights
	 * -------------------------------------------------------
	 */
 	
		#navigation ul li#mnu_7 {
			width: 129px;
			height: 203px;
			top: 260px;
			left: 40px;
			z-index: 1;
		}
 	
		#navigation ul li#mnu_7 a {
			width: 129px;
			height: 203px;
			background: transparent url(../images/nav/navigation__cheapflights.gif) no-repeat 0 0; 
		}	
		
		#navigation ul li#mnu_7 a:hover {
			background-image: url(../images/nav/navigation__cheapflights-hover.gif); 
		}
		
		#b_72 #navigation ul li#mnu_7 a {
			background-image: url(../images/nav/navigation__cheapflights-selected.gif); 
		}
	
/**
 * = 6. Sidebar
 * ----------------------------------------------------------
 */
 	
	/**
	 * = 6.1 Sidebar - Subpagenav
	 * ----------------------------------------------------------
	 */
 
		#subpagenav {			
			width: 122px;
			height: 720px;
			float: left;
			overflow: hidden;
			
			/* reverting to absolute for our friend IE6 */
			position: absolute;
			left: 0;
			top: 0;
		}
		
		#subpagenav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			
			position: relative;
		}
		
		#subpagenav ul li {
			list-style: none;
			margin: 0;
			padding: 0;
			
			position: absolute;
			left: 16px;
		}
		
		#subpagenav ul li a {
			display: block;
			text-indent: -999px;
		}
 	
		/**
		 * = 6.1.1 Sidebar - Subpagenav - When to come
		 * ----------------------------------------------------------
		 */
		
			#subpagenav ul li.swTree_sort_1 {
				height: 84px;
				width: 86px;
				
				top: 96px;
			}
			
			#subpagenav ul li.swTree_sort_1 a {
				height: 84px;
				width: 86px;
				
				background: transparent url(../images/subnav/whentocome-sprite.gif) no-repeat 0 0;
			}
			
			#subpagenav ul li.swTree_sort_1 a:hover, #subpagenav ul li.swTree_sort_1.active a {		
				background-position: 0 100%;
			}
 	
		/**
		 * = 6.1.2 Sidebar - Subpagenav - Where to sleep
		 * ----------------------------------------------------------
		 */
		
			#subpagenav ul li.swTree_sort_2 {
				height: 86px;
				width: 86px;
				
				top: 192px;
			}
			
			#subpagenav ul li.swTree_sort_2 a {
				height: 86px;
				width: 86px;
				
				background: transparent url(../images/subnav/wheretosleep-sprite.gif) no-repeat 0 0;
			}
			
			#subpagenav ul li.swTree_sort_2 a:hover, #subpagenav ul li.swTree_sort_2.active a {	
				background-position: 0 100%;
			}
 	
		/**
		 * = 6.1.3 Sidebar - Subpagenav - How to get there
		 * ----------------------------------------------------------
		 */
		
			#subpagenav ul li.swTree_sort_3 {
				height: 70px;
				width: 86px;
				
				top: 278px;
			}
			
			#subpagenav ul li.swTree_sort_3 a {
				height: 70px;
				width: 86px;
				
				background: transparent url(../images/subnav/howtogetthere-sprite.gif) no-repeat 0 0;
			}
			
			#subpagenav ul li.swTree_sort_3 a:hover, #subpagenav ul li.swTree_sort_3.active a {
				background-position: 0 100%;
			}
 	
		/**
		 * = 6.1.4 Sidebar - Subpagenav - Meet the locals
		 * ----------------------------------------------------------
		 */
		
			#subpagenav ul li.swTree_sort_4 {
				height: 92px;
				width: 70px;
				
				top: 364px;
			}
			
			#subpagenav ul li.swTree_sort_4 a {
				height: 92px;
				width: 86px;
				
				background: transparent url(../images/subnav/meetthelocals-sprite.gif) no-repeat 0 0;
			}
			
			#subpagenav ul li.swTree_sort_4 a:hover, #subpagenav ul li.swTree_sort_4.active a {	
				background-position: 0 100%;
			}
 	
		/**
		 * = 6.1.5 Sidebar - Subpagenav - Print Guide
		 * ----------------------------------------------------------
		 */
		
			#subpagenav ul li.swTree_sort_5 {
				height: 73px;
				width: 70px;
				
				top: 456px;
			}
			
			#subpagenav ul li.swTree_sort_5 a {
				height: 73px;
				width: 86px;
				
				background: transparent url(../images/subnav/printguide-sprite.gif) no-repeat 0 0;
			}
			
			#subpagenav ul li.swTree_sort_5 a:hover, #subpagenav ul li.swTree_sort_5.active a {	
				background-position: 0 100%;
			}
 	
		/**
		 * = 6.1.5 Sidebar - Subpagenav - Visit Use-IT
		 * ----------------------------------------------------------
		 */
		
			#subpagenav ul li.swTree_sort_6 {
				height: 84px;
				width: 70px;
				
				top: 540px;
			}
			
			#subpagenav ul li.swTree_sort_6 a {
				height: 84px;
				width: 86px;
				
				background: transparent url(../images/subnav/visituseit-sprite.gif) no-repeat 0 0;
			}
			
			#subpagenav ul li.swTree_sort_6 a:hover, #subpagenav ul li.swTree_sort_6.active a {
				background-position: 0 100%;
			}
 	
	
	/**
	 * = 6.2 Sidebar - Content
	 * ----------------------------------------------------------
	 */
	
		#content {
			width: 240px;
			height: 570px;
			float: left;
			
			margin: 50px 16px 0 0;
			padding: 0;
			
			background: #fff;
			
			/* reverting to absolute for our friend IE6 */
			position: absolute;
			right: 0;
			top: 0;
		}
		
		#dummy {
			overflow:scroll;		/* Hook Safari, IE and Firefox with scrollbars */
			_overflow:hidden;		/* Override IE */
			overflow-x: hidden;		/* Fix Firefox on the Safari hook : hide hor scrollbar */
			overflow-y: scroll;		/* Fix IE on its own hook: enfore vert scrollbar */
		}
		
		html#content {
			background: #ed1b23;			
		}
	
		html#content body.mceContentBody {
			width: 240px;
			height: auto;
			float: none;			
			margin: 15px;
			overflow-x: auto;
			overflow-y: auto;
			overflow: auto;
			
			background: #fff;
		}
 	
	
		/**
		 * = 6.2.1 Sidebar - Content - Title
		 * ----------------------------------------------------------
		 */
		 
			#content #contentTitle {
				height: 76px;
				width: 240px;
				margin-bottom: 4px;
			}
			
			#content #contentTitle h2 {
				height: 76px;
				width: 240px;
				margin: 0;
				padding: 0;
				text-indent: -9999px;
				background: transparent url(../images/blank.gif) no-repeat 0 0;
			}
			
			#b_12 #content #contentTitle h2 {
				background-image: url(../images/titles/bruges.gif);
			} 	
			
			#b_13 #content #contentTitle h2 {
				background-image: url(../images/titles/antwerp.gif);
			}
			
			#b_60 #content #contentTitle h2 {
				background-image: url(../images/titles/mechelen.gif);
			}
			
			#b_14 #content #contentTitle h2 {
				background-image: url(../images/titles/ghent.gif);
			}
			
			#b_11 #content #contentTitle h2 {
				background-image: url(../images/titles/brussels.gif);
			}
			
			#b_66 #content #contentTitle h2 {
				background-image: url(../images/titles/leuven.gif);
			}
			
			#b_72 #content #contentTitle h2 {
				background-image: url(../images/titles/cheapflights.gif);
			}
	
		/**
		 * = 6.2.1 Sidebar - Content - ContentInner
		 * ----------------------------------------------------------
		 */
		 
		 	#content #contentInner {
				/* background: blue; */
				line-height: 1.4;
				overflow: hidden;
			}
			
			.isHome #contentInner {
				height: 570px;
			}
			
			.isNotHome #contentInner {
				height: 490px;
			}
	
/**
 * = 7. Birds
 * ----------------------------------------------------------
 */
	
		#wrapper #extra {
			background: transparent url(../images/layout/extra.gif) no-repeat 0 0;
		}
		
		#wrapper #extra ul {
			width: 122px;	
			height: 720px;
			list-style: none;
			margin: 0;
			padding: 0;
			
			background: transparent url(../images/blank.gif) no-repeat 0 0;
			position: relative;
		}
	
		#wrapper #extra ul li {
			list-style: none;
			margin: 0;
			padding: 0;			
			position: absolute;
			text-indent: -9999px;
		}
	
		#wrapper #extra ul li#bird_0 {
			width: 122px;
			height: 96px;
			top: 0;
			left: 0;
			text-indent: 0;
		}
	
		#wrapper #extra ul li#bird_0 a {
			display: block;
			width: 122px;
			height: 96px;
			text-indent: -9999px;
		}
		
		#wrapper #extra ul li#bird_0 a:hover {
			background: transparent url(../images/layout/about_useit-hover.gif) no-repeat 0 0;
		}
	
		#wrapper #extra ul li#bird_1 {
			right: 0;
			top: 105px;
			width: 43px;
			height: 61px;
		}
	
		#wrapper #extra ul li#bird_2 {
			right: 0;
			top: 181px;
			width: 67px;
			height: 52px;
		}
	
		#wrapper #extra ul li#bird_3 {
			right: 0;
			top: 246px;
			width: 39px;
			height: 62px;
		}
	
		#wrapper #extra ul li#bird_4 {
			right: 0;
			top: 307px;
			width: 61px;
			height: 51px;
		}
	
		#wrapper #extra ul li#bird_5 {
			right: 0;
			top: 368px;
			width: 68px;
			height: 61px;
		}
	
		#wrapper #extra ul li#bird_6 {
			right: 0;
			top: 432px;
			width: 40px;
			height: 56px;
		}
	
		#wrapper #extra ul li#bird_7 {
			right: 0;
			top: 506px;
			width: 70px;
			height: 67px;
		}
		
/**
 * = 8. About
 * ----------------------------------------------------------
 */
 
		#wrapper #about {
			background: transparent url(../images/layout/about.gif) no-repeat 0 0;
		}
	
		#wrapper #about p {
			margin-top: 34px;
			font-size: 10px;
			padding: 0 10px 0 20px;
		}
	
		#wrapper #about ul {
			list-style: none;
			margin: 2px 0 0 15px;
			padding: 0;
			width: 275px;
			height: 98px;
			background: transparent url(../images/layout/about_logos.gif) no-repeat 0 0;
		}
	
		#wrapper #about ul li {
			list-style: none;
			margin: 0;
			padding: 0;
			float: left;
		}
		
		#wrapper #about ul li a {
			display: block;
			text-indent: -9999px;
		}
	
		#wrapper #about ul li#about_1, #wrapper #about ul li#about_1 a {
			width: 72px;
			height: 55px;
		}
	
		#wrapper #about ul li#about_2, #wrapper #about ul li#about_2 a {
			width: 62px;
			height: 55px;
		}
	
		#wrapper #about ul li#about_3, #wrapper #about ul li#about_3 a {
			width: 69px;
			height: 55px;
		}
	
		#wrapper #about ul li#about_4, #wrapper #about ul li#about_4 a {
			width: 72px;
			height: 55px;
		}
	
		#wrapper #about ul li#about_5, #wrapper #about ul li#about_5 a {
			width: 72px;
			height: 43px;
		}
	
		#wrapper #about ul li#about_6, #wrapper #about ul li#about_6 a {
			width: 122px;
			height: 43px;
		}
	
		#wrapper #about ul li#about_7, #wrapper #about ul li#about_7 a {
			width: 81px;
			height: 43px;
		}
 
	
/**
 * = 9. Footer
 * ----------------------------------------------------------
 */
	
	#footer a {
		color: #fff;
	}
	
	#footer ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#footer ul li {
		list-style: none;
		margin: 0 0 0 5px;
		padding: 0 0 0 5px;
		
		float: left;
		border-left: 1px solid #fff;
		color: #fff;
		
		font-size: 10px;
	}
	
	#footer ul li.first {
		border-left: 0;
		margin-left: 0;
	}
	
	#footer ul li a:hover{
		text-decoration: none;
	}

/**
 * = Firefox Fixes
 * ----------------------------------------------------------
 */

	@-moz-document url-prefix() {

		/* enforce scrollbar */
		body {
			overflow: -moz-scrollbars-vertical;
		}

		/* Link outlines */
		*:-moz-any-link {
			overflow: hidden;
		}

		/* CSS disappearing caret fix */
		input[type="text"], input[type="password"], textarea {
			overflow: auto;
		}

	}