/* ========================================================
		Master CSS
		Title of Project: Template
		Created by: Miska Närhi ( miska@rn.fi )		
======================================================== */

/* ========================================================
		Imports
======================================================== */

@import url("reset.css");
@import url("forms.css");
@import url("typography.css");

/* ========================================================
		Basic Misc. Styles
======================================================== */

.clearfix:after, .FormItem:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .FormItem { display: inline-block; }
/* Hides from IE-mac \*/
.clearfix, .FormItem { display: block; }
/* End hide from IE-mac */

.clear { clear: both; }

.HiddenInput { display: none; }

/* ========================================================
		Basic Layout Stuff
======================================================== */

html, body { height: 100%; }
body {
	font-size: 16px; line-height: 24px; background: #FFF url(../i/bodybg.gif) repeat-x left top;
	font-family: Calibri, "Bitstream Vera Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: center;
}
#Container {
	position: relative; min-height: 100%; height: auto;
	width: 960px; text-align: left; margin: 0 auto;
}
#body-etusivu #Container { background: url(../i/kannet.jpg) no-repeat 5px 161px; }

#header { text-align: center; }
#logo { display: block; margin: 0; padding: 0; border: 0; }
#logo img { display: block; margin: 0; padding: 0; border: 0; }

#VasenArvio, #OikeaArvio {
	position: absolute; width: 250px; padding: 35px 0 0;
	background: url(../i/5stars.gif) no-repeat 50% top;
	text-align: center;
}
#VasenArvio { top: 50px; left: 40px; }
#OikeaArvio { top: 50px; right: 40px; }

#navi li a {
	width: 192px; height: 36px;
	text-align: center; line-height: 36px;
	background: url(../i/nav.gif) no-repeat -192px top;
}
#navi li#FirstNavItem a { background-position: 0px top; }
#navi li#LastNavItem a { background-position: -384px top; }
#navi li a:hover {
	background-position: -192px -36px;
	color: #FFF;
}
#navi li#FirstNavItem a:hover { background-position: 0px -36px; }
#navi li#LastNavItem a:hover { background-position: -384px -36px; }

#Main { position: relative; height: auto; padding: 20px 75px 125px; }
#body-etusivu #Main { padding: 160px 75px 125px; }

#ruletti {
	position: relative; float: left;
	width: 220px; padding: 20px 0 20px 20px;
	border-left: 1px solid #acbdc9;
	min-height: 250px; overflow: hidden;
	margin: 30px 0 0;
}
#ruletti h2, #ruletti p { margin: 0; padding: 0; font-weight: normal; color: #0e5ba2; }
#ruletti h2 { font-size: 36px; }
#ruletti p { font-size: 16px; font-weight: normal; font-size: 14px; }

#karuselli {
	position: relative; width: 216px;
	height: 300px; overflow: hidden;
	margin: 0; text-align: center;
	background: #FFF; border: 1px solid #bcc9d2;
	z-index: 1;
}
#RideMyCarousel, #ruletti ul {
	position: absolute;
	margin: 0; padding: 0;
	list-style: none outside;
	z-index: 2; text-align: center;
}
#ruletti .jcarousel-next, #ruletti .jcarousel-prev {
	position: absolute; display: block; cursor: pointer;
	width: 28px; height: 28px; top: 85px; z-index: 6;
	margin: 0; padding: 0;
}
#ruletti .jcarousel-next { right: 5px; background: url(../i/next.jpg) no-repeat left top; }
#ruletti .jcarousel-prev { left: 5px; background: url(../i/prev.jpg) no-repeat left top; }

#RideMyCarousel li, #ruletti ul li {
	position: relative; float: left; width: 206px; height: 290px;
	list-style: none outside; margin: 5px 0; padding: 0 5px;
	text-align: center; z-index: 4;
}
#RideMyCarousel li *,
#RideMyCarousel li p,
#RideMyCarousel li h3 {
	margin: 0 auto; padding: 0;
	line-height: 18px; font-size: 12px;
	z-index: 5;
}

#OneTwoThree {
	float: left; width: 565px;
	font-size: 36px; padding: 50px 0 0;
	margin: 0; font-weight: bold;
}
#OneTwoThree h1 {
	text-align: left;
	margin: 0; padding: 0;
	font-weight: normal;
}
#OneTwoThree p { font-size: 14px; font-weight: normal; }
#First, #First h1, #First a { color: #0e5ba2; }
#Second, #Second h1, #Second a { color: #7ba6c8; }
#Third, #Third h1, #Third a { color: #acbdc9; }


#FootWrap {
	position: relative; height: 93px; width: 100%;
	margin: -93px 0 0; text-align: center;
	background: #dee4e8 url(../i/footer.gif) repeat-x left top;
}
#Footer { position: relative; width: 960px; margin: 0 auto; padding: 18px 0 0; }
address.osoite, address.puhelin, address.mese, address.email {
	float: left; width: auto; height: 48px;
	padding: 0 14px 0 52px; background-position: left top;
	background-repeat: no-repeat; line-height: 48px;
	color: #2a6dab; margin: 0; font-size: 14px;
}
address.osoite { background-image: url(../i/icon_osoite.jpg); margin-left: 140px; }
address.puhelin { background-image: url(../i/icon_puh.jpg); }
address.mese { background-image: url(../i/icon_mese.jpg); }
address.email { background-image: url(../i/icon_mail.jpg); }
#copyright { clear: both; position: relative; font-size: 12px; color: #9fa2a4; margin: -12px 0 0; padding: 0; line-height: 12px;  }
#navi, #navi li {
	margin: 0; padding: 0;
	list-style: none outside;
	position: relative;
}
#navi li, #navi li a { position: relative; float: left; }