body {
	margin: 0px;
	padding: 20px;
	font-family:arial, "lucida console", sans-serif;
	color: white;
	text-align: justify;
}
body#plain {
	width: 1024px;
	background-color: black;
	margin-left: auto;
	margin-right: auto;
}
body#with-background {
	width: 1024px;
	background-image: url(img/background.jpg);
	background-repeat: no-repeat;
}
body#inline {
	background-color: black;
}

h1 {
	font-size: 45px; 
	font-weight: bold;
}

h2 {
	font-size: 25px; 
	font-style: italic;
}

img {
	border-width: 0px;
}

a {
	text-decoration: none; 
	color: gray;
}
	a:active {
		outline:none;
	}


.header {
	width: 939px;
	padding: 15px;
	padding-bottom: 0px;
}
#big-header { height: 305px; }
#small-header { height: 180px; }

	.left-logo{
		text-align: left;
		float: left;		
	}
	#big-left-logo { width: 450px; }
	#small-left-logo { width: 200px; }
	
	.right-logo {	
		text-align: right;
		float: right;		
	}
	#big-right-logo { width: 250px; }
	#small-right-logo { width: 230px; margin-bottom: 10px; }
	
	#big-title { 
		width: 700px;
		float: left; 
		text-align: center; 
		font-size: 45px; 
		font-weight: bold; 
	}
	#small-title { 
		float: right; 
	}
		.subtitle {
			font-size: 25px; 
			font-style: italic;
		}
	
.left-column {
	margin-top: 20px;
	padding-left: 15px;
	float: left;
}
#regular-left-column { width: 469px; padding: 0px;}
#big-left-column { width: 619px; }

	.box {
		border: 1px white solid; 
		padding: 0px; 
		margin: 0px;
	}
	
	#column-box {
		height: 600px;
	}

.right-column {
	margin-top: 20px;
	padding-right: 15px;
}	
#regular-right-column { margin-left: 495px; width: 460px; }
#small-right-column { margin-left: 625px; width: 330px; }	

	.multimedia {
		margin-top: 20px;
		text-align: center;
	}
	
	form {
		margin-top: 15px;
		margin-left: 20px;
		width: 310px;
	}
	
		label {
			width: 100px;
			float: left;
			text-align: right;
			margin-right: 0.5em;
			display: block
		}
		
		#warning {
			text-align: right;
			font-size: 11px;
		}
		
#footer {
	margin-top: 10px;
	text-align: center;
	font-size: small;
}	

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 467px; 
    height:560px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:3000px; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
		width: 427px;
		padding-left: 20px;
		padding-right: 20px;
} 

/* you may want to setup some decorations to active item */ 
/*div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
} */

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next{
	display:block;
	width:100px;
	height:20px;
	float:left;
	margin: 20px;
	cursor: pointer;
	font-size: 12px;
	white-space:nowrap;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	font-weight: bold;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button */
a.next, a.nextPage {
	text-align: right;
	clear:right;
}


/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	float:left;
	text-align: centre;
	margin: 20px 30px 20px 50px;
	width:100px;
	height:20px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 













/* the overlayed element */ 
div.overlay { 
     
    /* growing background image */ 
    background-image:url(img/overlay/white.png); 
     
    /* dimensions after the growing animation finishes  */ 
    width:600px; 
    height:470px;         
     
    /* initially overlay is hidden */ 
    display:none; 
     
    /* some padding to layout nested elements nicely  */ 
    padding:55px; 
} 
 
/* default close button positioned on upper right corner */ 
div.overlay div.close { 
    background-image:url(img/overlay/close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
} 
 
 
/* black */ 
div.overlay.black { 
    background:url(img/overlay/transparent.png) no-repeat !important; 
    color:#fff; 
} 
 
/* petrol */ 
div.overlay.petrol { 
    background:url(img/overlay/petrol.png) no-repeat !important; 
    color:#fff; 
} 
 
div.black h2, div.petrol h2 { 
    color:#ddd;         
}











/* the tooltip */
.overlay div.tooltip {
	float:none;
	background:#333333;
	color:#ffffff;
	font-size:24px;
	text-align: center;
	vertical-align: middle;
	font-weight:bold;
	margin-top:15px;
	padding:5px 100px;
	margin-left: 30px;
	height:60px;
	display:none;
	width:400px
}