/*   
Theme Name: Chocolatea Cafe
Theme URI: http://www.chocolateacafe.com/
Description: A custom theme for chocolatea cafe.
Author: Joanna Lit
Author URI: http://www.joannalit.com
Version: 1.0
.
License Statement: This theme is used strictly for chocolatea cafe only.
.
*/

body { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:#f8f8f8 url(images/bg-dot.png) no-repeat center -80px; }
#wrapper { width:1000px; margin:50px auto; padding:0; }
/******************************************/
/* Header */
#hd { width:100%; float:left; margin:0; padding:0; }
#logo { float:left; width:280px; text-align:center; margin-top:0px; _margin-top:-40px; position:relative; left:-20px; }
html>body #logo { text-align:center; margin-top:-30px;  }
#hd-message { width:188px; height:55px; background:transparent url(images/paper01.png) no-repeat 0 0; float:right; padding:33px 0px 0px 27px; margin-top:-133px; 
_background:none; _padding:0; _margin-top:0px; _display:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/paper01.png', sizingMethod='scale');


}

/* main navigation */
#ct-nav { 
	float:right;
	width:530px; 
	text-align:right; 
	margin:25px 0px 0px 0px;U
	padding:0;
	font-size:100%;
	font-family:Verdana, Geneva, sans-serif;
}
#ct-nav ul { 
	margin:0px; 
	padding:0px; 
	list-style-type:none;
	font-weight:bold; 
}
#ct-nav li { 
	display:inline-block; /* IE */
	position:relative; 
	margin:0px; 
	/* padding:10px 15px; */
	list-style:none; 
	color:#333; 
	background-color:#f8f8f8;  /* added this to prevent css warnings in validator */
}
#ct-nav li { display:inline; }
#ct-nav a { 
	color:#333; 
	cursor:pointer;
	float:left;
	margin-right:3px;
	padding-left:11px;
	text-decoration:none; 
}
#ct-nav .navSelected a {
	background: transparent url(images/green-rc-l-02.png) no-repeat scroll left top;
	_background: transparent url(images/green-rc-l-02.gif) no-repeat scroll left top;
	color:#fff; 
	margin-left:10px;
}
#ct-nav a span {
	display:block;
	float:left;
	height:42px;
}
#ct-nav .navSelected a span {
	background: transparent url(images/green-rc-r-02.png) no-repeat scroll right top;
	_background: transparent url(images/green-rc-r-02.gif) no-repeat scroll right top;
	padding-right:11px;
}

#ct-nav a span span { 
	display:block;
	height:auto;
	padding:10px 15px 0px 3px;
}
#ct-nav .navSelected a span span { 
	background: transparent none repeat scroll 0 0;
	padding:10px 20px 0px 4px;
}

#ct-nav a:hover { color:#4f8223; }
#ct-nav .navSelected a:hover { color:#fff; }
#ct-nav .arrow { background: transparent url(images/ct-arrow.png) no-repeat scroll left top; width:20; height:11; }

#bd { float:left; }

/************************************************************************/
/* left column */
#lc { 
	/* IE */
	float:left; 
	width:280px; 
	height:420px; 
	background:url(images/ct_chalkboard280.gif) no-repeat center bottom; 
	position:relative;
	left:-20px;
	font-family:Verdana, Geneva, sans-serif;
}
html>body #lc {
	float:left;
	width:280px;
	height:420px;
	background:url(images/ct_chalkboard280.png) no-repeat center bottom;
	position:relative;
	left:-20px;
}
#busHours { margin:45px auto 0px; padding:45px 70px; font-size:11px; }
.busHours-lc { width:70px; float:left; }
.busHours-rc { width:70px; float:left; text-align:right; }
#busHours p { margin:0; padding:0; }
#busContact { margin:50px auto; padding:0px 60px; font-size:11px; color:#fff; }
#busContact .address { background:url(images/icon_location.png) no-repeat 0 0; }
#busContact .phone { background:url(images/icon_phone.png) no-repeat 0 0; height:20px; }
#busContact .email { background:url(images/icon_email.png) no-repeat 0 0; height:20px; }
#busContact div.address p { margin:0px; padding:0px; height:32px; margin-left:30px;  }
html>body #busContact div.address p { width:135px; margin-left:30px;  }
#busContact .phone p, #busContact .email p { width:135px; margin-left:30px; padding:3px 0px; }

/************************************************************************/
/* right column */
#rc {
	width:700px;
	_width:680px;
	float:right;
	margin-top:-10px;
	_margin-top:0px;
}
#rc .leaves {
	background:url(images/leaves.png) no-repeat;
	position:absolute;
	width:135px;
	height:319px;
	top:-125px;
	right:auto;
	margin:0px 710px;
	z-index:999;
}

/* right column body */
#rc div.rc-bd { padding:0px 0px 0px 0px; }
#rc div.rc-bd div.rc-bd-content { font-size:12px; margin:0px; padding:10px 0px;	height:450px; }

/* right column sub-nav */
#rc ul.sub-nav { 
	margin:0px; 
	padding:10px 1px; 
	border-bottom:1px solid #ccc; 
	font-weight:bold; 
	list-style-type:none; 
	font-family:Verdana, Geneva, sans-serif;
}
/* IE */
#rc ul.sub-nav li { 
	display:inline-block; 
	padding:0px 0px; 
}
#rc ul.sub-nav li { 
	display:inline; 
}

#rc ul.sub-nav li a { 
	padding:10px 13px;
	border-right:1px solid #ccc;
}
#rc ul.sub-nav li a:hover {
	color:#333;
	text-decoration:none;
}
#rc ul.sub-nav li a.selected {
	color:#333; 
	text-decoration:none;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #f8f8f8;
	margin-left:-1px;
}
#rc ul.sub-nav li a:focus {	outline: 0; }
/************************************************************************/
/* right column  */
#teas, #cocolattes, #truffles, #lunch, #breakfast {	margin:0px;	padding:0px; }
/***********************************************************/
/* this makes it possible to add next button beside scrollable */
#lunch div.scrollable, #breakfast div.scrollable, #teas div.scrollable {
	float:left;		
}

/* prev, next, prevPage and nextPage buttons */
#lunch a.prev, #lunch a.next, #lunch a.prevPage, #lunch a.nextPage, 
#breakfast a.prev, #breakfast a.next, #breakfast a.prevPage, #breakfast a.nextPage,
#teas a.prev, #teas a.next, #teas a.prevPage, #teas a.nextPage {
	display:block;
	width:20px;
	height:20px;
	background:url(images/icon-back.png) no-repeat;
	float:left;
	margin:150px 0px;
	cursor:pointer;
}

/* mouseover state */
#lunch a.prev:hover, #lunch a.next:hover, #lunch a.prevPage:hover, #lunch a.nextPage:hover,
#breakfast a.prev:hover, #breakfast a.next:hover, #breakfast a.prevPage:hover, #breakfast a.nextPage:hover,
#teas a.prev:hover, #teas a.next:hover, #teas a.prevPage:hover, #teas a.nextPage:hover {
	background-position:0px -20px;		
}

/* disabled navigational button */
#lunch a.disabled, #breakfast a.disabled, #teas a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
#lunch a.next, #lunch a.nextPage,
#breakfast a.next, #breakfast a.nextPage,
#teas a.next, #teas a.nextPage {
	background-image:url(images/icon-next.png);
	clear:right;	
}

/*********** navigator ***********/
/* position and dimensions of the navigator */
#lunch div.navi, #breakfast div.navi, #teas div.navi {
	margin-left:328px;
	margin-top:5px;
	margin-bottom:10px;
	width:200px;
	height:12px;
	overflow:hidden;
}
/* items inside navigator */
#lunch div.navi a, #breakfast div.navi a, #teas div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(images/navigator.png) 0 0 no-repeat;
	cursor:pointer;	
}
/* mouseover state */
#lunch div.navi a:hover, #breakfast div.navi a:hover, #teas div.navi a:hover {
	background-position:0 -8px;      
}
/* active state (current page state) */
#lunch div.navi a.active, #breakfast div.navi a.active, #teas div.navi a.active {
	background-position:0 -16px;     
} 	

/*  
    root element for the scrollable.  
    when scrolling occurs this element stays still.  
*/ 
#lunch div.scrollable, #breakfast div.scrollable, #teas div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 640px;	 
	height:450px;	
}
html>body #lunch div.scrollable, #breakfast div.scrollable, #teas div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 640px;	 
	height:430px;	
}
/* custom positioning for navigational links */
#lunch a.prev, #lunch a.next, 
#breakfast a.prev, #breakfast a.next, 
#teas a.prev, #teas a.next {
	margin-top:-25px;
	padding:0px 5px;
}

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs { position:absolute; width:20000em;	clear:both; }

/* single item */
#thumbs div {
	float:left;
	width:300px;
	height:430px;
	color:#333;
	margin-right:20px;
}

#thumbs p { margin:10px 0px; padding:0px; line-height:16px; }
#thumbs h4 { margin:10px 0px; padding:1px 7px; background-color:#59ACAC; color:#fff; font-size:12px; font-weight:bold; display:inline; }
.menu-item { font-weight:bold; }

#thumbs .menu {
	color:#333;
	width:320px;
	list-style:none;
	margin:0px 15px 0 0;
	padding:0;
}

#thumbs .menu ul { margin:0; padding:0; }
#thumbs .menu li {
	position:relative;
	border-bottom: dotted 2px #999;
	_border-bottom:none;
	clear:both;
	margin:0 30px 0 0;
	padding:0 0 -0.5em 0;
	list-style:none;
}
html>body #thumbs .menu li {
	position:relative;
	border-bottom: dotted 2px #999;
	_border-bottom:none;
	clear:both;
	margin:0 30px 0 0;
	padding:0 0 1.8em 0;
	list-style:none;
}
#thumbs .menu strong { 
	position:absolute; 
	_position:relative;
	left:0; 
	bottom:-0.3em; 
	_bottom:0; 
	padding:0 10px 0 0; 
	_padding:0;
	background:#f8f8f8; 
	font-weight:bold; 
}
#thumbs .menu em { 
	position:absolute;
	_position:relative;
	right:0; 
	bottom:-0.2em; 
	_bottom:0; 
	padding:0 0 0 5px; 
	_padding:0;
	font:140% Georgia, "Times New Roman", Times, serif; 
	font-style:italic; 
	background:#f8f8f8; 
}
#thumbs .menu sup { margin-left:3px; font-size:70%; }
#thumbs .notes { position:relative; left:0; font-size:11px; }
#thumbs .menu .notes { padding-right:50px; }

/***********************************************************/
/* Home */
#img-gallery { 
	width:700px;
	height:395px;
	position:relative;
}

#img-gallery ul.img-th-nav {
	position:absolute;
	top:0;
	left:611px;
	width: 90px;
	margin:0;
	padding:0; 
	list-style:none;
}

#img-gallery ul.img-th-nav li img {
	float:left;
	border:none;
	padding-bottom:2px; 
	_padding-bottom:0px;  /* IE6 */
	_margin-bottom:-1px;  /* IE6 */
}

#img-gallery li.img-th-nav-item a {
	display:block; 
	height:60px; 
	color:#333;  
	line-height:20px;
	opacity:1;
	/* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


#img-gallery li.img-th-nav-item a:hover{ 
	opacity:.7;
	/* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

#img-gallery li.ui-tabs-selected { 
}
#img-gallery ul.ui-tabs-nav li.ui-tabs-selected a { 
	opacity:.7;
	/* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
#img-gallery .ui-tabs-panel { 
	width:606px; 
	height:394px; 
	background:#999; 
	position:relative;
	overflow:hidden;
}

#img-gallery .ui-tabs-panel .info {
	width:586px;
	padding:10px 20px;
	position:absolute;
	background:#000;
	opacity:0.8;
	/* For IE 5-7 */  
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
    /* For IE 8 */  
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	top:395px;
	left:0;
	font-family:Verdana, Geneva, sans-serif;
}

#img-gallery .info p {
	margin:0;
	padding:0;
	color:#fff;
}

#img-gallery .info h2{ 
	font-size:18px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0;
	overflow:hidden; 
}

#img-gallery .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#img-gallery .info a:hover{ 
	text-decoration:underline; 
}
#img-gallery .ui-tabs-hide{ 
	display:none; 
}

/************************************************************************/
/* Contact */
.contact-info { float:left; width:100%; margin-bottom:10px; }
#rc-bd-contact-scrollable { position:relative; height:410px; width:680px; overflow:hidden; top:0px; }
#contact-slides { position:absolute; width:2000px; clear:both; }
#ct-contact-form { position:relative; float:left; width:450px; }

label#name_label { 
position:absolute; 
left:0px; 
top:39px;
padding-top:5px;
}

label#email_label { 
position:absolute; 
left:0px; 
top:68px;
padding-top:5px;
}

label#subject_label { 
position:absolute; 
left:0px; 
top:97px;
padding-top:5px;
}

label#message_label { 
position:absolute; 
left:0px; 
top:126px;
padding-top:5px;
}

input { 
position:absolute; 
left:85px; 
background: transparent url(images/form-field-bg.png) no-repeat scroll 0 0;
border:0;
width:202px;
height:16px;
outline:none;
}

input#name, input#email, input#subject { padding:5px; width:193px }
input#name { top:39px; }
input#email { top:68px; }
input#subject { top:97px; }

textarea#message { 
position:absolute; 
left:85px; 
top:126px;
background: transparent url(images/form-textarea-bg.png) no-repeat scroll 0 0;
width:244px;
height:81px;
border:0;
padding:5px;
resize: none; /* Disable Chrome draggable box*/
outline:none;
}

input.button { 
left:255px;
top:220px;
background: transparent url(images/form-sendBtn.png) no-repeat scroll 0 0;
width:69px;
height:32px;
border:0;
cursor:pointer;
}

form fieldset { border:0;  display:block; }
#ct-contact-form #contact { float:left; position:relative; top:-25px; }
#sent-message { width:300px; margin:58px 0 0 0px; }

fieldset .error { position:absolute; left:295px; color:#C00; font-size:0.8em; }
label#name_error { top:44px; }
label#email_error { top:74px; }
label#email_error2 { top:68px; }
label#subject_error { top:102px; }
label#message_error { left:343px; top:132px;  }
.errmsg { color:#C00; font-size:0.9em; }

.col-mapUsImg { 
float:left; 
width:220px; 
height:165px;
margin-right:20px; 
background: transparent url(images/map-us.png) no-repeat scroll 0 0;
cursor:pointer; }

.col-map { float:left; width:640px; margin:0px; }
.col-map p { margin:0 0 10px; padding:0; }
.col-map div.map-back { 
background:transparent url(images/btn-goBack.png) no-repeat scroll 0 0; 
position:relative; 
top:-387px; 
left:540px;
width:85px; 
height:49px; 
cursor:pointer; 
}

h1 { color:#333; font-family:Georgia, "Times New Roman", Times, serif; font-size:150%; font-style:italic; font-weight:100; margin:10px 0px 0px 0px; padding:0; text-align: center; }
h2 { color:#4F8223;	font-family:Arial, Helvetica, sans-serif; font-weight:100; font-size:3em; margin:0px 0px 20px 0px; padding:0; }
h3 { color:#333; font-family:Georgia, "Times New Roman", Times, serif; font-size:150%; font-weight:100;  margin:0px 0px; padding:0; }
h4 { padding:2px 7px;  color:#59ACAC; font-size:13px; display:inline; }
h5 { font-family:Georgia, "Times New Roman", Times, serif; font-size:170%; font-style:italic; font-weight:100; color:#59ACAC; margin:0px 0px 0px 0px; padding:0; }
h6 { font-size:12px; color:#fff; margin:0; padding:0; font-weight:bold; }
/************************************************************************/
a, a:hover, a:visited {	color:#4F8223; text-decoration:none; }

.menu-item { font-weight:bold; }
#note { background:url(images/note.png) no-repeat left top; }
.img-r-b img { position:relative; right:-435px; }
.quote { font-size:150%; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100; padding:0px 75px 0px 0px; }
.IE6error { color:#c00; font-size:1.4em; }
/************************************************************************/
/* footer */
#footer { border-top:1px solid #cccccc; padding:10px 0px; font-size:0.9em; width:100%; float:left; }
#footer .copyright { width:650px; float:left;  }
#footer .designby { width:300px; float:right; text-align:right; margin-right:10px; }
/************************************************************************/