/*
 * Sari Bunga Hotel
 *
 * Author : Angga Negara <dispedia@gmail.com>
 * Date : March 16, 2009
 */

@import url('reset.css');

body {
	font: 62.5%/1.3em Helvetica, Arial, Tahoma, sans-serif;
	color: #333;
	background: transparent url('../images/bg.jpg') left top repeat;
}

.cleaner { clear: both; }

#wrapper { margin: 0 auto; width: 927px; overflow: hidden; }

	#logo { position: relative; height: 67px; }
	#logo h1, #logo h2 { color: white; font-variant: small-caps; position: absolute; font-family: 'Adobe Caslon Pro', Georgia, serif;}
	#logo h1 { font-size: 26px; font-weight: bold; top: 30px; left: 90px; height: 30px !important; vertical-align: top !important; }
	#logo h1 { top: 30px !important; top: 18px; }
	#logo h2 { font-size: 20px; font-weight: bold; top: 45px; left: 180px; }
	.logooffset { width: 38px; height: 48px; position: absolute; left: 45px; top: 15px; background: transparent url('../images/logo.jpg') left top no-repeat; }
	
	ul#menu { position: absolute; top: 30px; right: 0; width: 423px; height: 24px; overflow: hidden; }
	ul#menu li { list-style: none; display: inline; }
	ul#menu li a { display: block; float: left; height: 24px; background: transparent url('../images/menu.png') left top no-repeat; }
	
		ul#menu li a#m-1 { width: 59px; background-position: 0 0; }
		ul#menu li a#m-2 { width: 75px; background-position: -59px 0; }
		ul#menu li a#m-3 { width: 128px; background-position: -134px 0; }
		ul#menu li a#m-4 { width: 70px; background-position: -262px 0; }
		ul#menu li a#m-5 { width: 91px; background-position: -332px 0; }
		
		ul#menu li a#m-1:hover { background-position: 0 -24px; }
		ul#menu li a#m-2:hover { background-position: -59px -24px; }
		ul#menu li a#m-3:hover { background-position: -134px -24px; }
		ul#menu li a#m-4:hover { background-position: -262px -24px; }
		ul#menu li a#m-5:hover { background-position: -332px -24px; }
		
		#m-home    ul#menu li a#m-1 { background-position: 0 -24px; }
		#m-about   ul#menu li a#m-2 { background-position: -59px -24px; }
		#m-rooms   ul#menu li a#m-3 { background-position: -134px -24px; }
		#m-gallery ul#menu li a#m-4 { background-position: -262px -24px; }
		#m-contact ul#menu li a#m-5 { background-position: -332px -24px; }
	
	.topwrapper { height: 13px; background: transparent url('../images/topwrapper.png') left top no-repeat; }
	.bottomwrapper { height: 16px; background: transparent url('../images/bottomwrapper.png') left top no-repeat; }
	
#bodywrapper { width: 927px; background: transparent url('../images/bodybg.png') center top repeat-y; }
#innerframe { width: 889px; margin: 0 auto; font-size: 12px; line-height: 150%; overflow: hidden; }

	.mainimage { width: 889px; height: 323px; background: transparent url('../images/mainimage.jpg') center bottom no-repeat; }
	
	#innerframe h1 { font-variant: small-caps; font-family: 'Adobe caslon pro', Georgia, serif; font-size: 20px; color: #007ac8; }
	#innerframe h1 { border-bottom: 1px dotted #CCC; margin-bottom: 15px; padding-bottom: 7px; }
	#innerframe h3 { font-variant: small-caps; font-family: 'Adobe caslon pro', Georgia, serif; font-size: 16px; color: #007ac8; }
	#innerframe h4 { font-size: 11px; color: #888; font-style: italic; }
	#innerframe p { margin-bottom: 15px; color: #333; line-height: 180%; }
	#innerframe p:last-child { margin: 0; }
	
	ul.facilities li { display: block; background-color: #e2f5ff; border-bottom: 1px solid #FFF; padding: 2px 0 2px 10px; font-weight: bold; }
	
	#left-wide { width: 610px; float: left; margin-right: 30px; }
	#right-narrow { width: 245px; float: left; font-size: .9em; }
	
	.line p { background: transparent url('../images/line.png') left top repeat; }
	.newstitle { color: #007ac8; font-weight: bold; font-size: 1.1em; }
	.formtitle { color: #007ac8; font-weight: bold; font-size: .9em; }
	.grayborder { border: 1px solid #CCC; }
	.grayborder:hover { border: 1px solid #007ac8; }
	.roomname { color: #007ac8; font-size: 16px; font-weight: normal; }
	
	.gal-wrap { display: block; overflow: hidden; margin-bottom: 10px; }
		.r-left { width: 170px; float: left; margin-right: 20px; }
		.r-right { width: 400px; float: left; padding-left: 10px; border-left: 1px solid #DDD; }
	
	.form input.i { font-size: 12px; font-family: Arial, Tahoma, sans-serif;}
	.form textarea.t { font-size: 12px; font-family: Arial, Tahoma, sans-serif;}
	.form input.cr { font-size: 15px; font-family: 'Andale Mono', monospace; border: 0; padding: 0; margin: 10px 0; letter-spacing: 3px; }
	.form input.ci { font-size: 15px; font-family: 'Andale Mono', monospace; border: 1px solid #CCC; padding: 3px; margin: 10px 0; letter-spacing: 3px; }
	
#footer { width: 500px; margin: 10px auto 10px auto; color: white; font-size: 10px; text-align: center; text-transform: uppercase; }