/*
Theme Name: Fieldsofgold stavelin edit
Theme URI: http://www.freewordpresslayouts.com
Version: 0.1
Description: 2 Column theme
Author: Make Quick & Eirik Stavelin
Author URI: http://www.freewordpresslayouts.com
*/

/*
Hei Claus:
stavelin.com er en liten webside, som i stor grad redigeres ad-hoc. I små prosjekter som dette har jeg normalt skrevet CSS i en struktur som følger websiden. 
- først generelle stiler (p{ting:tang;}
- så header før content og sidebar og til slutt footer. Elementer som ligger inni sidebar havner da under sidebar, og tilsvarende for content. CSS dokumentet leses nedover slik en surfer kan skrolle nedover siden.
Slik er det veldig lett å finne stilene, selv uten firebug.

I større prosjekter, som mobyc.tv brukte vi ulike css-dokumenter for ulike moduler i websiden.Modulene bestod mye av struktur (layout). Dette er bare hensiktsmessig når det er lite som kan arves mellom modulene. Typografi bør f.eks. ikke behandles slik. På mobyc.tv skreiv jeg om hele strukturen fra inline styles, til eksterne stilark. 

Herunder er enda en tilnærming til CSS som har bedre potensiale mtp arv. 

*/

/* Eric Meryers reset */
@import url("../reset.css");
/* stiler som jeg tar med fra versjon til versjon. Bildetskst, mm */
@import url("../stavelin.css");
/* typografi */
@import url("typo.css");
/* skjema */
@import url("form.css");

a img{
	border:0; margin:2px;
}

/* Structure */

body {
	margin: 0;
	padding: 0;
	color: #5A5A5A;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	background-color: #5A5A5A;
	font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}
#top-banner{
	margin:0;
	font: helvetica;
/*	height:2.5em;*/
/*	margin-bottom:2em;*/
/*	border-bottom:2px solid #5A5A5A;*/
	font-weight:bold;
	text-transform: uppercase;
	margin-left:auto;
	margin-right:auto;
	width:968px;

}
#top-banner h1{
	margin:0;
/*	margin-left:5em;*/
	margin-top:2px;
	font-size:70pt;
	display:inline;
/*	float:left;*/
	letter-spacing:0.1em
	}
#top-banner h1 a{	
	text-decoration:none; 
	padding: 2px 6px;
/*		color:#fafafa;*/
/*	background-color: #fff;*/
	color: #9AB9C4;
	font-weight:bolder;
	text-shadow:0.1em 0.1em 0.1em black;
	}
/* navig menu */
ul#top-menu{
height:35px;
margin: 0 0 0 0px;
padding:0;
width:968px;
background-color: black;
}
ul#top-menu li {
display:inline;
font-family:"Lucida Sans";
font-weight:bold;
line-height:30px;
}

ul#top-menu li a span {
display:block;
float:left;
height:30px;
padding:0 0 0 27px;
}
ul#top-menu li a {
	display: block;
	float: left;
	margin-top: 5px;
	padding: 0 27px 0 0;
	color: #fff;
	text-decoration: none;
/*	border-left: #2B404D 1px solid;*/
}

ul#top-menu li a:hover {
	color: #fff;
	cursor: pointer;
	background-color: #9AB9C4;
}

ul#top-menu li a span {
	display: block;
	float: left;
	height: 30px;
	padding: 0 0 0 27px;
}

ul#top-menu li.active a {
background:transparent url(images/menu_button.gif) no-repeat scroll right top;
border:0 none;
color:#1A272E;
margin-top:0;
}

ul#top-menu li.active a span {
	background: url(images/menu_button.gif) no-repeat left top;
	height: 35px;
}
ul#top-menu li.active a {
	border: 0;
}

ul#top-menu li.active a {
	margin-right: -1px;
	position: relative;
}
ul#top-menu li.active-shortly a{
background-color: gray;
}


.slogan {
/*	letter-spacing:0.1em;
	float:left;
	font-size:14px;
	color: #6F6F6F;
	color:#5A5A5A;*/
/*	margin-top:6px;
	margin-bottom: 2px;
	margin-left:1em;
	padding: 2px;
	padding-bottom: 0;
	display:block;*/
	}
.btn-slide{
	padding-top:1em;
	float:left;
}

p.velcome{
padding: 20px;
text-transform: none;
}
a.velcome-flick {margin-left:56px;}

#header {
/*	float: left;
	width: 768px;
	padding-bottom: 8px;
	background: #FFFFFF;
	clear: right;	*/
/*	background-image: url(images/header-bg.gif);*/	
/*	background-image: url(images/header_dec08.gif);
	background-repeat: no-repeat;
	padding-left: 0px;
	height: 89px;
	margin-top: 13px;*/
}

#nav-menu {
	display:none;
	clear: both;
/*	float: left;*/
/*	width: 100%;
	background-image: url(images/header2.gif);*/
	background-color: #fff;/*#9ab9c4;*/
/*	height: 220px;*/
}

#wrapper {
	clear: both;
	float: left;
	width: 100%;
	color: #555555;
	background: #FFFFFF;
	padding-top:1em;
}
#wrapper2 {
width: 968px;
margin-left: auto;
margin-right: auto;
}
#content-wrapper {
/*	width: 65%;*/
	float: left;
}

#content {
	float: left;
	padding: 0 40px 10px 40px;
/*  width:450px;*/
	width:510px;
}
.post-wrapper {
/*	width:500px;*/
	margin-bottom:70px;
}
.the_tags{margin-bottom:10px;}
.post {
/*	width:500px;*/
}
.post img {
max-width:500px;
width: expression(this.width > 500 ? 500: true);
}
#sidebar-wrapper{
/*	clear:both;*/
/*	background:transparent url(images/bg_footer.png) repeat-x scroll center bottom;*/
/*	bg_footer.png*/
/*	width: 35%;*/
	width: 345px;
	float: right;
}

#sidebar {
/*	float: right;*/
	padding: 10px 15px 10px 10px;
/*	width: 210px;*/
	margin-right: 15px;
	margin-top: 0px;
}
#sidebar h2{
margin-left:10px;
clear:both;
margin-top:10px;}



#tabs{/*width:100%;*/}


#footer {
	clear: both;
	float: left;
	width: 948px;
	min-height: 200px;
	text-align: left;
	padding-left: 20px;
    background: #000;
	color: #464646;
	font-size: 11px;
	padding-bottom:100px;
}
#footer h1,#footer h2,#footer h3,#footer h4{color:#9AB9C4;}
#footer h2 a {font-size:100%;text-decoration:none;}
#footer h2 a:hover {font-size:100%;color:#9AB9C4;text-decoration:underline;}
#footer h2 a:visited {font-size:100%;color:#9AB9C4;}
#footer p {color:#fff;line-height:1.1;}
#footer a {
	color: #464646;
	font-size: 11px;
	}
.fblock{ width:280px; float:left; padding:10px;}
#footer a: visited {
	color: #464646;
	}
#footer a:hover {
	color: #993019;
/*	border-bottom: 1px dashed #E18A77;*/
	}
#footer-foto {
	height:331px;
	position:relative;
	}
#footer-foto a img{
	margin: 0;
	padding: 0;
	}

/*element.style {
display:block;
height:100px;
opacity:0.7;

}*/
#footer-foto-caption img a{border: 0;}
#footer-foto-caption {
opacity:0.5;
background-color:#000000;
bottom:0;
color:#FFFFFF;
height:80px;
position:absolute;
width:100%;
z-index:600;
width:500px;
}
#footer-foto-caption h2, #footer-foto-caption p {
color:#FFFFFF;
margin:5px 20px 0px 20px;

}
.flickr-link{
padding: 20px 0 0 20px;
position:absolute;
bottom: 0;
right: 0;
background-image: url('images/badge.jpg');
}
#extras {
/*	float: left;
	width: 780px;
	color: #444444;
	text-align: left;
	padding: 0 10px 10px;
	margin: 10px 12px 20px;
	background-color: #f5f5f5;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;*/
}

/* Header */

#header h1 { padding-left: 30px; position:relative; left:-9999px;/*color:#f1f1f1; background-color:#000;*/}
#header h1 a{text-decoration:none;}

/* Navigation */


/* Wrapper */

#wrapper a:link { /*font-weight: bold;*/ }

#wrapper a:visited { /*font-weight: bold;*/ }

#wrapper a:hover, #wrapper a:active { }

/* Content */

#content .post-title a { border-bottom-width: 0; }

#content .post p.img { float: left; margin: 0 15px 0 0; }

#content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }

#content .post-footer 
{ 
	font-size: 90%; 
	color: #000; /* 888888 */
	margin-bottom: 5px; 
	padding:0px 5px 5px 15px;
	background-repeat: none;

	border-top: 1px solid #000; /* F4E8CA */
	text-align:right; 
}
.post-footer-content {
/*      background-color: #9AB9C4;*/ /*#FFFAEE */
    	padding:5px;
    	display:block;
}

/* Sidebar */

#flickr {
width:295px;
}
#flickr h2 {
}
#flickr a img {
float:left;
margin:0 8px 8px 0px;
background:#F4F4ED none repeat scroll 0 0;
background-color: #ecf7fb;
padding:0.5em 0.5em 1.5em;
border-color:#E7E7DB #D1D1BC #D1D1BC #E7E7DB;
border-style:solid;
border-width:1px;

/*width:7em; */
/*62px*/
/*height:7em;*/
/*62px*/
}
#flickr a img:hover {
background:#D1D1BC none repeat scroll 0 0;
background-color: #9ab9c4;
/*margin: 0;*/
/*width: 89px;
height: 89px;
padding: 0;
border: 0;*/
}

#twitter{}
#twitter p{}

.sideblock {
	padding: 5px 10px;
	margin-bottom: 20px;
/*	background-color: #F7F7F7;
	border: 1px solid #E2E2E2;*/
}

.sideblock ul { }

.sideblock h3 { /*margin-top: 5px; font-size: 14px; color: #DCA345; font-weight: bold;*/ }

#sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }

#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }

#sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none;}

#sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }

#sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}

/* Extras */

#extras h6 { font-size: 14px; text-transform: uppercase; color: #555555; }

#friends {
	float: left;
	width: 150px;
	margin-left: 20px;
	margin-right: 10px;
}

#links {
	float: left;
	width: 275px;
	margin-right: 50px;
}


#friends ul { padding-left: 20px; }

#links dl, #links dt, #links dd { margin: 0; padding: 0; }

#links dt { font-weight: bold; padding-top: 5px; }

#links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }

	/* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

.date {
/*	position:relative;*/
/*	top:50px;*/
/*	top:100px;*/
/*	left:-30px;
	background: url(images/date.gif) no-repeat;
	height: 54px;
	margin-bottom: 0px;
	width: 54px;
	text-align: center;
	float: left;
*//*	margin-top: 15px;*/
/*	margin-bottom: 15px;
*/}
.date .month {
/*	display: block;
	color: #C47F1A;
	padding: 2px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	margin-top: 2px;
	font-weight: bold;
	margin-bottom: 3px;*/
}
.date .day {
/*	display: block;
	color: #FFFFFF;
	font: 2.3em Georgia;
	padding-top: 0px;
	text-align: center;
	margin-top: -8px;*/
}

.post p:first-child {
/*	clear:left;*/
/*	font-weight:bold*/
}

.post p:first-child img, .post p:first-child embed {
	clear: both;
}

#left {
	width: 60px;
	float: left;
}

.comment_meta{
    margin-bottom:10px;
    text-align:right;
}
.comment_meta cite{
    font-size:1.2em;
}
.commen_text p:first-child:first-letter {
    float:left;
    color: #000000;
    background:#ffffff;
    line-height:80px;
    padding-top:1px;
    padding-right:5px;
    font-family:times;
    font-size:100px;    
}



img.avatar {float:right; margin-left:5px;}

#nye, #foto, #sykkel, #about {
	color: black;
	padding:5px 10px;
/*	width:100%;*/
	clear:right;
	height:142px; /* 185 dekker helt..*/
}
#foto, #sykkel{
	background: #0044B2;
}
/*#recent-posts-2 ul li {
    background-color:black;
    list-style-type:none;
    padding: 3px 3px 3px 10px;
    font-size:1.1em;
    text-shadow:0.1em 0.1em 0.5em white;
}
#recent-posts-2 ul li:hover {
    background-color:gray;
}
#recent-posts-2 ul li a{
    color:white;
}
#recent-posts-2 ul li a:hover{
    color:red;
    text-decoration:none;
}*/

li.widget {
     list-style-type:none;
}