/*

Life as Me: David Morris Photography
Copyright (c) 2008 Alice Dawn Bevan-McGregor. All Rights Reserved.

*/


/* @group Basic Elements */

html { height: 100%; }
body { background: #9B9B9B url('../img/site-bg.png') top left repeat-x; color: #333; cursor: default; height: 100%; }

a { color: #855295; text-decoration: none; }
a:hover { text-decoration: underline; cursor: pointer; }

h1, h2, h3 { line-height: 100%; }
h1 { font-size: 167%; }
h2 { font-size: 146.5%; font-family: 'Helvetica Neue', Helvetica; border-bottom: 1px solid #999; margin-top: 5px; color: black; }
h2 span, h3 span { float: right; color: #222; letter-spacing: -.1em; display: block; margin-left: 5px; }
h3 { font-size: 138.5%; color: #222; margin-top: 15px; text-transform: lowercase; font-family: 'Trebuchet MS'; }
img { vertical-align: middle; }
strong { font-weight: bold; }
em { font-style: italic; }
form { margin: 0; padding: 0; display: block; }
abbr { border-bottom: 1px dashed gray; cursor: help; }

/* @end */


/* @group Flash Messages */
/* Flash messages are designed to be obnoxious.  This style of flash appears at the top of the window no matter where you scroll, is large, and colorful, thus fulfilling its goal. */

#flash {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    background-color: #569;
    color: white;
    background-image: url('/static/img/bg-hash-gradient.png');
    background-position: bottom;
    border-top: 1px solid #111;
    border-bottom: 1px solid #555;
}

#flash, #flash * { cursor: pointer; }

#flash .yui-b { padding: 5px 0; }
#flash .yui-b>* { font-size: 128%; /* Not sure if this CSS rule works in IE... */ }

#flash label { display: block; text-align: right; font-weight: bold; text-transform: capitalize; }
#flash label:after { content: ':'; /* Sadly, this doesn't work in IE.  TODO: Fix this in JS. */ }

/* Different classes of flash messages get different colors.  In theory they could have different icons, etc. */

#flash.subtle { background-color: #444; color: white; }
#flash.subtle:hover { background-color: #222; }

#flash.warning { background-color: #ff0; color: black; }
#flash.warning:hover { background-color: #ff8; }

#flash.success { background-color: #595; }
#flash.success:hover { background-color: #7b7; }

#flash.failure,
#flash.error { background-color: #800; }
#flash.failure:hover,
#flash.error:hover { background-color: #a00; }

#flash.subtle,
#flash.success,
#flash.failure,
#flash.error { text-shadow: black 2px 2px 2px; }

/* @end */

/* @begin Gross Document Layout */

/* @group Document Layout */

#hd, #bd, #ft { position: relative; }

#hd h1 { padding: 20px 20px 10px; }
#hd h1 a { display: block; width: 218px; height: 100px; text-indent: -10000em; background: transparent url('/static/img/logo.png') top left no-repeat; }
#hd h1 a:hover { text-decoration: none; }
#hd img { position: absolute; top: 20px; right: 0; }

#actions { position: absolute; top: 15px; right: 15px; }
#actions li { display: inline; margin-left: 10px; padding-left: 10px; }
#actions li:first-child { margin-left: 0; padding-left: 0; border-left-width: 0px; }
#actions li a { color: black; }
#actions li a:hover { color: black; text-decoration: none; }

#navigation { /*background-color: #3F3F3F;*/ margin-bottom: 20px; line-height: 100%; }
#menu { position: relative; padding: 0; background: rgb(63,63,63); border: 1px solid rgb(63,63,63); font-size: 123.1%; }

#menu div { display: none; }
#menu ul { padding: 5px; display: block; position: relative; }
#menu ul li { margin: 0 10px; padding: 0; float: none; display: inline; }
#menu ul li:first-child { border: none; }
#menu ul li a { padding: 10px 0; color: #ccc; white-space: nowrap; display: inline-block; }
#menu ul li a:hover { color: white; text-decoration: none; }

#menu ul.root { background: #ccc url('../img/bg-silver-tall.png') repeat-x left 48%; }
#menu ul.root li { margin: 0 10px; padding: 0; float: none; display: inline; }
#menu ul.root li:first-child { border: none; }
#menu ul.root li a { color: rgb(63,63,63); }
#menu ul.root li a:hover { color: black; }

#menu ul.submenu { display: none; }

#crumbs { font-size: 93%; display: block; margin-top: 5px; padding: 10px 15px 0; position: relative; }
#crumbs li { display: inline; margin-right: 5px; }
#crumbs li:first-child { padding-left: 0; background: none; }
#crumbs li a { color: #666; }
#crumbs li a:hover { color: black; }

#sharethis { padding-left: 12px; margin-top: -10px; margin-bottom: 10px; text-align: left; text-transform: uppercase; color: #333; letter-spacing: .2em; font-family: 'Trebuchet MS'; line-height: 1.7em; }

#ft { text-transform: uppercase; color: #333; letter-spacing: .2em; font-family: 'Trebuchet MS'; font-size: 77%; padding: 0 11px; line-height: 100%; padding: 0 35px 5px; line-height: 1.6em; }
#ft .copyright { text-align: left; }
#ft span { float: right; margin-left: 20px; }
#ft p { margin-bottom: 5px; }
#ft a, #sharethis a { color: #666; }
#ft a:visited, #sharethis a:visited { color: #444; }
#ft a:hover, #sharethis a:hover { color: black; text-decoration: none; }
#ft #privacy { border-right: 1px solid #333; padding-right: 1.25ex; margin-right: 0.5ex; }

/* @end */


/* @begin Content Layout */

#bd { padding-top: 10px; }
#bd .yui-main .yui-b { position: relative; margin-bottom: 30px; }
#bd .yui-main .yui-g, #bd .yui-main .yui-u { font-size: inherit; }
#bd .yui-main .content { position: relative; padding: 15px; background-color: rgb(223, 223, 223); border: 2px solid rgb(63,63,63); clear: both; }

.content h2 { margin: 10px -15px; padding: 10px 15px; background-color: rgb(235,235,235); border-top: 1px solid #999; }
.content h2:first-child { margin: -15px -15px 10px; border-top-width: 0px; }
.content .section h2 { margin: 10px -15px 10px; border-top: 1px solid rgb(38, 38, 38); }
.content .section:first-child h2 { margin: -15px -15px 10px; border-top-width: 0; }
.content p { line-height: 140%; letter-spacing: .05ex; text-align: justify; margin-top: 10px; }
.content p:first-child { margin-top: 0; }

h2.large { color: black; margin: 0 0 10px 15px; padding: 0; font-size: 197%; border-width: 0; font-family: 'Trebuchet MS'; text-shadow: 2px 2px 5px #999; }

.content ul { margin: 10px 0 10px 0px; padding: 0; }
.content ul li { margin: 0; padding: 0; padding-left: 20px; background: transparent url('../img/icons/bullet_black.png') no-repeat 0px center; }

.content ol { list-style-type: decimal; margin: 10px 0 10px 30px; padding: 0; }
.content ol li { margin: 0; margin-bottom: 5px; padding: 0; }

.content li { line-height: 140%; letter-spacing: .05ex; text-align: justify; }

.content ul.tags { margin: 0; margin-top: 3px; }
.content ul.tags li { margin: 0 10px 0 0; padding: 0; background: none; display: inline; line-height: 100%; }

.content dl { margin: 10px 0; }
.content dt { float: left; width: 29%; text-align: right; clear: left; }
.content dd { margin-left: 30%; margin-bottom: 10px; }

.content dl.blog-listing { margin: 15px 0; }
.content .blog-listing dd { margin-bottom: 15px; }

.yui-main ul.actions { text-align: right; right: 0px; margin: 0 0 10px; list-style: none; }
.yui-main ul.actions li { display: inline; margin: 0; padding-left: 10px; background: none; }

.content blockquote { margin: 10px 10px; padding: 10px 15px; background-color: rgb(224, 250, 187); border: 1px solid rgb(179, 220, 2); font-style: italic; }
.content blockquote.help {margin: 5px 0; padding: 0; background-color: transparent; border: none; color: #777; font-style: normal; font-size: 85%;}
.content blockquote p { margin-top: 10px; }
.content blockquote p:first-child { margin-top: 0; }
.content blockquote p + p { text-indent: 0; }

form table { width: 100%; line-height: 100%; }
form table th, .content form table td { padding-top: 10px; vertical-align: top; }
form table tr:first-child th, .content form table tr:first-child td { padding-top: 0px; }
form table th { width: 30%; text-align: right; padding-right: 5px; line-height: 180%; }
form table th label { font-size: 116%; }
form table th label:after { content: ':'; }
form table tr.required th label { font-weight: bold; }
form table td { padding-right: 25px; }
form input, form .mock-input { border: 1px solid #999; padding: 1% 1%; width: 98% !important; font-size: 116%; background-color: white; }
form select { padding: 1% 1%; font-size: 116%; }
/* form input.icon, form .mock-input.icon { padding-left: 22px; background-color: white; background-repeat: no-repeat; background-position: 3px center; } */
form textarea { width: 98.5%; font-size: 116%; padding: 1% 0.75%; }

.content form.serial .field { margin-top: 10px; }
.content form.serial .field label { font-size: 108%; margin-bottom: 5px; display: block; }
.content form.serial .field:first-child { margin-top: 0; }

.yui-b form dl { margin: 0; padding: 0; }
.yui-b form dl dt { margin: 0 0 5px; padding: 0; float: none; display: block; width: auto; text-align: left; }
.yui-b form dl dd { margin: 0; padding: 0; float: none; }
.yui-b form dl dd.help { color: #666; font-size: 93%; margin: 0.5ex 0; }
.yui-b form dl dt:first-child h3 { margin-top: 0; }


.content .footer { font-size: 93%; padding: 10px 15px; clear: both; line-height: 140%; margin: 15px -15px -15px; border-top: 2px solid #6C6C6C; }
.content .footer.big { font-size: inherit; margin: 0; border-top: 0; }
.content .footer p { font-size: 144%; text-align: center; color: #333; letter-spacing: .5em; margin: 0; }
.content .footer ul { float: right; margin: 0; list-style: none; }
.content .footer ul li { display: inline; margin: 0; background: none; padding-left: 10px; border-left: 1px solid rgb(179, 220, 2); }
.content .footer ul li:first-child { border-left-width: 0px; }
.content .footer ul.left { float: none; }
.content .footer ul.left li { display: inline; margin: 0; background: none; padding-left: 0; padding-right: 10px; }

/* @end */


/* @begin Portlet Layout */

.portlets { background-color: rgb(31, 31, 31); padding: 10px; margin-top: 10px; }

.portlet { position: relative; margin-top: 10px; background: rgb(191, 191, 191) url('/static/img/bg-hash-gradient.png') bottom left repeat-x; padding: 10px 15px; font-size: 93%; clear: both; }
.portlet:first-child { margin-top: 0; }

.portlet h2 { margin: -10px -15px 10px; background-color: white; border-bottom: 1px solid black; padding: 10px 15px; }
.portlet p { margin-bottom: 5px; line-height: 140%; text-align: justify; }
.portlet ul { letter-spacing: .1em; font-family: 'Trebuchet MS'; margin-bottom: 0; }
.portlet ul li { padding-left: 18px; background: transparent url('/static/img/icons/bullet_black.png') no-repeat 0px 60%; line-height: 1.4em; }

.portlet ul.tags { margin: 0; margin-top: 3px; }
.portlet ul.tags li { margin: 0 10px 0 0; padding: 0; background: none; float: left; width: 48%; margin-right: 1%; }
.portlet ul.tags li a {  }
.portlet ul.tags li .tag-del { display: none; float: left; }
.portlet ul.tags li:hover .tag-del { color: white; display: block; margin-top: -1px; }
.portlet ul.tags.admin li:hover a.tag { padding-left: 4px; background-image: none; }
.portlet ul.tags li.add { margin-top: 15px; }

.portlet li a { padding: 0; background: transparent; }

.portlet .footer { text-align: right; font-size: 85%; padding: 10px 15px; margin: 10px -15px -10px; border-top: 1px solid black; }

/* @end */


/* @begin [safari] Safari Rounded Corners */

.content, .portlets, .ah-wrapper { -moz-border-radius: 20px; -webkit-border-radius: 20px; }
.content h2:first-child, .lead { -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; }
.content .section h2 { -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; }
.content .section:first-child h2 { -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; }
.content .lead + div h2:first-child { -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.portlet { -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.portlet h2 { -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; }
.buttons button, .buttons .button, .thumbnails li { -moz-border-radius: 8px; -webkit-border-radius: 8px; }
#navigation, #menu { -moz-border-radius: 15px; -webkit-border-radius: 15px; }
#menu ul { -moz-border-radius: 14px; -webkit-border-radius: 14px; }

/* @end */


/* @begin Buttons */

.buttons.right { float: right; padding-right: 0px; }
ul.buttons li { margin: 0; padding: 0 !important; }

.buttons a, .buttons button{
    display: block;
    float: left;
    margin: 0 0 0 10px;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;

    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: inherit;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
    padding: 5px 10px 6px 7px; /* Links */
}

.buttons a:first-child, .buttons button:first-child {
    margin-left: 0px !important;
}

.buttons.right a, .buttons.right button { margin-left: 10px !important; }

.buttons button{
    width: auto;
    overflow: visible;
    padding: 4px 10px 3px 7px; /* IE6 */
}

.buttons button[type]{
    padding: 5px 10px 5px 7px; /* Firefox */
    line-height: 16px; /* Safari */
}

*:first-child+html button[type]{
    padding: 4px 10px 3px 7px; /* IE7 */
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
    text-decoration: none;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background-color:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}


.buttons button.icon, .buttons .button.icon { padding-left: 30px; background-position: 9px center; }

/* @end */


.lead { margin: -15px -15px 15px; padding: 15px 15px 15px; background-color: white; line-height: 140%; border-bottom: 1px solid #999; }

.ah-wrapper { margin: 0; padding: 0; background-color: rgb(63,63,63); line-height: 100%; }
.ah-wrapper-head, .ah-wrapper-foot { display: none; position: relative; margin: 0; padding: 0; }
.ah-wrapper-head h3 { margin: 0 !important; padding: 15px; color: white; clear: none; }

.ah-wrapper-head ul { position: absolute; top: 15px; right: 20px; margin: 0; padding: 0; line-height: 153.9%; }
.ah-wrapper-foot ul { float: right; margin: 0; padding: 15px 20px 15px; }
.ah-wrapper-head li, .ah-wrapper-foot li { float: left; margin-left: 15px; }
.ah-wrapper-head li a, .ah-wrapper-foot li a { color: white; }
.ah-wrapper-head li:first-child, .ah-wrapper-foot li:first-child { margin-left: 10px; }
.ah-wrapper-head br, .ah-wrapper-foot br { clear: both; }


.content .wym_box ul li { background: transparent; padding: 0px; }


/* @begin Layout Modification for Printing */

@media print {
    
    #flash { display: none !important; }
    #hd h1 a { background: transparent; width: auto; height: auto; text-indent: 0; }
    #hd { border-bottom: 2px solid black; }
    #menu { display: none; }
    
}

/* @end */