/* General elements
------------------------------------- */

body {
	margin:					0;
	padding:				0;

    margin-bottom:          2em;
	
	background-color:		#FFFFFF;
	color:					#333333;
	font-family:			arial, verdana, helvetica, arial, sans;
	font-size:				80%;

	text-align:				center; /* Make IE5 center the container */
}


a {
	color:					#B80004;
}

a:hover {
	background-color:		#FFFFDD;
}

a img {
	border:					0;
}

h1, h2 {
	font-family:			arial, 'trebuchet ms', sans;
	color:					#40501F;
	margin-top:				0.5em;
	letter-spacing:         -0.02em;
}

/* Sizes adopted from 
http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography_part_4/ */
h1 {
	font-size: 				2.18em;
	line-height:            1em;
}

h2, dl.projects dt {
    margin-top:             1.45em;
	margin-bottom:			1em;
	font-size: 				1.45em;
	color:					#40501F;
}

h3 {
	font-size: 				1.18em;
}

h1 a {
    text-decoration:        none;
}

h1 a:hover {
    text-decoration:        underline;
    background-color:       transparent;
}

ul, ol {
    margin-bottom:          1em;
    margin-left:            0;
    padding-left:           0;
}

li {
    margin-left:            0;
}

ol li {
    margin-bottom:          1em;
}    

li ul, li ol li {
    margin-left:            1.5em;
}


ins {
    background-color:       #E2E3D1;
    text-decoration:        none;
}

p {
    margin-top:             0;
    margin-bottom:          1em;
}

pre {
    background-color:       #333333;
    color:                  #FFFFFF;
    font-size:              1em;
    overflow:               auto;
    padding:                1em 1em;
} 

table {
    border-collapse:        collapse;
    margin-bottom:          1em;
}

table td {
    background-color:       #FFFFFF;
    border:                 1px solid #CCCCCC;
    padding:                0.1em 0.3em;
}

code {
    font-size:              1.1em;
    font-family:            'Bitstream Vera Sans Mono', 'courier new', courier, monospace;
}

/* Style the forms */

input {
    padding:                0.2em;    
}

input:hover {
    background-color:       #FFFFFF;
    /* border:                 1px solid #000000;*/
}

button {
    padding:                0.2em 1em;
    font-weight:            bold;
}

/* Mark external links by selecting all absolute links */
a[href^="http://"] {
    padding-right:          18px;
    background-image:       url(/skins/substance/images/icons/external_16x16.gif);
    background-repeat:      no-repeat;
    background-position:    100% 75%;
}

/* remove the icon from absolute links to mentalized */
a[href^="http://mentalized"],
a[href^="http://www.mentalized"] {
    padding-right:          0;
    background-image:       none;
}

blockquote {
    background-image:       url(/skins/substance/images/quote_start.png);
    background-repeat:      no-repeat;    
    margin-left:            0;
    margin-right:           25px;
    padding-left:           25px;
}

/* Structure 
------------------------------------- */

#container, #mainNavigation ul {
    width:					50em;   /* Controls the overall width of the page */
	margin-left:			auto;
	margin-right:			auto;
	text-align:				left;   /* Escape IE5 center-hack */
}

#container {
	font-size:				1em;
	line-height:			1.7em;
}

#mainNavigation {
	background-color:		#7F8D3E;
	background-image:		url(/skins/substance/images/menu_mask.gif);
	background-repeat:		repeat-x;
	background-position:	0 100%;	
}

#mainNavigation ul {
	padding:				0;
	margin-top:				0;

	overflow:				hidden;

	background-color:		#7F8D3E;
	background-image:		url(/skins/substance/images/menu_mask.gif);
	background-repeat:		repeat-x;
	background-position:	0 100%;

	list-style-type:		none;
}

#mainNavigation ul li {
	margin:					0;
	padding:				0;
	float:					left;
}

#mainNavigation ul li a {
	margin:					0;
	display:				block;

	text-decoration: 		none;	
	padding:				0.5em 0px 1em 0px;
	width:					10em;
	overflow: 				hidden;

	text-align:				center;

	color:					#E2E3D1;
	background-color:		#7F8D3E;
	background-image:		url(/skins/substance/images/menu_mask.gif);
	background-repeat:		repeat-x;
	background-position:	50% 100%;
}

#mainNavigation ul li a:hover {
	background-color:		#E2E3D1;
	background-image:		url(/skins/substance/images/menu_arrow_mask.gif);
	background-repeat:		no-repeat;
	background-position:	50% 100%;

	color:					#40501F;
}

/* Mark the currently active part of the main menu */
#journal a.journal,
#individual a.journal,
#archive a.journal,
#About #mainNavigation a.about {
	background-color:		#40501F;
	color:                  #E2E3D1;
	background-image:		url(/skins/substance/images/menu_arrow_mask.gif);
	background-repeat:		repeat-x;
	background-position:	50% 100%;
}

#header {
	clear:					both;
	margin-top:				2em;
	margin-bottom:			2em;
}

#header dt {
	float:					left;
}

#header dd {
	margin-left:			10em;
}

a#logo {
    display:                block;
    
    width:                  100px;
    height:                 100%;

    background-image:       url(/skins/substance/images/mentalized.gif);
    background-repeat:      no-repeat;
    background-position:    0 50%;

    text-indent:            -3000px;
    text-decoration:         none;
}
	
#tagline {
	border-left:			1px solid #8D8D8D;
	font-weight:			bold;
	margin:					0;
	padding-left:			0;
}

#tagline a {
	color:					#8D8D8D;
	text-decoration:		none;
	line-height:			1.6em;
	display:				block;
	padding:				0em 1em;
}

.footer {
    border-top:             2px solid #CCCCCC;
    padding-bottom:         2em;
    margin-bottom:          2em;
}

.footer p {
    margin:                 0;
}

/* Add a fancy fade-to-white effect at the bottom of the page */
#fadefooter {
    position:               fixed;
    bottom:                 0;    
    left:                   0;
    background-image:       url(/skins/substance/images/fader/bottom.png);
    background-repeat:      repeat-x;
    width:                  100%; 
    height:                 30px;
}


/* Add some space for the footer */
body {
    margin-bottom:          50px;
}

.sidebar {
	margin-left:			20px;
	float:					right;
	background-color:		#FFFFFF;
	border:					2px solid #E2E3D1;
}

.sidebar h2 {
	font-size:				1em;
	background-color:		#E2E3D1;
	margin:					0;
	padding:				5px;
}

.sidebar ul.details {
	margin:					0;
	padding:				0;
	list-style-type:		none;
}

.sidebar img {
	padding:				5px;
	
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	background-image:		url(/skins/substance/images/image_200x150_shade.jpg);	
}

/* General classes
------------------------------------- */

.avatar {
    vertical-align:         bottom;
    float:                  left;
    margin:                 0 1em 1em 0;
}

.clear {
	clear:					both;
}

/* The dl element */

.element {
	clear:					both;
	margin-top:             0.5em;
	margin-bottom:			0.5em;
	padding:				0.5em 0;
	overflow:				hidden;
	/* border-top:				1px solid #CCCCCC; */
    padding-top:            1em;
}

dl.element dt {
	float:					left;
	width:					9em;
	font-weight:			bold;
}

dl.element dd {
	margin-left:			10em;
}

/* Make sure elements inside elements can move up to the top of the containing element */
dl.element dd dl.element {
	clear:					none;
}

dl.element dd dl.element dt {
	text-align:				left;
}

.column {
    margin-right:           2%;
    width:                  47%;
    float:                  left;
}

.timestamp, .description {
    display:                block;
    margin-bottom:          1em;
    font-weight:            normal;
    font-size:              0.8em;
	line-height:			1.3em;
	color:					#888888;
}

.footnotes {
	border-top: 1px solid #cccccc;
	font-size: 0.8em;
	padding: 0.5em 0 0 2.5em;
	width: 25%;
}

.footnotes li {
	width: 480px;
}

/* Fancify some links */
span.categories,
a.comments,
a.more {
    padding-left:           20px;
    padding-bottom:         2px;
    background-repeat:      no-repeat;
	background-position:	0% 0%;
}

span.categories {
    background-image:       url(/skins/substance/images/icons/category_16x16.gif);
}

a.comments {
    background-image:       url(/skins/substance/images/icons/comments_16x16.gif);
}

a.more {
    background-image:       url(/skins/substance/images/icons/post_16x16.gif);
}

/* Don't fancify the comments link in headers */
h1 a.comments {
    padding:                0;
    background-image:       none;
    color:                  #CCCCCC;    
}

/* Styles for syntax highlighted code */
/* Based on the SunBurst TextMate theme. */

.javascript .global,
.sql .method {
    color:                      #3387CC;
}

code .comment {
    color:                      #AEAEAE;
    font-style:                 italic;
}

code .constant {
    color:                      #3387CC;
}    

code .keyword {
    color:                      #E28964;
}

code .string {
    color:                      #65B042;
}

code .symbol {
    color:                      #3387CC;
}

code .variable {
    color:                      #3E87E3;
}
    

/* Frontpage elements
------------------------------------- */

.peptalk {
	padding:				10px;
	margin-top:				1em;

	border-top:				2px solid #7F8D3E;
	border-bottom:			2px solid #7F8D3E;

	font-family:			helvetica, tahoma, arial, 'trebuchet ms', sans;
	font-size:				1.45em;
	color:					#40501F;

    text-align:             center;
}

.peptalk h1 {
    font-size:              1.8em;    
    margin-top:             0.3em;
    margin-bottom:          0.3em;
}

div.intro {
    margin-top:             2em;
    text-align:             left;
    position:               relative;   /* Making the absolute relative */
    height:                 310px;
}

.intro img {
    position:               absolute;
    width:                  400px;
    height:                 300px;
}

.benefits {    
	position:			    absolute;
    left:				    410px;
    right:                  0;
    margin-left:            1em;
}

.benefits ul li {
    font-size:              0.7em;
    margin-bottom:          0.1em;
}

a.signup {
    display:                block;
    padding:                1em;
    text-align:             center;
	background-color:		#FFFFDD;
    border:                 1px solid #7F8D3E;
}

/* Headlines in recent entries list need less of a bottom margin to make the association with the 
metadata line obvious */

#recent_entries dd h1 {
    margin-top:             0;
    margin-bottom:          0.2em;
}

/* Projects
------------------------------------- */

dl.projects dt {
	clear:					both;
	font-weight:			bold;
}

dl.projects dd {
	margin:					0;
	margin-bottom:			1em;
}

dl.projects dd.images {
	float:					left;
	width:					220px;
}

dd.images a:hover {
	background-color:		#FFFFFF;
}

dd.images img {
	padding:				5px;
	background-position:	50% 50%;
	background-repeat:		no-repeat;
	background-image:		url(/skins/substance/images/image_200x150_shade.jpg);
}

dd.images a img {
	border:					0;
}

dd.images a:hover img {
	background-image:		url(/skins/substance/images/image_200x150_shade_hover.jpg);
}

dl.projects dd.description {
	margin-left:			240px;
}

dl.projects dd.description p {
	margin-top:				0;
	margin-bottom:			1em;
}

/* Comments styles
------------------------------------- */

input#author,
input#email,
input#url {
    padding:                0.2em;
    width:                  50%;    
}

#comment_text {
    padding:                0.2em;
    width:                  95%;
}


/* Escape previous redefined style */

/* Style weighted lists */

ul.weighted {
	list-style-type:		none;
	margin:			        0;
	padding:		        0;
	text-align:             justify;
}

ul.weighted li {
	display:				inline;
	margin:			        0;
	margin-right:           0.6em;
}
			
.weighted li.level0 {	font-size:	1em; }
.weighted li.level1 {	font-size:	1.1em;	}
.weighted li.level2 {	font-size:	1.21em;	}
.weighted li.level3 {	font-size:	1.33em;	}
.weighted li.level4 {	font-size:	1.46em;	}
.weighted li.level5 {	font-size:	1.61em;	}
.weighted li.level6 {	font-size:	1.77em;	}
.weighted li.level7 {	font-size:	1.95em;	}
.weighted li.level8 {	font-size:	2.14em;	}
.weighted li.level9 {	font-size:	2.36em;	}			
.weighted li {
	line-height:			1em;
}

ol.weighted li {
    margin-bottom:          0;
}

.search {
    width:                  30em;
    text-align:             right;
}

.search form {
    margin:                 0;
    padding:                0;
    padding-top:            0.2em;
}

/* Style the search field like the other navigation elements */
.search input {
    text-align:             center;
    background-color:       #7F8D3E;
    border:                 1px solid #7F8D3E;
    color:                  #E2E3D1;
	font-family:			helvetica, verdana, arial, sans;
    width:                  10em;
}


.search input:focus, .search input:hover {
    text-align:             center;
    color:                  #40501F;
    background-color:       #E2E3D1;
    border:                 1px solid #40501F;
}

.search button {
    font-weight:            normal;
}

/* Stuff for the live search */

#search_status img {
    vertical-align:         bottom;
}

#search_results {
    display:                block;
    margin-bottom:          1em;
    padding:            	0.5em;
    position:               relative;
    top:                    -1.4em;
    background-color:       #E2E3D1;
    border:                 0;
}

div#search_results h2 {
    margin-top:             0;
}

div#search_results ul {
    margin:             	0;
    padding:            	0;
    list-style-type:    	none;
}

div#search_results ul li {
    display:            	block;
	margin:					0;
	padding:				0;
	background-image:		none;
    border-top:         	1px solid #AAAAAA;
}

div#search_results ul li a, div#search_resultspanel ul li p {
    display:            	block;
	margin:					0;
    padding:            	0.5em;
	border:					0;
}

div#search_results ul li a:hover {
	color:					#333333;
    background-color:   	#F0F0F0;
	border:					0;
}



/* Portfolio
------------------------- */

dl.portfolio.element {
    width:                  100%;
}

dl.portfolio dd {
    margin-left:            20em;
}

dl.portfolio.element.case h2,
dl.portfolio.element dd h2:first-child {
    margin-top:             0;
}

dl.portfolio.element.case h2 {
    margin-bottom:          0;
}

dl.portfolio.element .description {
    font-size:              1em;
}

dl.portfolio img {
    width:                  18em;
    max-width:              229px;
    border:                 2px solid #7F8D3E;
}