@charset "utf-8";
/* CSS Document - Authored by Chavah Kurtz 05/14/2008 */


/*###########################################################################################################
ELEMENTS - used for wider accessibility: so HTML pages maintain format structure even in absence of CSS
############################################################################################################*/
body {
	margin-top:40px;
	margin-left:0px;
	background-color:#000000;
	color:#ffffff;
	text-align:center;
	font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;} 


/* ALIGN TEXT TO THE LEFT */
p, small, codebase, textarea, input, blockquote, ul, li {text-align:left;}


/* NO FONT FORMATTING APPLIED SINCE LINKS ARE USUALLY IMBEDDED IN OTHER ELEMENTS WITH FONT FORMATTING 
	e.g. <p>My paragraph of text contains <a href="#">a link</a>.</p> If not, use class ".normalText" */
a:hover {color:#ebebeb; }
a {color:#f85555;font-weight:bold;text-decoration:none;}
a img {cursor:pointer;}

/* used for LOCATIONS links */
a.hoverMe {text-decoration:none;}


h1,h2,h3,h4,h5 {
	margin-top:0.0em;
	margin-bottom: 0.5em;
	letter-spacing: 0.05em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:700;}

h1 {color:#ffc875; margin-top:0.0em;}

h2,h3,h4,h5 {color:#ffc875; margin-top:0.5em;margin-bottom:0px;} /* alt--> brown:CC6666; */

h1 {font-size:1.20em;} /* EM rather than px or pt FONT units should be used for wider accessibility */
h2 {font-size:1.15em;}
h3 {font-size:1.00em;}
h4 {font-size:0.95em;}
h5 {font-size:0.8em;}

img {border:0px;}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.75em;
	color:#ffffff;}
	
	
small {
	display:block; /* gets rid of uneven line spacing across all browsers */
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size:0.7em;
	color:#f85555;}


ul {margin-top: 0.6em;}

ul.cafeLocations {font-size:0.85em; list-style:none;}

ul.cafeLocations a {color:#ffffff;}
ul.cafeLocations a:hover {color:#ffc875;}
/* ############################# END OF ELEMENTS ###################################### */




/*#################################################################################################
CLASSES - for multiple instances on the same HTML page
###################################################################################################*/
/* should look exactly the same as the P ELEMENT */
.normalText {
	font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size:0.75em;
	color:#ffffff;
	line-height:1.2em;}
	
.smallerText {
	font-size:0.7em;
	color:#ffffff;
	line-height:1.2em;}

.center {text-align:center;}
.textLeft {text-align:left;}
.textRight {text-align:right;}
.indent {margin-left:1.3em;}
.padding {padding:5px;}
.emphasis {color:#ffc875;}
.textSpacing {letter-spacing:0.05em;}

.red {color:#f85555;}
.brown {color:#CC6666;}
.white {color:#FFFFFF;}
.underline {text-decoration:underline;}
.right {float:right;}
.alignTop {vertical-align:top;}
.valignCenter {vertical-align:center;}
.spacer {clear:both;height:10px;}

/* for any forms that display red error notification text */
.errorNotice {font-size:0.65em;color:#ff0000;display:none;}

/* ORIGINAL SHADOW CODE FROM PHIL BAINES */
/*  works in IE6, IE7, FireFox2, FireFox1.5 */
.dropShadow {
	float:left;
	clear:left;
	background:url(/images/shadowAlpha.png) no-repeat bottom right !important;
	background:url(/images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;}
.dropShadow p{
	position:relative;
	bottom:6px;
	right: 6px;
	border: 1px solid #999999;
	padding:4px;
	font-size:14px;
	margin: 0px;}
/* END ORIGINAL SHADOW CODE FROM PHIL BAINES */

table.form {width:620px;}
table.form td {padding:2px;}
table.form td.title {font-size:0.7em;font-weight:bold;text-align:right;vertical-align:top;color:#ffc875;}
table.form input.text, table.form textarea.text {background-color:#eeebeb;color:#660000;border:1px solid #660000;}
table.form input.submit {background-color:#ffc875;color:#000000;font-size:0.75em;font-weight:bold;border:2px solid #454545;text-align:center;padding:2px;}
table.form input.sp {display:none;} /* FOR ANTI-SPAM TECHNIQUE */

table.contact {font-size:0.7em;width:640px;vertical-align:top;}
table.contact th {background-color:#333333;padding:3px;border-bottom:1px dotted #999999;font-weight:bold;color:#f1cf75;}
table.contact td {padding:3px;border-bottom:1px solid #363636;}

/*for about Kaladi page - side images*/
td.sideB {width:150px;vertical-align:top;}


/* ~~~~~~~~~~~~~~~~~~~
CLASSES USED FOR DIV's - primarily used for div's used more than once on a single page
~~~~~~~~~~~~~~~~~~~ */

.boxContainer {position:relative; background-color:#3a3a3a; width:240px; max-width:240px;padding:0px;}
.boxHead {background-image:url(/images/box_top.gif);background-repeat:no-repeat;max-height:13px;width:240px;}
.boxFoot {background-image:url(/images/box_bottom.gif);background-repeat:no-repeat;background-position:bottom;max-height:13px;width:240px;}
.boxIcon {position:absolute;left:140px;top:-40px;}
.boxContent {padding:8px;}
.boxContent span { /* FOR NORMAL SIZED TEXT INSIDE THE BOX CONTENT */
	display:block; /* gets rid of uneven line spacing across all browsers */
	font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size:0.7em;
	color:#ffffff;}

#featureContainer img.features {position:absolute;top:15px;left:-20px;}

.featureBox {/* used on Front Page to display features*/ 
	width:395px; /* max of 368px */
	height:175px;
	margin-bottom:10px;
	display:inline-table;}
.featureBoxTitle {font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;color:#ffffff;clear:both;margin-bottom:5px;}
.featureBox div.movie {float:left;width:155px;height:145px;overflow:hidden;text-align:right;}
.featureBox div.img {float:left;margin-right:3px;width:155px;height:115px;overflow:hidden;text-align:right;}
.featureBox img {border: 1px solid #000000;}
.featureBoxText {float:right;font-size:0.7em;overflow:auto;width:230px;height:120px;}


/* LOCATIONS */
#cafeLocationBox {position:relative;width:350px;height:500px;background-color:#191919;text-align:right;}
.cafeLocation {display:none;position:absolute;top:0px;left:0px;width:343px;height:570px;color:#333333;background-color:#191919;text-align:left;}
#cafeLocationBox img.map {margin-left:34px;}
td.cafeTitle {text-align:right;vertical-align:top;color:#ffc875;font-size:0.7em;padding:5px;text-decoration:none;}
td.cafeText {text-align:left;color:#ffffff;font-size:0.7em;padding:5px;}

/* COFFEE MENU */
table.coffeeMenu th {font-size:0.8em;}

.captionPic {font-size:0.65em;font-weight:bold;background-color:#666666;}
.captionPic span {display:block;padding:2px;}
.captionPic img {border:1px solid #666666;background-color:#333333;}


/*#################################################################################################
ID's - primarily for DIV's used in page layout design
###################################################################################################*/
#container  { /* restricts page content to particular width */
	margin:auto; /* centers page in FF2.0+ */
	width:900px;}

#outerContainer { width:960px; margin:auto; bxackground:#cccccc;} /* on homepage only for social media icons */
#outerContainer #container { margin:0 !important; }
#socialMedia { float:right; margin:100px 0px 0px 5px; }
#socialMedia img { margin-bottom:8px; }
	
#leftNavBox {position:relative;background-color:#191919;width:225px;max-width:225px;padding:0px;text-align:left;}
#leftNavContents {padding:10px;}
#leftNavBoxHead {background-image:url(/images/leftNavBoxTop.png);background-repeat:no-repeat;max-height:13px;}
#leftNavBoxFoot {background-image:url(/images/leftNavBoxBottom.png);background-repeat:no-repeat;background-position:bottom;max-height:13px;}
/*width of 670 calculated by (total size of container 900 - leftNavBox 225 - spacerColumn 5 = 670) */
#mainContentBox {background-color:#191919;width:670px;background-image:url(/images/bg_goat.png);background-repeat:no-repeat;}

#innerContentBox {margin-top:23px;margin-left:15px;width:620px;}


#featureContainer {position:relative;width:400px;margin-left:4px;} /*400px width + 4px margin = lines up with edge */


#subpageNav {background-color:#333333;width:670px;font-size:0.75em;text-align:left;vertical-align:left;}
#subpageNav span {margin-left:10px;padding:3px;display:block;}

#subpageLeftNav {width:200px;}
#subpageLeftNav a{color:#ffffff;}
#subpageLeftNav a:hover{color:#666666;}

#coffeeMenu {background-color:#333333;color:#000000;}
#coffeeMenu td, #coffeeMenu th {padding:5px;text-align:left;color:#ffffff;}
#coffeeMenu th {border-bottom: 1px solid #ffffff;border-top: 1px solid #ffffff;}
#coffeeMenu td.coffeeMenuBorder {border-bottom: 1px dotted #cccccc;}
#coffeeMenu img.menuIcon {margin-top:7px;}

#tubeMenuBox {width:240px;height:318px;background-color:#333333;background-image:url(/images/bg_tubeMenu.png);background-attachment:fixed;overflow:auto;}
#tubePlayer {width:425px;height:470px;overflow:hidden;background-color:#191919;}
#tubePlayerTitle {font-size:1.2em;font-weight:bold;color:#f85555;margin-top:7px;margin-left:5px;}
#tubePlayerAuthor {font-size:0.9em;font-weight:bold;color:#ffc875;margin-top:0px;margin-left:5px;}
#tubePlayerDesc {font-size:0.8em;font-weight:normal;color:#ffffff;margin-top:0px;margin-left:5px;height:80px;overflow:auto;}

.menuItem {padding:3px;border-top:1px solid #555555;}
.menuItemNowPlaying {float:left;;font-size:0.6em;color:#000000;font-weight:bold;text-align:left;}
.menuItemLink {font-size:0.85em;font-weight:bold;text-align:right;}
.menuItemAuthor {font-size:0.65em;font-weight:bold;text-align:right;}
.menuItem a {color:#ffc875;}
.menuItem a:hover {color:#f85555;}

#kaladiGoat { position:relative; width:265px; height:575px; }
	#kaladiGoat a { display:block; }