/* CSS Document */

/* oshathai.com - Second Street */

/* =Containers

--------------------------------------------------------------------------------*/

@charset "UTF-8";

body {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	background: #7BACD4;

	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

	padding: 0;

	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

	color: #000000;

}

.twoColFixLtHdr #container {

	/*width: 850px;   using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

	background: #7BACD4; /* the auto margins (in conjunction with a width) center the page */

	border: 4px solid #7BACD4;

	text-align: left; /* this overrides the text-align: center on the body element. */

	margin-top: 0;

	margin-right: auto;

	margin-bottom: 0;

	margin-left: auto;

	padding: 0px;

}

.twoColFixLtHdr #header {

	background: #7BACD4;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */

	height: 200px;

	width: 100%;

	margin-right: auto;

	margin-left: auto;

	clear: both;

}



.twoColFixLtHdr #directions {

	position: relative;

	padding-left: 80px;

	width: 400px;

	float: right;

	top: 20px;

}





.twoColFixLtHdr #header h1 {

	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

}





.twoColFixLtHdr #menu {

	width: 780px;

	position: relative;

	left: 1px;

}



.twoColFixLtHdr #sidebar1 {

	float: left; /* since this element is floated, a width must be given */

	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */

	background: #7BACD4; /* the background color will be displayed for the length of the content in the column, but no further */

	padding: 15px 10px 15px 20px;

	position: relative;

	left: 5px;

	top: 10px;

}

.twoColFixLtHdr #mainContent {

	margin: 0 0 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */

	padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */

	position: relative;

	padding-left: 0px;

	width: 1150px;

	top: 10px;

}

.twoColFixLtHdr #footer {

	/* padding: 0 10px 0 20px;  this padding matches the left alignment of the elements in the divs that appear above it. */

	background:#7BACD4;

}

.twoColFixLtHdr #footer p {

	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

	text-align: center;

}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

	float: right;

	margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page */

	float: left;

	margin-right: 8px;

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

	clear:both;

	height:0;

	font-size: 1px;

	line-height: 0px;

}

#header h1, #header h2, #header p {

	margin-left:2px;

	padding-right:2px;

}

#active2 #tab2, #active3 #tab3, #active4 #tab4, #active5 #tab5 {

	font-weight:bold;

	text-decoration:none;

	color:#000;

}

/* banner div */



  #banner {

	width: 776px;

/*	height: 200px;*/

	height: 400px;



}

/* Logo div */



#logo {

	position: relative;

	/* top: -160px; */

	top: 0px;

	right: 0px;

	z-index: 9;

	height: 80px;

	width: 160px;

	border: medium solid #7BACD4;

}

/* Start of Column CSS */

#container2 {

	clear:left;

	width:780px;

	overflow:hidden;

	background:#7BACD4;

	margin-right: auto;

	margin-left: auto;

}

#container1 {

	float:left;

	width:780px;

	background:#7BACD4; /* column 1 background colour */

}

#col1 {

	float:left;

	width:200px;

	position:relative;

	left:0px;

	padding-left: 5px;

	text-align: center;

}

#col2 {

	float:left;

	width:200px;

	position:relative;

	left:80px;

	padding-left: 5px;

	text-align: center;

}

.grid_5 {

	width: 525px;

}

/* `Clear Floated Elements

----------------------------------------------------------------------------------------------------*/



/* http://sonspring.com/journal/clearing-floats */



.clear {

	clear: both;

	display: block;

	overflow: hidden;

	visibility: hidden;

	width: 0;

	height: 0;

}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */



.clearfix:after {

	clear: both;

	content:' ';

	display: block;

	font-size: 0;

	line-height: 0;

	visibility: hidden;

	width: 0;

	height: 0;

}

.clearfix {

	display: inline-block;

}

* html .clearfix {

	height: 1%;

}

.clearfix {

	display: block;

}

body, td, th {

	font-family: Arial, Helvetica;

	font-size: 12px;

}

body {

	background-color: #7BACD4;

}

a {

	font-size: 12px;

	color: #9C091C;

}

a:visited {

	color: #9C091C;

}

a:hover {

	color: #ffffff;

}

a:active {

	color: #9C091C;

}

.style1 {

	color: #FFFFFF;

	font-weight: bold;

}

/* WINE STYLES */

.wine_title {

	color: #7BACD4;

	font: bold 12px Arial, Helvetica,;

	text-transform: uppercase;

	padding-top: 10px;

	padding-bottom: -10px;

}

.wine_name {

	color: #000;

	font: bold 12px Arial, Helvetica,;

}

.wine_price {

	color: #000;

	font: normal 12px Arial, Helvetica,;

	padding-left: 15px;

}



.wine_description {

	color: #000;

	font: normal 12px Arial, Helvetica,;

	padding-left: 5px;

	width: 450px;

}

/* SPECIALTY DRINK STYLES */



.ingredient {

	color: #efefef;

	font:  12px Arial, Helvetica,;

	padding-left: 15px;

	width: 200px;

	float: left;

}

.amount {

	color: #999999;

	font:  bold 12px Arial, Helvetica,;

	text-align: left;

	padding-left: 50px;

}

.description {

	color: #efefef;

	font:   12px Arial, Helvetica,;

	text-align: justify;

	padding-right: 20px;

	margin-right: 20px;

	margin-left: 20px;

}

/* MENU STYLES */



.menu_title {

	color: #9C091C;

	text-transform: uppercase;

	padding-top: 10px;

	padding-bottom: 10px;

	font-family: Arial, Helvetica,;

	font-size: 16px;

	font-weight: bold;

}

.menu_item {

	font: bold 13px Arial, Helvetica,;

	font-weight: bold;

}

.menu_price {

	font-weight: bold;

	text-align: right;

	padding-left: 15px;

	color: #666;

}

.menu_description {

	font-weight: normal;

}

/* FOOTER STYLES */





.footer {
	font-size: 10px;
	background-color: #7BACD4;
	display: block;
	position: relative;
	top: 120px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	right: 30px;
}

.thai {

	color: #7BACD4

}



a.kccommunications  {

	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

	font-size: 10px;

	

}



/* Google map */





iframe {

	padding-top: 10px;

	padding-bottom: 10px;

	padding-left: 20px;

}





/* Mission Banner */



#slider1 {

	width: 850px; /* important to be same as image width */

	height: 200px; /* important to be same as image height */

	position: relative; /* important */

	overflow: hidden; /* important */

	left: 0px;

	top: 0px;

}



#slider1Content {

	width: 850px; /* important to be same as image width or wider */

	position: absolute;

	top: 0px;

	left: 0px;

}

.slider1Image {

	display: none;

	position: absolute;

	left: 0px;

	top: 0px;

}

.slider1Image span {

	position: absolute;

	font: 18px/20px Verdana, Helvetica, sans-serif;

	font-weight:bold;

	width: 700px;

	background-color: #7BACD4;

	filter: alpha(opacity=70);

	-moz-opacity: 0.7;

	-khtml-opacity: 0.7;

	opacity: 0.7;

	color: #000;

	display: none;

	padding-top: 10px;

	padding-right: 0px;

	padding-bottom: 38px;

	padding-left: 0px;

}

.clear {

	clear: both;

}

.slider1Image span strong {

    font-size: 14px;

}

.left {

	top: 0px;

    left: 0px;

	width: 280px !important;

	height: 20px;

}

.right {

	right: 0px;

	bottom: 30px;

	width: 280px !important;

	height: 20px;

}

ul { list-style-type: none;}



/* delivery */

.delivery {
	font-size: 10px;
	background-color: #7BACD4;
	display: block;
	clear: both;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
}



#dots_l {
	position: absolute;
	top: 500px;
	width: 339px;
	height: 19px;
	z-index: 3;
}



#dots_r {
	position: absolute;
	top: 500px;
	width: 339px;
	height: 19px;
	z-index: 4;
	left: 750px;
}

#delivery_title {
	top: 20px;
	width: 1100px;
	height: 40px;
	z-index: 16;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	right: 25px;
}