/* ==============================================================================================
	
	Project	: BNI Tokyo Branch Official Site
	
	Date : 15th October 2008

============================================================================================== */
/* 1. BASE

1.1	Reset
-----------------------------------------------------------------------------------------------*/	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,	b, u, i, center,	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0; padding: 0; border: 0; outline: 0;	font-size: 100%; 
		vertical-align: baseline; background: transparent;
	}
	body { line-height: 1; }
	ol, ul { list-style: none;}
	blockquote, q { quotes: none;	}
	blockquote:before, 	blockquote:after,	q:before, q:after {	content: ''; content: none;	}
	:focus {outline: 0;}
	ins {	text-decoration: none;}
	del { text-decoration: line-through;}
	table {	border-collapse: collapse;border-spacing: 0;}

/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body { background: #fff; font: 62.5% Arial, Helvetica, sans-serif; text-align: left; color: #333; }
	hr { display: none;	}			
	strong {font-weight: bold;}
	em {font-style: italic;}
	abbr, acronym {	border-bottom: 1px dotted #999; cursor: help;}
	input, textarea, select {font: 1.2em Arial, Helvetica, sans-serif;}
	a {color: #f60;text-decoration: none;}
	a:hover, a:active {color: #f00; text-decoration: none;}
	
/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	
	.hide {	display: none;}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------*/	
	.container {
		width:730px;
		margin-left:5px;	
		position: relative;
		text-align: left;
	}
	
	#header {
		height: 96px;
	}
	
	#content-wrapper {
		width: 550px; 
		float: right;
	}
		
	#sidebar {
		width: 180px;
		float: left;
		padding-bottom: 15px;
	}
	
	#footer {
		clear: both;
	}
		

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 447px;
		height: 41px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		top: 40px;
		left: 8px;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(img/logo.jpg) no-repeat;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
	#header .topnav, #header .search, #header .lang {text-align: right; display: block;}
	#header .topnav, #header .lang {
		font-size: 1.1em;
		line-height: 30px;
		height: 30px;
		padding: 0 5px;
		color: #666;
	}
	#header .lang {font-size: 1.2em;}
	#header a { color: #666;}
	#header a:hover { color: #F00;}
	
	#header .search form {margin:0; padding:0;}
	#header .search label {font-size: 1.2em;}
	#header .search a img {vertical-align: top;}
	#header .search input {font-size: 1.2em; margin:0; padding: 0 5px;}

/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
	#navigation {height: 30px;}
	#headline {	display: block;	}
	#content {
		padding: 15px 0 10px 15px;
		font-size: 1.2em;
		line-height: 1.4em;
		color: #444;
	}
		#content p { margin-bottom: 1.0em; }
		#content h2 {font-size: 14px; margin-bottom: 0.5em; color: #333;}
		#content h2.title { background:url(img/bg_h1.jpg) no-repeat; height: 26px; line-height: 26px; 
			padding:0 0px 0px 15px; color: #333; margin-bottom: 1.0em;}	
		#content h3 { font-size: 13px; margin-bottom: 0.5em; color: #333;	}
		#content h4 {	font-size: 12px; margin-bottom: 0.5em; color: #333; }
		#content small {	font-size: 11px;}
		#content .post {	margin-bottom: 15px;}
		#content .alignleft {float: left; margin-right: 10px;}
		#content .alignright {float: right; margin-left: 10px;}
		#content ul { list-style: disc;	padding: 0 0 1.0em 0;}
		#content ol { list-style: decimal;	padding: 0 0 1.0em 0;}
		#content li ul, #content li ol { padding: 0.25em 0 0 0;}
		#content ul li, #content ol li { margin-left: 30px; padding-bottom: 5px;}
		#content li li { margin-left: 15px;	padding-bottom: 2px;}
	
	#gallery {
		background: #B1A897;
		margin-bottom: 10px;
	}
		#gallery .g_content {text-align: center;
			padding: 18px 14px 5px 14px;
			border-bottom: 1px solid #9C8F7C;
			border-top: 1px solid #D1CBBF;
		}
		#gallery .g_content img {border: 1px solid #fff;}
		#gallery .g_image_title {padding: 7px 0;}
		#gallery #details {
			color: #fff;
			font-weight: bold;
		}
	
		#g_controls {border-top: 1px solid #D1CBBF; border-bottom: 1px solid #9C8F7C; padding: 7px 0; height: 16px;}
			.ss-controls {float: left; padding-left: 15px;}
			.ss-controls span {color: #FFF; cursor: pointer;}
			.ss-controls a:hover span {color: #f00;}
			.nav-controls {float: right; padding-right: 15px;}
			.nav-controls a { padding: 5px; color: #fff;}
		
		#gallery_nav {text-align: center; padding: 10px 0; border-top: 1px solid #D1CBBF; overflow: hidden;}
		#gallery_nav ul li {display: inline; padding: 3px;}
		#gallery_nav ul li img {border: 1px solid #eee;}
		#gallery_nav .pagination {padding: 7px 0;}
		#gallery_nav .pagination a, #gallery_nav .pagination strong {
			display: inline; margin-right: 2px;	padding: 4px 7px 2px 7px;
			border: 1px solid #9C8F7C; color: #FFF;
		}
		#gallery_nav .pagination strong { background: #D1CBBF;color: #333;}
		#gallery_nav .pagination a:hover { background: #D1CBBF; text-decoration: none; color: #f00;	}	
	
/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
	#sidebar h2 {font-size: 1.3em; color: #f60; margin: 10px 0 5px 0;}
	#sidebar img {display: block;}
	
	#sidebar #kurs {color: #333; padding-top: 10px;}
	#sidebar #kurs table {width: 100%; clear: both; border: 1px solid #eee;}
	#sidebar #kurs .kurs_date, #sidebar #kurs .kurs_time,
	#sidebar #kurs th, #sidebar #kurs td {font-size: 1.1em; line-height: 1.5em;}
	#sidebar #kurs th {text-align: center; color: #fff; background: url(img/th_bg.jpg) repeat-x top left; font-size: 12px; line-height: 20px;}
	#sidebar #kurs td {text-align: right; padding: 0 8px; line-height: 20px; background: #FEEECD; border-top: 1px solid #FEE4AF;}
	#sidebar #kurs .kurs_date {float: left; width: 50%;}
	#sidebar #kurs .kurs_time {float: right; width: 50%; text-align: right;}
	#sidebar #kurs td.curr { text-align: left;}
	
	#sidebar #wClock, #sidebar .banner, #sidebar #weather, #sidebar #links {margin-top: 20px;}	
	#sidebar #wClock table {width: 100%;}

	#sidebar #weather #weather_img {border-top: 1px solid #eee; background: #f7f7f7;}
	#sidebar #weather img {padding: 0 10px; float:left;}
	#sidebar #weather #we_temp {font-size: 1.8em; line-height: 34px; color: #666; color: #F3BD4F; font-weight: bold;}
	/* #sidebar #weather img {width: 120px; padding-left: 5px;} */
	#sidebar #weather #weather_info {font-size: 1.2em; padding-bottom: 5px; border-bottom: 1px solid #eee; background: #f7f7f7;}
	#sidebar #weather #weather_info li {text-align: right;}
	#sidebar #weather #weather_info li span {width: 90px; text-align: left; display: block; overflow: hidden; padding-left: 5px; float:right;}
	#sidebar #weather a {color: #666; font-size: 11px;}
	#sidebar #weather a:hover {color: #f00;}

	#sidebar #links ul {list-style: disc; margin-left: 18px; }
	#sidebar #links li { font-size: 1.2em; line-height: 1.5em;}
	#sidebar #links li a {color: #333; text-decoration: none;}
	#sidebar #links li a:hover {color: #f00;}
	#sidebar .banner {text-align: center;}

	.rate{width:500px;}

/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/	

	#footer {
		background: url(img/bg_footer.jpg) repeat-x top left;
		font-size: 1.1em;
		line-height: 40px;
		color: #333;
		height: 40px;
		text-align: center;
		margin-bottom: 50px;
	}
	#footer a {color: #222; text-decoration: none;}
	#footer a:hover {text-decoration: underline;}