/*  
Theme Name: Zippys
Theme URI: http://www.zippysjava.com/
Description: A theme for Zippys Java Lounge in Everett.
Version: 0.1
Author: John Cardwell
Author URI: http://www.saddacrackers.com/
	
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/


* { margin: 0px; padding: 0px; }

body  {
	font-family:Georgia, "Times New Roman", Times, serif;
	background: #aaedfd url(images/bg_gradient.gif) repeat-x 0px 0px;
	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: #002d56;
}

#floatcontainer {background: url(images/bg.gif) repeat-y 0px 0px;}

h1, h2, h3, h4 input { font-weight:normal; color: #FFF; }
h4 {color:#002D56;}

li { list-style:inside; }

#modal {
	background-color: #FFF;
	width: 600px;
	padding: 10px;
	text-align: left;
	border: 8px solid rgba(8, 60, 106, 0.8);
	
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
}

#modal p {
	margin-bottom: 10px;	
}

.simplemodal-close {
	color:#FFF;
	text-decoration:none;
	background-color: #ed2024; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	padding: 5px;
}

.modalCloseImg {display: none;}

#container

 {
	position: relative; 
	width: 1063px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: url(images/logo.gif) no-repeat 0px 8px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 



#header { 
	padding: 244px 0px 0px 0px;  /* 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. */
} 

#nav { position: relative; padding-left: 121px; font-size: 19px; }
#nav #navButtons { position: absolute; top: 0px; left:125px; width: 810px; height: 43px; background: #0a3f6f url(images/nav_bg.gif) repeat-x 0px 0px; }
#nav img { display: block; margin: 0; }
#nav img.r { display: block; position:absolute; left: 935px; top:0px; }
#nav img.ftrMug { position:absolute; left: 778px; top:6px; }
#nav ul { position: absolute; display:block; width: 774px; height: 43px; left: 8px; top: 12px;}
#nav li { display:inline; list-style:none; padding-left: 12px; color: #FFF; }
#nav li.current_page_item a { color: #29d9fe !important; }
#nav li.page_item a { color: #2365a3; text-decoration: none;}
#nav li a:hover { color: #a4cff6; }
/*#nav li.nav_divider { background: url(images/vert_div.gif) no-repeat 0px 0px; }*/
#nav a {  }

#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 */
}
#sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 242px; /* 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: #FFFFFF;  the background color will be displayed for the length of the content in the column, but no further */
	padding: 0px 121px 0px 0px;
}

#sidebar1 #wrapper {background: #FFFFFF; width: 242px;}
#sidebar1 div.maillist {background: #b0edfd;}
#sidebar1 div.info {}
#sidebar1 h3 { width: 144px; color: #002d56; border-bottom: #FFFFFF 1px dotted; padding:8px 8px 3px 0px; margin:0px 0px 8px 24px; font-size: 17px; }
#sidebar1 p, .ec3_events { color: #000000; padding:0px 8px 3px 0px; margin:0px 0px 8px 24px; font-size: 12px; }
/* Events plugin styles */
#events { width: 232px; height: 300px; overflow:auto;  }
#sidebar1 #events li {margin-left: 0px;}
#sidebar1 ul.ec3_events li { list-style: none; color: #002D56; font-size: 14px; }
#sidebar1 ul.ec3_events ul { padding-bottom: 8px; list-style: none;}
#sidebar1 ul.ec3_events a { color: #000; text-decoration: none; font-size: 12px; padding: 5px 20px 5px 0px; margin-right: 20px; border-bottom: 1px solid #f7f8f8; display:block; }

#sidebar1 #links { padding:0px 8px 3px 0px; margin:14px 0px 8px 24px; font-size: 12px; line-height: 21px;}
#sidebar1 a { color: #24d8fe; text-decoration: none; }
#sidebar1 a:hover { text-decoration: underline; }

#sidebar1 form {padding:0px 0px 24px 24px;}
#sidebar1 input.submitBtn_off { display: block; background:#f5510a url(images/subscrib_btn_off.gif) no-repeat 0px 0px; width: 100px; height: 32px; border: none; color:#a3eafc; margin-top: 4px;
						font-family: Georgia, "Times New Roman", Times, serif; font-size: 17px; font-weight:normal; }
#sidebar1 input.submitBtn_on { display: block; background:#f5510a url(images/subscrib_btn_on.gif) no-repeat 0px 0px; width: 100px; height: 32px; border: none; color:#FFFFFF;  margin-top: 4px; }
#sidebar1 input.email { width: 189px; height: 32px; background: #b0edfd url(images/subscribe_txtFld.gif) no-repeat 0px 0px !important; font-family: Georgia, "Times New Roman", Times, serif; font-size: 17px; color: #37dbfd; padding:6px 10px 0px 8px; border: 0px; }
#sidebar1 label.error { font-size: 12px; color: #ed2024;}

#mainContent { 
	margin: 0px 121px 0px 0px; /* the right margin on this div element creates the column down the right 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: 0px 20px 0px 121px; 
	color: #0a3f6f;
}

#guts {background: #FFFFFF; width: 570px;
  min-height:900px;
  height:auto !important;
  height:900px;
}
#guts h1 { padding-top: 13px; color: #ee1a21; font-size: 38px; width: 540px; margin-left: 19px; }
#guts h2 { color: #ee1a21; padding-top: 10px; margin-left:19px; }
#guts #highlight { padding: 8px; background-color:#E9F2F9; color: #333333; margin-bottom: 12px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.entry h2 { color: #ee1a21; padding-top: 25px; margin-left: 0px !important;}
#guts h2 a { font-weight:normal; padding-top: 10px; text-decoration:none; color: #ee1a21; }
.entry h3 { color: #002D56; }
#guts small {margin-left: 19px;}
#guts p { line-height: 22px; margin-bottom: 8px; }
#guts .entry { color: #25629a; line-height: 22px; width: 540px; border-bottom: #d2d5d5 1px dotted; margin-left: 19px; margin-bottom: 8px; padding-bottom: 8px; }
#guts table.ec3_schedule { margin-left: 19px; margin-bottom: 13px; color: #9da9a9; }

#lefty {float:left; margin-right:12px; width:255px; }
#splashAd { width: 273px; height: 318px; background: url(images/splashAd.gif) no-repeat 0px 0px; float:left;}
#splashAd h3 { margin-top: 80px;  margin-left: 38px; font-size: 22px; line-height: 24px; letter-spacing: .8ems; color: #5cfb4c; font-weight:100;  }
#splashAd p { margin-top: 8px;  margin-left: 38px; font-size: 12px; line-height: 16px; letter-spacing: .8ems; color: #0b4173; font-weight:100; width: 200px; }
#splashAd a { color: #0b4173; }

#footer { 
	padding: 0px 121px 0px 121px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
} 
#snohomish { 
	padding: 237px 0px 0px 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:transparent url(images/snohomish.gif) no-repeat scroll 51% 0;
} 
#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 */
}

#specials_wrapper { text-align: left; position: absolute; left: 710px; top: 142px; }
#specials_wrapper img { padding-left: 190px; margin: 0; }
#specials { width: 227px; background: #FFFFFF url(images/specials_bg.gif) repeat-x 0px 0px; }
#specials h2 { color: #aad6fe; font-size: 14px; padding-left: 13px; padding-top: 7px; }
#specials p { padding-left: 13px; padding-top: 8px; padding-right: 8px; color: #25629a; font-size: 12px; }
#specials img { padding-left: 3px; padding-right: 8px; padding-top: 8px; }
#specials .tl { background: url(images/specials_tl.gif) no-repeat left top; }
#specials .tr { background: url(images/specials_tr.gif) no-repeat right top; }
#specials .bl { background: url(images/specials_bl.gif) no-repeat left bottom; }
#specials .br { background: url(images/specials_br.gif) no-repeat right bottom; }

#flashIntro { padding: 19px 0px 19px 19px; width:541px; height:318px; }
#flashIntro embed { padding:0px; width:541px; height:318px; }

.bl { background: #FFFFFF url(images/main_btmLft.gif) no-repeat left bottom; }
.br { background: url(images/main_btmRt.gif) no-repeat right bottom;}
.side_tl { background: #eaecec url(images/greyCorner_topLeft.gif) no-repeat left top; }
.side_bl { background: url(images/greyCorner_btmLeft.gif) no-repeat left bottom; }

/* social media */
.myspace { display: block; width: 200px; height: 17px; padding-left: 19px; padding-top: 2px; background: url(images/myspace_16.png) no-repeat 0px 0px; }
.twitter { display: block; width: 200px; height: 17px; padding-left: 19px; margin-top: 8px; background: url(images/twitter_16.png) no-repeat 0px 0px; }
.meetup { display: block; width: 200px; height: 17px; padding-left: 19px; margin-top: 8px; background: url(images/meetup_16.png) no-repeat 0px 0px; }
.facebook { display: block; width: 200px; height: 17px; padding-left: 19px; margin-top: 8px; background: url(images/facebook_16.png) no-repeat 0px 0px; }
.yelp { display: block; width: 200px; height: 17px; padding-left: 19px; margin-top: 8px; background: url(images/yelp_16.png) no-repeat 0px 0px; }

.green { color: #1f6842; }
.dkblue { color: #25629a; }
.orange { color: #e18503; }



.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;
}

.topPadding {padding-top: 24px !important;}

/* TOOLTIP */
#tooltip {
	position: absolute;
	z-index: 3000;
	background: url(images/tooltip.png) no-repeat 0px 0px;;
	padding: 5px;
	color: #aad6fe;
	width: 104px;
	height: 26px;
}

#tooltip h3 { color:#aad6fe; font-size: 13px; }/* plugin uses h3*/