/* 

ToC

	1. defaults
	2. structure
	3. fonts
	4. links
	5. images
	6. blogkomments
	7. menu

*/



/* --------- 1. defaults  --------- */

*	{
	padding: 0;
	margin: 0;
		}

body {
		color: #000033;
		background-color: #CCCCCC;
		background-repeat: no-repeat;
		background-image: none;
		background-attachment: fixed;
    	background-position: bottom right;
		}
		
/*  --------- 2. structure  --------- */

#container {
		top: -1px;
		width: 1000px;
		height: 900px;
		margin: 0 auto;
		position: relative;
		float: right;
		right: 0px; 
		}
		
#board {
		width: 1000px;
		height: 900px;
		right: 0px;
		top: -1px;
		position: absolute;
		background-image: url(graphix/billboard.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		z-index: 1;
		}

#overview1 {
		width: 363px;
		height:369px;
		left: 394px;
		top: 143px;
		position: absolute;
		background-image: url(graphix/1polaroid.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		z-index: 4;
		}
		
#overview2 {
		width: 736px;
		height:377px;
		left: 205px;
		top: 143px;
		position: absolute;
		background-image: url(graphix/2polaroids.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		z-index: 4;
		}	
		
#overview3 {
		width: 791px;
		height: 497px;
		left: 181px;
		top: 141px;
		position: absolute;
		background-image: url(graphix/bigthumb.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		z-index: 4;
		}	
		
#image {
		width: 794px;
		height:606px;
		left: 177px;
		top: 102px;
		position: absolute;
		z-index: 4;
		text-align: center;
		}

#index0 {
		width: 305px;
		height:246px;
		left: 427px;
		top: 177px;
		position: absolute;
		z-index: 6;
		}	
		
#index1 {
		width: 305px;
		height:246px;
		left: 244px;
		top: 181px;
		position: absolute;
		z-index: 6;
		}		

#index2 {
		width: 305px;
		height:246px;
		left: 606px;
		top: 179px;
		position: absolute;
		z-index: 6;
		}		
		
#index3 {
		width: 660px;
		height:420px;
		left: 254px;
		top: 187px;
		position: absolute;
		z-index: 6;
		}			
		
#text {
		width: 780px;
		height: 159px;
		float:right;
		right:33px;
		top:742px;
		position: absolute;
		z-index:3;
		background-position: center center;
		} 
		
#map {
		width: 133px;
		height:784px;
		left: 36px;
		top: 36px;
		position: absolute;
		z-index: 5;
		}
		
#comments {
		width: 450px;
		height: 29px;
		float: left;
		bottom:0px;
		position: relative;
		z-index:4;
		background-position: center center;
		} 
		
#thumbnails {
		width: 780px;
		height:60px;
		margin-top: 10px;
		z-index: 3;
		}		

#image p {
		text-align:left;
		}

/* ---------- 3. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		}

h1 {
	color: #660000;
	text-transform: uppercase;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 1.5em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	vertical-align: middle;
	text-align: center;
	line-height: normal;
		}

h2 {
	padding-top: 10px;
	margin-bottom: 10px;
	text-transform: capitalize;
	color: #660000;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 1.3em;
	font-style: normal;
	line-height: 1.3em;
	font-weight: normal;
	font-variant: normal;
	text-align: center;
		}

.linkmenu {
	color: #CC0000;
	text-transform: uppercase;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 2em;
	background-color: #D3C5AB;
		}

.news {
	margin-bottom: 0.8em;
	text-align: center;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 1.2em;
		}

p {
	margin-left: 0.8em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 1.2em;
	line-height: 1.6em;
		}

#materials {
		}

#materials:before {
		content: 'created with: ';
		color: #000000;
		}

#comments {
	text-align: center;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 1.2em;

		}

#comments:after {
		content: ' comments have been left.';
		color: #000000;
		}

.topmenu {
		text-align: center;
		margin-top: 2em;
}

#description {
		font-size: 8px;
}

.linktext {
		background-color: #DBD8D1;
		}

/* ---------- 4. links ---------- */

a {
		color: #CC0000;
		text-decoration: none;
		}
		
a:hover, #thumbnails div a:hover {
		color: #3300CC;
		}

/* ---------- 5. images ---------- */

.displayed img {
		border:none;
		text-align:center;
		}

#portfolioImage img {
		border: 1px solid #353535;
		margin-bottom: 8px;
		text-align: center;
		}

#thumbnails div img {
		border: 1px solid #353535;
		margin-bottom: 3px;
		}

#thumbnails div a:hover img {
		border-color: #CCCC66;
		}

/* ------- 6. Input Fields ------- */
		


/*Input fields*/

input,textarea  {
    border:1px solid;
    padding:2px;
    background:#f9f9f9;
    border-color:#ccc;
    color:#333;
    }
input[type="submit"]:hover {
    background:#fcfcfc;
    }
input:hover,textarea:hover {
    border:1px solid;
    background:#fff;
    border-color:#aaa;

    }
input:focus,textarea:focus {
    border:1px solid;
    background:#fff;
    border-color:#888;
    }



/*Box with the form elements*/
div.blogkbox
    {
    width: 400px;
    background:#f1f1f1;
    color:#333;
	border-top:thin dotted #999;
	border-bottom:thin dotted #999;
    padding-top: 5px;
  	padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin: 15px 2px 2px 2px;
}

/*Box around the comments*/
div.blogkcomments
    {
    width: 300px; 
    /*background:#f1f1f1;*/
    margin: 15px 2px 15px 2px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    }

/*even rows*/

.commentsEven
   {
    background:#fff;
    border-top:thin dotted #999;
	border-bottom:thin dotted #999;
   }

/*odd rows*/
.commentsOdd
   {
    background:#f1f1f1;
    border-top:thin dotted #999;
	border-bottom:thin dotted #999;
   }

/*moderators blog author rows*/
.commentsMod
   {
    background:#e9e9e9;
    border-top:thin dotted #333;
	border-bottom:thin dotted #333;
   }

    
div.blogkcomments:hover
    {
    background:#fff;
    color:#333;
	border-top:thin dotted #333;
	border-bottom:thin dotted #333;
    }
/*Box around the comments End*/



/*Box around the recent comments sidebar*/     
div.blogkcommentsrecent
    {
    background:#f1f1f1;
    color:#666;
	border-top:thin dotted #adadad;
	border-bottom:thin dotted #adadad;
    font-size:11px;
    margin:0.4em 25px;
    padding-top: 5px;
  	padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    font-size:11px;
    text-align:left;
   
    }


span.blogkommlinks
   {
   /*empty for special link effect*/
   }

div.blogkLinks
   {
   /*empty for adjusting the [x comments]-link*/
   }
/*
 now handling tableless forms
 you don't have to edit from here 
 this goes back to an article at
 http://www.alistapart.com/articles/practicalcss/ 
 describing a code concept by eric meyer.

*/

div.blogkrow
	{
  	clear: both;
  	padding-top: 5px;
  	padding-left: 5px;
    padding-right: 5px;
	padding-bottom: 5px;
    font-size:11px;
  	text-align:left;
	}

div.blogkrow span.blogkLeftClmn
    {
    padding-top: 5px;
    float: left;
    width: 30%;
    text-align: right;
    }

div.blogkrow span.blogkRightClmn
   {
   padding-top: 5px;
   float: right;
   width: 60%;
   text-align: left;
   } 
   
.captcha
   {
   margin: 2px;
   vertical-align: bottom;
   border: 1px solid #ccc;
   } 
   
.bkVisitor{
   font-weight: bold;
   text-decoration: none;
   }
img.gravatar {
	float: left;
	margin-top: 4px;
	margin-right: 8px;
	padding: 2px;
	border: 1px solid #ccc;
}