/*---------------------------------------------------------------
   AUTHOR:  	Boutros AbiChedid 
   START DATE:  July 16, 2009
   PURPOSE: 	Stylesheet for the computer screen. 
   				Kyoto Restaurant Website.
 ----------------------------------------------------------------*/

/***** Error in case Javascript is disabled *****/ 
div.error { 
	background-color:inherit; 
	color:#FF1355;
	margin-left:auto; 
	margin-right:auto;
	padding-left:5%;
	padding-right:5%;
	text-align: center;
}

div.error span { 
	font-size: 115%;
	font-weight: bold;
}

/************ Main section ************/ 
body{
	margin: 0 ;
	padding:0;
	font: normal 0.95em  Arial, Helvetica, sans-serif;
	line-height: 1.4em;
	color: #444;
	background: #CCC url(../images/background.jpg) repeat;
}

h1 {
	margin:0px;
	font-weight: bold;
	font-size: 19px;
	color:#518b10;
	background-color: inherit;
}

h2 {
	font-weight: bold;
	margin-bottom: 0px;
	font-size: 14px;
	color:#427707;
	padding-top: 20px;
	background-color: inherit;
}

h3 {
	font-weight: bold;
	font-size: 13px;
	color:#222;
	padding: 0;
	background-color: inherit;
}

#container {
	margin: auto;
	width: 770px;
	background: #fff;
	border-top:3px solid #960;
	color: inherit;
}

img {
	margin:0;
	padding: 5px;
	border: 1px solid #777;
}

/************* Header Section **************/
#header, #header1 {
	float: left;
	clear: left;
	width: 483px;
	height: 191px;
}

#header {
	color: inherit;
	background: #FFF url(../images/header.png) no-repeat;
}
#header1 {
	color: inherit;
	background: #FFF url(../images/header1.jpg) no-repeat;
}
#slogan, #slogan1 {
	width: 483px;
	text-align: center;
	padding-left: 100px; /* decreased from 140px to 100px in order to satisfy IE6, and Increase font size.*/
	font-weight: bold;
	font-size: 18px;
}

#slogan {
	margin-top: 40px;
	color: #000;
	background-color: transparent; /* this must be transparent in order to satisfy non IE browsers. */
}

#slogan1 {
	margin-top: 90px;
	color: #000033;
	background-color: transparent; /* this must be transparent in order to satisfy non IE browsers. */
}

.hide_in_screen {
	display: none;
}

#title {
	float: left;
	width: auto;
	margin: 0;
	padding: 0px 10px 0px 20px;
}

#title img{
	border: 0;
	width: 290px;
	height: 43px;	
}

/************* Left Section **************/

#left_content {
	float: left;
	margin: 30px 20px 15px 20px;
	padding-left: 10px;
	padding-bottom: 10px;
	text-align: justify;
	width: 413px;
}

p { 
	margin:0.5em 0;
	padding: 0;
	text-align: justify;
}
#left_content p:first-letter, #right_content p:first-letter, #content p:first-letter  {
	color: #518b10;
	padding-left: 13px;
	font-size: 1.3em;
	font-style:oblique;
	background-color: inherit;
}
.explain {
	font-weight: bold;
	font-size: 15px;
	color:#427707;
	background-color: inherit;
	height: 31px;
	padding-top: 20px;
	padding-left: 45px;
}

#left_column {
	float: left;
	width: 483px;
}

#left_content a, #left_content a:link, #right_content a, #right_content a:link, #content a, #content a:link {
	padding: 0.2em 0.1em 0.1em 1em;
    background-color: inherit;
    color: #0033CC; 
    text-decoration: none;
	text-align: right;
	font:  0.9em "Lucida Sans Unicode",  "Lucida Grande", sans-serif;
}   
#left_content a:visited, #right_content a:visited, #content a:visited {
	color: #f00; 
	background-color: inherit;   
}
#left_content a:hover, #right_content a:hover, #content a:hover {
	color: #518b10; 
	background: #eee url(../images/check.png) left center no-repeat;
	text-decoration:none;
}
#left_content a:active, #right_content a:active, #content a:active{
	color: #f00; 
	background-color: inherit; 
	text-decoration:none;  
}

a.contact {
	font-size: 0.85em;
}

/************* Right Section **************/

#right_column {
	float: right;
	width: 287px;
	color: inherit;
	background-color: #EAF3F6;
	clear: right; /* to satisfy IE6 -- does not affect other browsers.*/
	margin-left:-142px;  /* to satisfy IE6 -- does not affect other browsers.*/
}

#right_content {
	float: left;
	width: 280px;
	padding-left: 10px;
	padding-bottom: 15px;
	text-align: justify;
	font-size: 0.9em;
}

#right_content div#text {
	padding: 0 20px 0 0;		
	font-size: 0.92em;
}

div#text ul li {
	list-style:disc;
	list-style-position: outside;
}

#right_content h2{
	padding-top: 20px;
}

#quickcontact {
	width: 269px;
	padding: 0px 0px 6px 15px;
	height: 93px;
	float: left;
	color: #fff;	
	background: #57801A;
	font: normal 14px 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
	border-right: 4px solid #693F00;
	overflow:auto; /* In order to satisfy larger fonts */
}
/* the hover pseudo property is not supported for images in IE6, it works for links only in IE6. */
img#map:hover {
	cursor:help;
}

#quickcontact p {
	padding: 0;
	margin: 0;
}
#calendar{
	text-align:center;
	margin: 10px auto;
	color: #000;
	background-color: inherit;
	font: bold 13px "Courier New", Courier, monospace;
}

/*************** Content Section for Lunch and Diner Menu pages *****************/

#fullwidthcolumn {
	width: 770px;
	margin: 0;
	padding: 0;	
}
/* I had to put the overflow below and not in the #fullwidthcolumn so that it work in Safari.
   Unlike all other browsers, the Overflow y-scrolling is not working in Opera, and there 
   seems not to be a fix for it.
*/
 #content {
	float: left;
	padding: 0 5px 10px 5px;
	text-align: justify;
	width: 755px;	
	margin: 10px 2px;
	height: 475px; 
	overflow: auto; /* 'scroll' indicates that vertical and horizontal scrollbar will be added to the element, needed or not.
                       'auto' indicates that vertical and/or horizontal scrollbars will be added only if they are necessary.*/
}

/* This is probably overcoded in order to satisfy the 5 browsers I am testing on */
#content ul li{
	list-style: none;
	border-bottom: 1px dashed #999;
}

#contentrightcolumn ul, #contentleftcolumn ul, #dinner_contentrightcolumn ul, #dinner_contentleftcolumn ul, #dinner2_contentrightcolumn ul, #dinner2_contentleftcolumn ul{ 
	padding: 1px 0 3px 5px;
	font-size: 0.82em;
	margin: 0;
}

#content ul.price li{
	float: right;
	width:auto;
	padding: 4px 0 0 10px;
	border-bottom: 0;
	font-size: 1em;
	font-weight: bold;
}

#content ul.section {
	padding: 0;	
}

#content ul.section li{
	float: right;
	width:auto;
	padding: 0 0 0 10px;
	border-bottom: 0;
}

#contentleftcolumn, #dinner_contentleftcolumn, #dinner2_contentleftcolumn { 
   padding: 0;
   margin: 0 370px 0 5px;
}

#contentleftcolumn, #contentrightcolumn  { 
   background: #fff url(../images/contentbackground.jpg) repeat;
   color: inherit;
}

#dinner_contentleftcolumn, #dinner_contentrightcolumn { 
   background: #fff url(../images/contentbackground1.jpg) repeat;
   color: inherit;
}

#dinner2_contentleftcolumn, #dinner2_contentrightcolumn  { 
   background: #fff url(../images/contentbackground2.jpg) repeat; 
   color: inherit;
}
       
#contentrightcolumn, #dinner_contentrightcolumn, #dinner2_contentrightcolumn { 
   padding: 0;
   float: right;
   width: 350px;
   margin: 0;
}

#contentrightcolumn h2, #contentleftcolumn h2, #dinner_contentrightcolumn h2, #dinner_contentleftcolumn h2,  #dinner2_contentrightcolumn h2, #dinner2_contentleftcolumn h2 { 
   padding: 0;
   margin: 0;
}

h2.menu_header, h2.dinner_menu_header{
	text-align: center;
	margin: 8px 0 8px 0;
	padding: 2px;
    font-family: 'Monotype Corsiva', cursive;
	font-size:1.4em;
}

h2.menu_header{
	color:#3a4a3f;
	background-color: #eaeaea;
	border-bottom: 1px solid #999;
}

h2.dinner_menu_header{
	color:#333;
	background-color: #DCDDFC;
	border-bottom: 1px solid #969DF3;
}

h3.menu_header, h3.dinner_menu_header{
	text-align: left;
	margin: 8px 0 8px 0;
	padding: 2px;
    font-family: 'Monotype Corsiva', cursive;
	font-size:1.1em;
}

h3.menu_header{
	color:#3a4a3f;
	background-color: transparent; /* this must be transparent in order to satisfy non IE browsers in the menu pages */
	border: 0;
}

h3.dinner_menu_header{
	color:#333;
	background-color: transparent; /* this must be transparent in order to satisfy non IE browsers in the menu pages */
	border:0;
}

/************ Menu **************/

#navmenu {
	padding: 0; 
	font-size: 14px;
	border-bottom: 1px solid  #547d16;
	border-top: 2px solid #547d16;
	float: left;
	background: #3a3f3a;
	color: inherit;
	height: 140px;
	width: 287px;
	margin-top: 2px;
}  
#navmenu a, #navmenu a:link {
	display: block; 
	margin: 0;
	height: 30px;
	border-bottom: 1px solid gray;
	text-decoration: none; 
	text-align: center;
	padding: 2px;
	color: #edf1e8;
	background-color: inherit;
}
#navmenu a:hover {
	background: #d2d2d2 url(../images/icon.png) left center no-repeat;
	border-right: 4px solid #693F00;
	color: #000;
}

/************ Footer ************/

#footer {
	width:770px;
	clear: both;
	padding: 3px 0px;
	border-top:3px solid #960;
	font-size: 11px;
	background: #545e54;
	color: #fff;
}
#footer p {	
	text-align: center;
	margin:0; 
	padding:0;
}
#footer a, #footer a:link{
	color: #000;
	background-color: inherit;
	text-decoration: underline;
}
#footer a:visited {
	color: #d00 ;
	background-color: inherit;
} 
#footer a:hover  {
	text-decoration: none;
	color: #222 !important;
	background-color: inherit;
}

#footer a:active  {
	text-decoration: none;
	color: #0f0 ;
	background-color: inherit;
}
#footer span {
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1.0em;
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #fff;
}

/************ General classes ************/

.boldit {
	font-weight:bold;
}

.center {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.right {
	text-align: right;	
}

.paddingright {
	padding-right: 20px;
}

.paddingright1 {
	padding-right: 40px;
}

.paddingleft {
	padding-left: 60px;
}

.paddingleft1 {
	padding-left: 30px;
}

.justify {
	text-align: justify;
}

.small {
	font-size:0.75em;
}

.big {
  	font-size: 1.3em; 
}
.medium {
  	font-size: 1.1em; 
}
.left {
	float: left;
	position:relative;
	width:10%;
}
.smallcaps {
	font-variant: small-caps;
}
.oblique {
	font-style: oblique; 
}
.black {
	color:#222;
	background-color: inherit;
}
.red {
	color:red;
	background-color:inherit;
	font-size: 90%;
}

.green {
	color:inherit;
	background-color: #006600;
}
.topspace {
	margin-top:15px;
}

/* Here I get a validation warning: "Same color for background-color and color." 
 That's OK since I need to satify all Non IE browsers (i.e. Gecko based browsers.) */
hr.separator {
   color: #518b10; 
   background-color: #518b10;
   width: 60%;
   height: 2px;
   text-align: center;
   margin: 6px auto;
}

.border {
	padding: 0px;
	border: 2px solid #333;
}
.info {
 	width:13px; 
	height: 13px;
	cursor: help;
	margin:0 3px -1px 0;
	padding: 0;
	border:0;
}

.noborder {
  border-bottom: 0;
}

/************ Image dimensions ************/
img#chef {
	width: 260px;
	height:220px;
}

img#chef1 {
	width: 260px;
	height:148px;
}

/************ Contact Us ************/

form#contact_form {
	margin:0;
	padding: 0;
}

table#contactus {
	text-align:center;
	margin: auto;
}

table#contactus th{
	padding:2px;
	margin-top: 0px;
	margin-bottom: 10px;
	background-color:#518b10; 
	color: #000;
}

table#contactus td{
	padding-left:10px;
	padding-top:3px;
	padding-bottom: 3px;
	text-align:left;
}

.submit_clear {
	width:100px;
	margin-right:11px;
	color:#000;
	background-color:#d2d2d2; 
	font-weight:bold; 
	padding:3px;
}

input, textarea, select{
	border:1px solid #777;
	color:#121212;
	padding:3px;
	background-color: inherit;
}
/* this property does not work for IE6, but that's OK */
input:hover, textarea:hover, select:hover{
	border:1px dashed #518b10;
	color:#518b10; 
	background-color: #fff;
}

/* for this declarations IE behaves differently than Mozilla, Safari, Google chrome, and Opera */ 
input:focus, textarea:focus, select:focus{
	border:1px solid #518b10;
}

/************ response page ************/
#response {
	text-align: center;
	margin: 40px auto 90px auto;
}

span.header_info {
	font-size: 85%;
	color: #006;
	background-color: inherit; 
	font-style: italic;
}

span.header_info_big {
	font-size: 135%;
}