/*
 * main layout and positioning styles
 */
html, body { margin: 0; padding: 0; }
div#layout-container { position: relative; width: 950px; margin: 0 auto; padding: 0; } /* relative positioning because of style switcher */

div#layout-container div#header { height: 48px; margin: 0; padding: 27px 55px 0 55px; color: #eee; }
div#layout-container div#ambience { margin: 0; padding: 0 55px 20px 55px; }
div#layout-container div#content-container { overflow: auto; margin: 0; padding: 0 55px; }
div#layout-container div#content-container div#content { float: left; margin: 0; padding: 10px; width: 648px; border-width: 1px 1px 0 1px; border-style: solid; }
div#layout-container div#content-container div#panels { width: 155px; margin: 0 0 0 685px; padding: 0; }
div#layout-container div#footer { height: 80px; }
div#layout-container div#styleswitcher { position: absolute; right: 55px; top: 17px; }

/* make the container as large as the document */
html, body {height: 100%;}
div#layout-container {height: auto; min-height: 100%;}


/*
 * background images and positioning
 */
html, body { background: #69c repeat-x url(styles/mountain/gradient.png); }
div#header { background: no-repeat url(styles/mountain/header.png); }
div#ambience { background: repeat-y url(styles/mountain/ambience-background.png); }
div#content-container { background: repeat-y url(styles/mountain/content-background.png); }
div#layout-container div#content-container div#content { border-color: #dfdfdf; background-color: #f7f7f7; }
div#layout-container div#content-container div#panels { background-color: #efefef; }
div#layout-container div#footer { background: no-repeat url(styles/mountain/footer.png); }


/*
 * basic typography styles
 */
body { font-size: small; font-family: 'DejaVu Sans', 'Verdana', 'Arial', sans-serif; }
h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em 0; padding: 0; }
p { margin: 1em 0; padding: 0; }
ul, ol { margin: 1em 0; padding: 0 0 0 2.5em; }
li { margin: 0; padding: 0; }


/*
 * header styles (glass title line)
 */
div#header h1 { display: inline; margin: 0; padding: 0; font-size: 1em; }
div#header ul { display: inline; margin: 0; padding: 0; }
div#header ul li { display: inline; margin-left: 0.15em; padding-left: 10px; background: left center url(styles/mountain/breadcrumbs-arrow.png) no-repeat; }
div#header a { margin-left: 0.25em; color: #eee; text-decoration: none; }
div#header a:focus, div#header a:hover, div#header a:active { text-decoration: underline; }


/*
 * ambience area (photo or the setting for a design)
 */
div#ambience div#photo { width: 840px; height: 160px; background: url(styles/mountain/photo.jpg) no-repeat; }


/*
 * color and typographic styles for the content area, the panels and the style swticher
 */
div#content-container, div#styleswitcher { color: #333; }
div#content-container a, div#styleswitcher a { color: #036; }
div#content-container a:focus, div#content-container a:hover, div#content-container a:active, div#styleswitcher a:focus, div#styleswitcher a:hover, div#styleswitcher a:active { color: #69c; }


/*
 * content styles
 */
div#content h2 { margin: 10px 0 0 10px; font-size: 1.5em; }
div#content h2 a { text-decoration: none; }
div#content p.subtitle { margin: 0 0 10px 11px; padding: 0; font-size: 0.75em; color: #666; }
div#content div.post { line-height: 1.5; }
div#content p.details { color: #666; }
div#content p.details span.tags { margin-left: 1.5em; padding-left: 20px; background: left center no-repeat url(images/tags.png); }
div#content p.details span.comments { padding-left: 20px; background: left center no-repeat url(images/comments.png); }

div#content div.figure { margin: 1em; padding: 5px; background-color: #efefef; border: 1px solid #dfdfdf; }
div#content div.figure.inline { float: right; margin: 0 0.5em 0.25em 0.5em; }
div#content div.figure.inline p { font-size: 0.75em; }
div#content div.figure p { margin: 0 0 0.5em; padding: 0; }
div#content div.figure p span.label { font-style: italic; }
div#content div.figure p span.description { }
div#content div.figure img { display: block; padding: 5px; background-color: #f7f7f7; border: 1px solid #dfdfdf; }
div#content div.figure a img { border-color: #036;  }
div#content div.figure a:focus img, div#content-container div#content div.figure a:hover img, div#content-container div#content div.figure a:active img { border-color: #69c; }


/*
 * panel styles
 */
div#panels div.panel { margin-bottom: 1.5em; padding: 0; }
div#panels h2 { font-size: 1em; font-variant: small-caps; letter-spacing: 0.25em; }
div#panels p { font-size: 0.75em; line-height: 1.5; }
div#panels a { text-decoration: none; }
div#panels ul { margin: 0; padding: 0; list-style: none; }
div#panels ul li { margin: 0.25em 0; padding: 0 0 0 15px; background: 0px 5px no-repeat url(styles/mountain/link-bullet.png); }

div#panels div#nav_panel ul li { margin: 0.5em 0; font-size: 1em; font-variant: small-caps; letter-spacing: 0.25em; }

div#about_panel p { margin-left: 15px; }

div#projects_panel ul li h3 { display: inline; font-size: 1em; font-weight: normal; }
div#projects_panel ul li p { margin: 0.25em 0 0.75em 0; padding: 0; }

div#search_panel form { margin: 0 0 0 15px; padding: 0; }
div#search_panel form p { position: relative; height: 20px; background-color: #f7f7f7; border: 1px solid #dfdfdf; }
div#search_panel form p input { width: 117px; border: none; background-color: #f7f7f7; }
div#search_panel form p button { position: absolute; right: 0; top: 1px; width: 18px; height: 18px; margin: 0; padding: 0; border: none; background: left center url(images/search.png) no-repeat; }
div#search_panel form p button span { position: absolute; left: -10000px; }

div#panels div#tags_panel ul { margin-left: 15px; }
div#panels div#tags_panel ul li { display: inline; margin: 0; padding: 0; background: none; }


/*
 * footer styles
 */
div#footer p { margin: 0; padding: 26px 0 0 0; font-size: 0.75em; color: #eee; text-align: center; }
div#footer p a { color: #eee; text-decoration: none; }
div#footer p a:focus, div#footer p a:hover, div#footer p a:active { text-decoration: underline; }


/*
 * style switcher (works in conjunction with jQuery)
 */
div#styleswitcher { display: none; }
div#styleswitcher h2 { text-align: right; margin: 0; padding: 10px 30px 0 0; font-size: 1em; font-weight: normal; background: right top no-repeat url(styles/mountain/switcher-arrow.png); }
div#styleswitcher h2 a { color: #eee; text-decoration: none; }
div#styleswitcher h2 a:focus, div#styleswitcher h2 a:hover, div#styleswitcher h2 a:active { color: #eee; text-decoration: underline; }
div#styleswitcher ul.styles { display: none; }

div#styleswitcher.active { width: 295px; padding-bottom: 20px; background: left bottom  no-repeat url(styles/mountain/switcher-footer.png); }
div#styleswitcher.active h2 { height: 30px; color: #333; background: no-repeat url(styles/mountain/switcher-top.png); }
div#styleswitcher.active h2 a { color: #333; text-decoration: none; }
div#styleswitcher.active ul.styles { display: block; }

div#styleswitcher ul.styles { width: 265px; margin: 0; padding: 0 15px; list-style: none; color: #333; background: repeat-y url(styles/mountain/switcher-background.png); }
div#styleswitcher ul.styles li { overflow: auto; margin: 0; padding: 0.5em 0; background-color: #efefef; }

div#styleswitcher ul.styles li a.thumb { float: left; padding-top: 3px; }
div#styleswitcher ul.styles li a.thumb img { padding: 1px; border: 1px solid #036; }
div#styleswitcher ul.styles li a.thumb img:focus, div#styleswitcher ul.styles li a.thumb img:hover, div#styleswitcher ul.styles li a.thumb img:active { border-color: #69c; }

div#styleswitcher ul.styles li h3 { font-size: 1em; margin: 0; padding: 0; }
div#styleswitcher ul.styles li h3 a { text-decoration: none; }

div#styleswitcher ul.styles li p.time { font-size: 0.75em; margin: 0 0 0.5em 0; padding: 0; color: #666; }
div#styleswitcher ul.styles li p.description { font-size: 0.75em; margin: 0; padding: 0; }

div#styleswitcher ul.styles li ul { margin: 0; padding: 0.35em 0 0 0; list-style: none; }
div#styleswitcher ul.styles li ul li { display: inline; background-color: transparent; }
div#styleswitcher ul.styles li ul li a { text-decoration: none; }
div#styleswitcher ul.styles li ul li.switch a { letter-spacing: 1px; padding-left: 13px; background: left center no-repeat url(styles/mountain/link-bullet.png); }
div#styleswitcher ul.styles li ul li.about a { margin-left: 1em; font-size: 0.75em; }

div#styleswitcher ul.styles li h3, div#styleswitcher ul.styles li p.time, div#styleswitcher ul.styles li p.description, div#styleswitcher ul.styles li ul { margin-left: 130px; }

div#styleswitcher ul li.explain a { text-decoration: none; padding-left: 15px; background: left center no-repeat url(styles/mountain/link-bullet.png); }


/*
 * Use Arial for small text on windows (by skipping Verdana as fallback font)
 */
div#content p.subtitle, div#content div.figure.inline p, div#panels p, div#footer p,
div#styleswitcher ul.styles li p.time, div#styleswitcher ul.styles li p.description, div#styleswitcher ul.styles li ul li.about a, div#styleswitcher ul li.explain {
	font-family: 'DejaVu Sans', 'Trebuchet MS', sans-serif;
}