/* CSS FIXED WIDTH LAYOUT USING BACKGROUND SLICES - this is my mess of a stylesheet to create a rounded corner box layout or somesuch container type layout using the concept of background image slices so effectively utilized by WP in the Kubrick theme. */
body {
	font-family: Gulim, Verdana, "Trebuchet MS", Arial;
	color: black;
}
/* begin layout */

/*the body tag is where the background image or color is set, you're hosed if you want a vertical gradient, horizontal you can use, to use a vertical gradient will require layered divisions, coming soon. Margin and padding cleared here also.*/
body {
	background: url(../images/background_color.jpg) repeat;
	margin: 0;
	padding: 0;
}
/* content */

/*the wrapper is where the fixed width background image is tiled with or without columns, margins set. Note the top is set to nada as the header image is massive, the bottom is set to 20px, left and right auto which causes the box to be centered left and right*/
#wrapper {
	position:relative;
	background: white url(../images/body_background.jpg) repeat-y center top;
	border: none;
	margin: 0 auto 20px;
	width: 816px;
}
#headerHome {
	background: url(../images/home_header.jpg) no-repeat bottom center;
	margin: 0 !important;
	margin: 0 0 0 1px;
	padding: 1px;
	height: 305px;
	width: 814px;
	padding: 0;
	margin: 0 auto;
	height: 307px;
	width: 100%;/* background-color: #73a0c5; */
}
#headerHome h1 {
	margin:0;
	padding:255px 0 0 0;
	text-align:center;
	font-size: 100%;
	font-weight: lighter;
}
#header {
	background: url(../images/section_header.jpg) no-repeat bottom center;
	margin: 0;
	padding: 0;
	height: 210px;
	width: 100%;/* background-color: #73a0c5; */
}
#header h1 {
	margin:0;
	padding:145px 0 0 250px;
	text-align:center;
	vertical-align:bottom;
}
#blogheader {
	background: url(../images/section_header.jpg) no-repeat bottom center;
	margin: 0;
	padding: 0;
	height: 210px;
	width: 100%;/* background-color: #73a0c5; */
}
#blogheader h1 {
	margin:0;
	padding:15px 0 0 0;
	text-align:right;
	vertical-align:bottom;
}
#blogheader .description {
	text-align:right;
}
#blogcontent {
	margin:0 25px 0 255px;
	padding:0 18px;
	line-height: 24px;
}
#blogcontent h2, #blogcontent h3 {
	margin:0;
	padding:0;
}

/*} #header {
	background: url(../images/section_header.jpg) no-repeat bottom center;
	margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 814px;
	padding: 0;
	margin: 0 auto;
	height: 200px;
	width: 100%;
}
*/
	/* background-color: #73a0c5; */

/*#headerimg {
	background-image: url(../images/2007_07_07_laCabana%20001.jpg);
	margin: 7px 9px 0;
	height: 200px;
	width: 740px;
	margin: 0;
	width: 100%;
}*/

/*navigation*/
#nav {
	position:absolute;
	left:32px;
	top:197px;
	width:752px;
	height:20px;
}
#navbar {
	height: 20px;
	width: 100%;
	background-color: #AABFAE;
	border-bottom: 2px solid #ACD0B7;
}
#navbar ul {
	float:left;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFF;
	/*line-height: 30px;*/
	white-space: nowrap;
}
#navbar li {
	display:inline;
	margin:0;
	padding:0;
}
#navbar li a {
	display:block;
	float:left;
	width:auto;
	margin:0;
	padding: 1px 10px;
	border-right: 1px solid #DAEADF;
	border-bottom:none;
	border-left:1px solid #DAEADF;
	color:#fff;
	background:#AABFAE url(/images/nav-tab.gif) repeat-x;
	font-weight: lighter;
	font-size:11px;
	line-height:18px;
	text-decoration:none;
}
#navbar li a:hover,  #navbar a:focus, #navbar a:active {
	font-weight: normal;
	color: #000;
	background-color: #DAEADF;
}
/*end navigation*/

#contentHome {
	margin: 0 50px 10px 200px;
	padding: 0px;
}
#contentHome p {
	margin:0;
	padding:10px;
}
#content {
	margin:0 25px;
	padding:0 18px;
	line-height: 24px;
}
#content p {
	margin:25px 15px;
	padding:0;
}
#content  h1, #content h2, #content h3 {
	margin:25px 15px;
	padding:0;
}
#topicFooter {
	margin:10px 0;
	padding:0;
	text-align:center;
	clear: both;
}
#topicFooter p {
	display: inline;
}
#footer {
	background: url(../images/footer.jpg) no-repeat bottom;
	border: none;
	padding: 0 0 0 0px;
	margin: 0 auto;
	width: 816px;
	height:66px;
	clear: both;
}
#footer p {
	margin: 0;
	padding: 30px 0;
	text-align: center;
	font-size: .8em;
}
#footer a:link, #footer a:visited {
	font-size: 12px;
	color: #838F85;
	text-decoration: none;
}
#footer a:hover {
	font-size: 12px;
	color: #666666;
	text-decoration: underline;
}
#outsideFooter {
	margin:0 auto;;
	padding:0;
	width:900px;
	font-size:80%;
	text-align: center;
}
/* End Structure */



/* navigation using unordered list and a wrapper box with rounded corners and a gradient background*/

/*this rounded box uses three divs floated left and three background images, top, middle, bottom, the box wrapper is the container where you set margins and padding, margins will give you the IE6 doubling phenomena so use padding*/
#boxWrapper {
	margin:0;
	padding:25px 0 0 35px;
	float:left;
	width:186px;
	clear:left;
}
#boxTop {
	margin: 0;
	padding:0;
	float:left;
	width:186px;
	height:17px;
	font: small Verdana, sans-serif;
	clear: left;
	background: url(../images/boxTop.jpg) no-repeat bottom;
	border: none;
}
#boxMiddle {
	margin: 0;
	padding:0;
	float:left;
	width:186px;
	font: small Verdana, sans-serif;
	clear: left;
	background: url(../images/boxMiddle.jpg) repeat-y top;
	border: none;
}
#boxBottom {
	margin: 0;
	padding:0;
	float:left;
	width:186px;
	height:22px;
	font: small Verdana, sans-serif;
	clear: left;
	background: url(../images/boxBottom.jpg) no-repeat bottom;
	border: none;
}
#leftNav {
	margin:0;
	padding:40px 0 0 70px;
	float:left;
	width:200px;
	font: small Verdana, sans-serif;
	clear: left;
	border: none;
}
#leftNav a:link, #leftNav a:visited, #leftNav a:hover {
	display:block;
	/*width:90%; IE6 workaround, allows display block to work, ill effects in Mozilla, makes the block smaller*/
	color: #000000;
	text-decoration: none;
}
#leftNav a:hover {
	text-decoration: underline;
}
#leftNav ul {
	margin: 0px;
	padding: 0px;
}
#leftNav li {
	padding: 3px;
	margin-bottom: 4px;
	list-style-type: none;
	border: none;
	list-style-position: outside;
	background-image: url(../images/nav_background.jpg);
}
#leftNav h2 {
	margin:0 0 15px 0;
	padding:0;
}
/*end navigation*/

/* end layout */

/*formatting html tages*/
h1, h2, h3, h4, h5, h6 {
}
h1 {
	font-size: 150%;
	line-height: normal;
	word-spacing: normal;
	letter-spacing: 3px;
	font-variant: normal;
	text-transform: none;
	font-weight: lighter;
	font-family: Gulim, Verdana, "Trebuchet MS", Arial;
}
h2 {
	color:#3366CC;
	/*color: #333333;*/
	font-weight: lighter;
}
h3 {
	color: #869588;
	font-size: 125%;
}
h4 {
	text-decoration: underline;
}
h5 {
	font-weight: bolder;
	color: #000000;
	font-size: 110%;
}
a:link, a:visited, a:hover {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}
a:hover {
	text-decoration: underline;
}
ul {
}
li {
	padding:8px;
}
ul ul li {
	padding:3px;
}
hr {
	height:1px;
	width:98%;
	color:#90A890;
	border-width: 1px;
	border-style: solid none none;
}
/* overrides decoration from previous rule for hovered links */

/*styles and formatting*/
.header {
	font-size: 24px;
	line-height: normal;
	word-spacing: normal;
	letter-spacing: 3px;
	font-variant: normal;
	text-transform: none;
	font-weight: normal;
	font-family: Gulim, Verdana, "Trebuchet MS", Arial;
}
.center {
	text-align:center;
}
.justify {
	text-align:justify;
}
.right {
	text-align:right;
}
.emphasis {
	font-size: 150%;
	font-weight: 200;
}
.emphasis2 {
	font-size: 150%;
	font-weight: normal;
	color:black;
}
.floatright {
	float:right;
}
.floatleft {
	float:left;
}
.pad10 {
	padding:10px;
}
.blue {
	color:#3366CC;
}
/* Lets do some table like grids using css down here, I'm going to make a bunch of classes named after their percentage widths, all floated left, line 'em up and go, any right floats will have an "r" after the width though I as yet haven't used any, whoa, just did for the newsletter volume information*/
.margin10px {
	margin:10px;
	padding:0;
}
.col33 {
	width:33%;
	float:left;
}
.col35 {
	width:35%;
	float:left;
}
.col50 {
	width:50%;
	float:left;
}
.col50r {
	width:50%;
	float:right;
}
.col60 {
	width:58%;
	float:left;
}
.clear {
	clear:both;
}
.width {
	width:100%;
}
.archives {
	float:left;
	list-style:url(none) none;
}
.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;
}
.right {
	text-align:right;
}
.pad15 {
	margin:0;
	padding:15px;
}
img {
	border:none;
}
.center {
	text-align:center;
}
ol {
	margin:25px 75px;
	padding:0;
}
ol li {
	line-height:18px;
}
.alignright {
	float:right;
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
.alignleft {
	float:left;
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}