/*=============== layout =============== */
* { margin:0; padding:0;}
#header {height:200px; position:relative;}
#header, #content, #footer { font-size:0.75em; width:982px; margin:0 auto;}

.col-1, .col-2, .col-3 { float:left;}

/*homepage*/
#home #content .col-1 {width:609px; margin-right:19px;}
#home #content .col-1 .col-1 { width:300px; margin-right:9px;}
#home #content .col-1 .col-2 { width:300px;}
#home #content .col-2 { width:320px;}

/*about us*/
#aboutus #content .col-1 { width:270px; margin-right:40px;}
#aboutus #content .col-2 { width:300px; margin-right:9px;}
#aboutus #content .col-3 { width:320px;}

/*menu pages*/
#menu #content .col-1 {width:370px; margin: 0 0 0 0;}
#menu #content .col-2 { width:559px;}

/*contact us*/
#contactus #content .col-1 { width:550px; margin-right:40px; margin-top: 16px;}
#contactus #content .col-2 { width:300px;}

/*footer*/
#footer {height:85px;}


/*=============== navigation =============== */
ul.yellow { padding:5px; margin:10px 0;	list-style:none; background-color:transparent; border-bottom:1px solid #e7e7e7; float:right; clear:right;}
ul.yellow li { float:left; display:inline; /*For ignore double margin in IE6*/	margin:0 10px;}
ul.yellow li a { text-decoration:none;	float:left;	color:#4c2918; cursor: pointer; font:900 14px/22px "Arial", Helvetica, sans-serif;}
ul.yellow li a span { margin:0 10px 0 -10px; padding:1px 8px 5px 18px; position:relative; /*To fix IE6 problem (not displaying)*/	float:left;}
ul.yellow li a.current, ul.yellow li a:hover {	background: url(images/yellow.gif) no-repeat top right; 	color: #73342c;}
ul.yellow li a.current span, ul.yellow li a:hover span {	background: url(images/yellow.gif) no-repeat top left;}


/*================== header ====================*/
#header > .logo { position:absolute; left:100px; top:10px; height:178px; z-index:2;}
#header > .extra { position:absolute; top:75px; left:570px;}
#header > .extra1 { position:absolute; top:110px; left:400px;}
#header > .extra2 { position:absolute; top:75px; left:550px;}


/*================== homepage animation ====================*/
#loopedSlider { position:absolute; right:-50px; bottom:0 !important; bottom:-1px;}
#loopedSlider .container { width:662px; height:396px; overflow:hidden; position:relative;}
#loopedSlider .slides { position:absolute; top:0; left:0; }
#loopedSlider .slides div { position:absolute; top:0; left:0; width:662px; height:396px;}
#loopedSlider ul.pagination { width:318px; height:56px; background:url(images/extra-nav-bg.png) no-repeat left top; position:absolute; left:-350px; bottom:36px;}
#loopedSlider ul.pagination li { float:left; margin-right:7px; padding-top:18px;}
#loopedSlider ul.pagination li.alt { color: white; text-transform:uppercase; font-family:"Arial Narrow, Arial, Helvetica, sans-serif"; font-size:1.2em; padding:20px 0 0 30px; margin-right:10px;}
#loopedSlider ul.pagination li a { width:21px; height:21px; display:block; background:url(images/marker.gif) no-repeat left top;}
#loopedSlider ul.pagination li a:hover,
#loopedSlider ul.pagination li.active a { background:url(images/marker-act.gif) no-repeat left top; }


/*==================other====================*/
body { background:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:100%; line-height:1em; color: black; min-width:982px; background-image: url(images/crepe-background.jpg); background-position: center}
.wrapper { width:100%; overflow:hidden;}
.container { width:100%;}
img {border:0; vertical-align:top; text-align:left;}
#content { background-color: white; }
p { margin:0; padding:0;}
object { vertical-align:top; outline:none;}
#cont-page-coffeetea { font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; color:#55242a; line-height:16px;	font-size:1.2em; overflow:hidden; width:100%;}
#cont-page-food { width:550px; font-family:Tahoma, Geneva, Arial, Helvetica, sans-serif; font-size:1em; color:#ffffff; line-height:16px;}
.img-box img { margin-bottom:20px; display:block;}
.img-box-about {
	width:225px;
	height:525px;
	overflow:hidden;
	float:left;
	
}
.img-box-about > img {float:left; margin:0 34px 0 0;}

.img-box1 { width:100%; overflow:hidden;}
.img-box1 > img { float:left; margin:0 34px 0 0;}
.spacer2px { font-size:2px; line-height:2px;}
.p1 { margin-bottom:20px;}
.line-hor { border-bottom:1px solid #ebebeb; margin:13px 0; overflow:hidden; font-size:0; line-height:0;}

/*================== shortcuts ====================*/
.fleft { float:left;}
.fright { float:right;  width: 100%; }
.clear { clear:both;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}


/*==================txt, links, lines, titles====================*/
a {color:#ff4f21; outline:none;}
a:hover{text-decoration:none;}

h2 { font-size:1.5em; font-weight:normal; color:#040404; line-height:1.08em; margin-bottom:25px;}
h2 span { font-size:14px; text-transform:uppercase; display:block; line-height:1.2em; margin-top:10px;}
h3 { color:#181a23; text-transform:uppercase; font-size:1em; margin-bottom:12px;}
h4 { font-weight:normal; color:#181a23; font-size:1.17em; margin-bottom:15px;}

.txt1 { color:#848484;}
#content p.txt1 { line-height:1.5em;}
.txt2 { color:#4dc9e7;}
.txt3 { color:#ff4f21;}


/*==================boxes====================*/
.cont-box { width:100%;}
.cont-box .inner { padding:16px 16px 17px 18px;}

.box { width:100%;}
.box h2 { margin-bottom:12px;}
.box h2 span { color:#4dc9e7;}
#content .box p { color:black; line-height:1.42em;} 
.box .link { color:#4dc9e7; background:url(images/marker1.gif) no-repeat right 5px;}


.box1 { width:100%;}
.box1 h2 { margin-bottom:12px;}
.box1 h2 span { color:#ff3f39;}
#content .box1 p { color:black; line-height:1.42em;}
.box1 .link { color:#ff4f21; background:url(images/marker2.gif) no-repeat right 5px;}

.box2 { width:100%; position:relative;}
.box2 .border-top { background:url(images/border-top.gif) repeat-x top; width:100%;}
.box2 .inner { padding:29px 20px 30px 37px;}
.box2 .icon { position:absolute; right:23px; top:-16px;}
#content .box2 p { color:black; line-height:1.42em;}

/*content*/
#content .indent { padding:15px 12px 18px 21px;}
#content .indent1 { padding:30px 24px 40px 30px;}
#content .indent2 { padding:25px 0 0 28px;}
#content .indent3 { padding:25px 20px 15px 28px;}
#content p { line-height:1.25em;} 

/*footer*/
#footer .fleft { padding:26px 0 0 42px;}
#footer a { color:#4dc9e7;}
#footer .fright { color:#373737; padding:20px 55px 0 26px;}
#footer .fright b { border-left:1px solid #e9e9e9; padding:6px 0 6px 26px; display:block;}
#footer .fright a { font-weight:normal;}
#footer .fright span { padding-left:22px; background:url(images/icon3.gif) no-repeat left 3px;}


/*================== contact us page ====================*/
.SubTitle { color: #55242a; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bolder; width: 266px; padding-bottom: 12px;}
.Address { color: black; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; line-height: 1.2em; width: 266px; padding-bottom: 5px;}
.DaysOfWeek { color: #696969; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; width: 190px; float: left; padding-bottom: 5px;}
.HoursOfWeek { color: black; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; padding-bottom: 5px;}
.ContactSpacer {height:25px; width:100%; float:left;}
.SocialIcons { width:266px; padding: 0 0 25px 0; border: none; }



/*================== menu pages ====================*/
.foodtitle { width:475px; color:#55242a; padding-bottom:10px; float:left; font-size:1.3em; font-weight:bolder;} 
.fooddesc {	width:525px; color:#55242a; margin-bottom:15px; padding-bottom:10px; font-size:1.2em; border-bottom:1px solid; border-color:#55242a; clear:both;}
.foodprice { text-align:right; color:#55242a; float:left; width:50px; font-size:1.25em; font-weight:bolder;}
.ingredients-alt { width:475px; color:#55242a; float:left; padding-bottom:10px; font-size:1.2em; font-weight: bolder;}	
.ingredients { width:475px; color:#55242a; float: left; margin-bottom:15px; padding-bottom:5px;	font-size:1.1em; border-bottom: 1px solid;}
.ingredients-price { text-align:right;	color:#55242a;	float:left;	padding-bottom:5px; width:50px; font-size:1.1em; font-weight:bolder;	border-bottom:1px solid;}

/*menu images*/
.MenuList { height:175px; }
.cont-box .menu-images {height:550px; width:370px; float:right; padding-top: 20px;}
.cont-box .image1 {height:250px; width:100%; padding-left: 20px; padding-bottom: 50px; }
.cont-box .image2 {height:250px; width:100%; padding-left: 20px; float:left;}

/*================== coffee pages ====================*/
.coffeedesc { margin-left: 25px;	width: 375px; margin-bottom: 10px; float: left; }
.coffeeprice1 { text-align: left; float: left; margin-bottom: 10px; width: 75px; }
.coffeeprice2 { text-align: left; float: left; margin-bottom: 10px; width: 50px; }
.coffeeprice-spacer { text-align: left; float: left; width:	550px; }
.coffeeprice1-title { text-align: left; margin-left: 390px; float: left; margin-bottom: 5px; width: 75px; font-weight: bolder; }
.coffeeprice2-title { text-align: left; float: left; margin-bottom: 5px; width:	50px; font-weight: bolder; }