/*
Theme Name: MicroFolio
Theme URI: http://www.jonlauridsen.com/
Description: Wordpress theme theme helps you create quick, easy visiting card like mini site. 
Version: 0.1
Tags: quick, mini, micro, social bookmarks, visiting card
Author: Jon Lauridsen
Author URI: http://www.jonlauridsen.com/
License: All Rights Reserved
The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php
*/

@import url("style_content.css");


/* Unused css snippets! */

/*#bg .sh {
	background: url(images/bg-shadows.png) no-repeat right bottom;
	height: 232px;
}*/
/* webkit keyframes???
@-webkit-keyframes 'fade' {		
		0% {
			opacity: 0;
		}
		100% {
			opacity: 100;
		}
}*/





/*	--------------------------------------------------
Global Reset - Resets all browser defaults to 0
-------------------------------------------------- */
html, body {
	margin:0;
	padding:0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	line-height:1;
	font-family:inherit;
	text-align:left;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
ol, ul {
	list-style:none;
}
blockquote:before, blockquote:after {
	content:"";
}
a { outline:none; } 
.aright { float:right; }

	/*	--------------------------------------------------
	href reset
	-------------------------------------------------- */
	A:link, A:visited, A:active, A:hover {
		text-decoration: none;
		font-weight: bold;
	}

/*	--------------------------------------------------
Global values
-------------------------------------------------- */
/*html {
	font-family: Arial, Helvetica, sans-serif;
}*/

body, html {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

strong, em, b, i,
h1, h2, h3, h4, h5, h6, address {
	font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

/*	--------------------------------------------------
Font settings for title and navigation buttons */
#page .title, #page .nav {
	font-family: Arial, Helvetica, sans-serif;
	color: #222538;
}


/*	--------------------------------------------------
Background structure
-------------------------------------------------- */
body {
	background: url(images/bg-pattern.png);
}
html, body { height: 100%; }
#bg {
	position: absolute;
	left: 50%;
	width: 761px;
	margin-left: -378px; /* .5 */
	min-height: 100%;
	height: 100%;
}

	/*	--------------------------------------------------
	Background image */
	
	#bg div {
		background: url(images/bg-content.png) no-repeat;
		height: inherit; width: inherit;
	}
	
	#bg div #bgimg {
		background: url(images/bg-small.jpg) no-repeat;
		height: 191px; width: inherit;
		margin: 0 2px;
	}
	#bgimg .vignette {
		background: url(images/vignette.png) no-repeat;
		height: 100%;
	}


/*	--------------------------------------------------
Content structure
-------------------------------------------------- */
#wrapper {
	position: relative;
	top: 46px; /* shadow is 28px */
	width: 571px;
	margin: 0 auto;
}

#page>div>* {
	margin: 0 45px;
}

#page .header, 
#page .title,
#page .nav,
#page .panels,
#page .footer {
	background: url(images/content.png);
}

#page .header {
	background-position: 0 0;
	height: 41px;
}

#page .title {
	background-position: 0 -71px;
	height: 79px; /* graphics height: 79px */  /* with shadows height is 92px */
	position: relative;
	z-index: 3;
}

#page .nav {
	background-position: 0 -180px;
	height: 51px;
	bottom: 0px; /* Offset by 13px if .title uses its shadow */
	position: relative;
	z-index: 2;
	
}

#page .panels {
	background-position: 571px 0;
	overflow: hidden;
	bottom: 13px; /* double this if .title uses its shadow */
	position: relative;
	z-index: 1;
}

#page .footer {
	background-position: 0 -248px;
	height: 49px;
	bottom: 13px; /* double this if .title uses its shadow */
	position: relative;
}

/*	--------------------------------------------------
Title */

#page .title, #page .title p {
	text-shadow: -.5px 2px 0 #F0F0F0;
}

#page .title div {
	margin: 13px 53px;
}
#page .title p.headline {
	font-size: 2.3em;
}
#page .title p.subtitle {
	font-size: .8em;
}
#page .title img.vcard {
	margin: 6px -5px;
}

#page .title div.l_column {
	float: left;
}
#page .title div.r_column {
	float: right;
}


/*	--------------------------------------------------
Navigation buttons */

/* to stretch the container div to contain floated list */
/*#page .navigation:after {
	content: ".";
	display: block;
	line-height: 1px;
	font-size: 1px;
	clear: both;
}*/

#page .nav ul {
	position: absolute;
	left: 7px;
}

#page .nav ul li {
	float: left;
	margin: 1px 16px;
	width: 100px; /* quick hack to get IE7 to play along... */
	
	/* text */
	text-align: center;
}


#page .nav ul li a {
	overflow: hidden; display: block;
	height: 1.1em; width: 100%;
	padding: 3px 10px;
	
	border: 6px solid #a7a7a7;
	background-color: #a7a7a7;
	
	/* text */
	font-size: 1.0em;
	font-weight: bold;
	color: #222538;
	text-shadow: 0 1px 0 #CCC;
	
	-webkit-transition: none 200ms ease-in-out;
	-webkit-transition-property: height, -webkit-border-radius, border-color, background-color;
	-moz-transition: none 200ms ease-in-out;
	-moz-transition-property: height, -moz-border-radius, border-color, background-color;
	transition: none 200ms ease-in-out;
	transition-property: height, border-radius, border-color, background-color;
}

#page .nav ul li a:hover,
#page .nav ul li a.selected {
	height: 2.2em; /* 2x font size */
	line-height: normal;
	border: 6px solid #a7a7a7;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-bottom-right-radius: 15px;
	-moz-border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	
	padding-top: 2px; /* Magic fudge number to make bottons not pop */
	
	/* text */
	color: white;
	text-shadow: 0 2px 2px #222538;
}
#page .nav ul li a.selected {
	background-color: #4d4d4d !important;
}
#page .nav ul li a:hover {
	background-color: #777;
}

/*	--------------------------------------------------
2nd line on buttons */

#page .nav ul li a div { display: none }
#page .nav ul li a:hover div,
#page .nav ul li a.selected div { display: block; }


/*	--------------------------------------------------
Panels content
-------------------------------------------------- */

/*
All content is imported from style_content.css
*/


/*	--------------------------------------------------
Footer
-------------------------------------------------- */
#page .footer {
	clear: both;
	
}








/*	--------------------------------------------------
Global Container - Default values for containers
-------------------------------------------------- */
/*.container {
position: absolute;
left: 50%;
top: 74px;
width: 515px;
margin-left: -257px;
z-index: 4;
opacity: 1.0;
}*/


/*	--------------------------------------------------
Navigation - Basic layout of the navigation rows
-------------------------------------------------- */
/*#navigation {
height: 128px;
}
#navigation #top {
height: 13px;
background: url(img/bar-top-rounded-13px.png) #e4e4e4 repeat-x;
}
#navigation #title {
height: 79px;
background: url(img/bar-title-79px.png) #e1e0e0 repeat-x;
}
#navigation #buttons {
height: 38px;
background: url(img/bar-buttons-38px.png) #a7a7a7 repeat-x;
}

#content {
height: 440px;
margin-top: 130px;
opacity: 1;
-webkit-transition: height .3s ease-out, opacity .3s linear;
}*/







/* HACKS
--------------------- */

/* IE6 hack to make links fill their containers */ * html #page .nav ul li a { width: 1%; }


/*
P.I.E. FLOAT CLEARING
See http://www.positioniseverything.net/easyclearing.html 
--------------------- */
.clearfix:after { content: "."; clear: both; height:0; 	visibility:hidden; display: block; }
.clearfix { display: inline-block; /* Fixes IE/Mac */ }
/* Hides from IE-mac \*/ * html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */