﻿/* CSS layout */	

* { padding: 0; margin: 0; }  /*  This puts the page flush with the top.. */

body { font-family: Helvetica, Arial, Trebuchet MS,  Verdana, sans-serif;	font-size: small;  }
/* 	background: #999 url("../img/bg_3.png") repeat top left; } */

/*  a { color: #55a; text-decoration: underline; }  */
/* a:hover { color: #229; text-decoration: underline; } * /
/* a:visited { color: #55a; text-decoration: underline; }  */
a { text-decoration: none; font-weight:bold; display: block; color:#476D84  ; padding: 4px 0 4px 4px; }
a:hover {  font-weight:bold; color:#f1a712; }
/* a:visited {  font-weight:bold; color: #88f; }  */

p { 	color: #100603;	padding: 8px 2px; }
img { padding: 10px; }
form { padding: 0 0 5px 0; }
#main { width: 960px; background-color: #fff; border: medium solid #fff;  margin: 0 auto; }
.clear { clear: both; }
#content { padding: 0; background-color:#fff; border-bottom: thin solid gray; }

#slideshow { width: 750px; margin: 0 auto;  }
.image { margin: 0 auto; }
.center-this { text-align: center; } 
/* .main { width: 670px; background:white; margin: 0 auto; } */
.photo-box { min-height: 650px;  padding: 10px; margin: 10px auto; background: #e7f2e2; }
/* #contact { padding: 10px; width:870px; } */

.contact-me{ width:410px; background:#ffa; margin: 10px auto; padding:20px 0px 10px 20px; }  

.contact-me div { float: left; margin: 0 auto; }
  
.contact-me label { display:block; float:none; 	width:auto; }

form#contactform input { border-color:#BBB #EEE #EEE #BBB; border-style:solid; border-width:1px; padding:5px; font-size:12px; color:#444; } 
form#contactform textarea { padding: 5px; border-color:#BBB #EEE #EEE #BBB; border-style:solid; border-width:1px; }

  

/* deprecated:  Use .blog-left-wide  */
#navigation { overflow:visible; float: left; width:260px; margin: 10px 0px; border-right: thin solid #b8b8b8;  }
#navigation form { margin: 10px 0 0 10px; }
/* Navigation */
#navigation ul { display: block; list-style-type: none; width: 100%;  margin: 0;  padding: 0; }

#navigation li { position: relative; float: left; }


/*#navigation a:hover { font-weight: bold; text-decoration: none;  color:	 #FFF; background-color: #666; } */

#navigation h3 { color: #b8b8b8; clear:both; border-top: thin solid #b8b8b8; border-bottom: thin solid #b8b8b8; margin: 2px 5px; }

#main_content { 	padding: 0 10px 0 5px; border-right:thin gray solid; background-color: #fff; color: #111; font-size: small; }

#main_content p { margin 2px 20px 2px 40px; font-size: small; }

#main_content h4 { color: gray; font-size:small; }

#left_content { 	width: 578px;  padding: 10px 0px 2px 0px;  /* margin: 10px 0px 20px 20px; */ /*	border-right:thin gray solid;*/ background-color: #fff; color: #111; font-size: small; float: left; }

#left_content h4 { color: gray;  font-size:small; }

/*  where the blog posts will go */
#post { 	width: 568px; padding: 4px 4px; margin: 0px auto; }
#post a { display: inline; }
#post text { margin: 8px 4px; }





#post_comment { }

#post_comment_btn { 	padding: 2px 10px 2px 0; float: right; width: 150px; }

#post_comment_btn button { width:150px; height:32px; }	

#right_content { width: 460px; margin: 15px; overflow: hidden; color: #000; 	float:left; }

#ads_right { float:right; width: 120px; margin: 10px 0;  border-left: thin solid #b8b8b8;}
#ads_right a { text-decoration: none; font-weight:bold; display: block; color: black; padding: 2px 0 2px 4px; }
#ads_right a:hover {   color: #888; }

#ads_right h3 { color: #b8b8b8; clear:both; border-top: thin solid #b8b8b8; border-bottom: thin solid #b8b8b8; margin: 2px 5px; }

.blog-footer { clear: both; font-size: small; margin: 0 10px; clear: both; padding: 2px 270px; border-top: thin solid gray; }

/* #footer p { font-size: small; color: #100603; } */ 

.blog-footer a { padding: 0 4px; font-weight: bold; color: #500; display: inline; text-decoration: none;}
.blog-footer a :hover{ font-weight: bold; color: #500; text-decoration: none;}
.blog-footer a :visited{ font-weight: bold; color: #500; text-decoration: none;}

/*  From id's to classes:  Main blog elements  */

.blog-main { background:white; color:black; width:1000px; margin: 0 auto; }
.blog-header { margin: 5px auto; height: 240px;   background-image: url("../img/jack3.png");}
#header { overflow: hidden; height: 240px; width: 960px; color: #EEE; background-image: url("../img/jack3.png"); }	

#header h1 { text-align:right; padding: 165px 20px 10px 20px; color: #eee; font-size: 38px; }
/*  typographical styles  */
.nice-header { color: #b8b8b8;  clear:both;  border-top: thin solid #b8b8b8; border-bottom: thin solid #b8b8b8; padding: 2px 10px; margin: 4px 0 2px 0;}
.indented { padding: 2px 0 2px 18px; }


/*  navigation bar  */ 
.blog-navigation { margin-left: 50px;  padding: 6px 12px; }
.blog-navigation a { font-size: 140%; color:black; display:inline; padding: 2px 8px; }
.blog-navigation a:hover { color:white; background:black; }
.blog-navigation ul { display:inline; }
.blog-navigation li { width: 60px; } 

/*  blog content divs  */
.blog-left { float:left; width: 180px; margin:5px; } 
.blog-left-wide { float:left; width: 260px; padding: 0 6px 10px 0; border-right: thin solid #b8b8b8; margin-bottom:10px; } 
.blog-left-wide a { color:#111231;  } /*  links   */
.blog-left-wide a:hover { color:#B4EC80; cursor:pointer; }
.blog-left-narrow { float: left; width: 120px; margin: 5px;  } 

/* TODO:  play with this more */
.blog-content { float: left; width: 640px; margin 5px; padding-left:10px; } 
.blog-content a {  color:#50798F; }
.blog-content a:hover { color:black;}
	

.blog-index-list { float: left; width: 380px; margin: 10px 5px 5px 10px; padding-left: 10px; list-style-type:none; } 
.blog-index-list li { list-style-type:none;  }
.blog-index-list a { display: inline;  color:#476D84; }
.blog-index-list a:hover { color:#B4EC80;  cursor:pointer;  }

.blog-content-narrow { float: left; width: 480px; margin: 10px 5px 5px 0; padding-left: 10px; } 
.blog-content-narrow a { display: inline; color:#476D84;  }
.blog-content-narrow a:hover { color:#B4EC80;  cursor:pointer; }
.blog-content-supernarrow { float: left; width: 280px;  padding:10px; }

.blog-right { float: right; width: 220px; margin-left:5px; border-left: thin solid gray;  } 
.blog-right-narrow { float: right; width: 120px; padding: 0 15px 10px 5px;  border-left: thin solid #b8b8b8; margin-bottom: 10px; }
.blog-right-narrow a { color:#111231;  } /*  links   */
.blog-right-narrow a:hover { color:#B4EC80; cursor:pointer; }
.blog-right-narrow h3 { color: #b8b8b8; clear:both; border-top: thin solid #b8b8b8; border-bottom: thin solid #b8b8b8; margin: 2px 5px; }

.blog-contact { float: left; width: 500px; margin: 5px; } 

#ads_right { float:right; width: 120px; margin: 10px 0;  border-left: thin solid #b8b8b8;}

/*  Blog Post Style  */
.blog-post { width: 640px; padding: 4px 4px; margin: 5px 0 10px 5px;  }
.blog-post a { display: inline; }
.blog-post-text { padding: 10px 4px; overflow:hidden; margin: 4px 2px 4px 4px; font: helvetica; display: block;}
.blog-post-text p { font: helvetica; display: block; padding-left:15px;}
.blog-post-text ul { margin-left: 40px; }
.blog-post-text li { }
.blog-title { color: 2a2a2a; background:#B4EC80; font-size:20px;  padding-left: 10px; width:100%; float: left; overflow:hidden; }
.blog-title tt { 	font-size: small; color:#444; display: inline;  }


.blog-index { color: 2a2a2a; background:#B4EC80; font-size:16px;  padding-left: 15px; margin: 0 20px 10px 10px; width:100%; float: left; overflow:hidden;} 
.blog-index a { display: inline; }
.blog-index tt { font-size: small; color:#444; display: inline;  }

/*  #title font {  color: gray; }  */


/*  Classes  */

table.comment { text-align:left; } 
.admin { float: left; margin:5px; border: thin solid #444;}
/* small fixes */ 
.clear { clear:both; }
.hidden { display:none; }
.center { padding:10px 20px; }
.inline { display:inline; padding: 2px 4px; } 

.twitter { font-size: small; padding: 5px 15px; color: #225; }
.twitter span { width: 100%; margin: 0 0 5px 0; }
.twitter b { font-size: small; color: black; font-weight: bolder;} 
.twitter a { display:inline; color:#111231; font-size:80%; }
.twitter a:hover { color:#B4EC80;  }

/* interesting color palettes from colour lovers:
	Dinoshe-light blue: ABC9C6  Light Blue: BEF0E4   Hotter Blue: 74F5F5  
	Beach Yellow: FFE78F  Pale Yellow: FFB947  
	Pale Green B4EC80   Olive: 7BA058  
	Light lime: B4EC80   
	Darker Pale blues: 50798F , 476D84  
	Deep Blue: 111231, 
	Sugar: FFF4D4, light sugar: E9EDDB, lighter sugar: F1EDED 


*/
.comment-area { background-color:#f1f1f1; color:#888 overlow:hidden; width:550px;  border: solid gray thin;  margin: 5px 2px 5px 12px;  padding: 5px 2px 5px; } 
.comment-area h4 { font-weight:bold; padding: 0 0 10px 15px; color:#222; }
.comment-area span { font-size:140%; } 
.comment-area span:hover { cursor:pointer; } 

.comment-user-comment { width: 500px; padding: 2px 10px 10px 30px; color: #444; }
/* .comment-area-comments  */


p.comment-area { padding: 2px 2px; }
.comment-area label { text-align:left; font-weight: medium; } 
.comment-area-left { float:left; width:300px; }
.comment-area-right { float:left; width:300px; }
.comment-labels { float:left; padding-left:10px; width 100px; } /* unused */ 
.comment-inputs { float:left; padding-left:10px; width 140px; } /* unused */ 



/* Site typography */
/*
h1 {
	font-size: xx-large;

	color: #44330D;
}
h2 {
	font-size: x-large;
	color: #721;
}
h3 {
	font-size: large;
	color: #621;
}
h4 {
	font-size: medium;
	color: #521;
}
h5 {
	font-style:normal;
	color: #8b3310;
}
h6 {
	font-size: xx-small;
	color: #311;
}
*/

