/*

inFilm: Theme CSS
Copyright (c) 2008 Top Floor Computer Systems Ltd. All Rights Reserved.

*/


/* @group Basic Elements */

html { height: 100%; }
body { background: rgb(38, 38, 38); color: #333; cursor: default; height: 100%; }

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

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

/* @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: 2000;
    background-color: #569;
    color: white;
    background-image: url('/static/img/btn.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; }

/* We have some fancy-pants image replacement trick to perform... */
#hd h1 { padding: 30px 20px 20px; }
#hd h1 a {
    display: block;
    width: 200px;
    height: 90px;
    text-indent: -10000em;
    background: transparent url('../img/logo3.png') top left no-repeat;
}
#hd h1 a:hover { text-decoration: none; }

#menu { position: relative; background-color: black; padding: 15px 0; border-bottom: 4px solid rgb(179, 220, 2); border-top: 1px dotted rgb(58, 58, 58); margin-bottom: 20px; }
#menu ul.left { display: block; list-style-type: none; }
#menu ul.right { float: right; list-style-type: none; }
#menu li { float: left; margin: 0; padding: 0 10px; border-left: 1px solid #555; }
#menu ul.left li { float: none; display: inline; }
#menu li:first-child { border: none; }
#menu li a { color: #ddd; }
#menu li a:hover { color: white; text-decoration: none; }

#ft { text-transform: uppercase; color: #666; letter-spacing: .2em; font-family: 'Trebuchet MS'; font-size: 77%; padding: 0 11px; line-height: 100%; padding-bottom: 5px; }
#ft .copyright { text-align: left; }
#ft span { float: right; margin-left: 20px; }
#ft p { margin-bottom: 5px; }
#ft a { color: #aaa; }
#ft a:hover { color: white; text-decoration: none; }
#ft a:visited { color: #888; }

/* @end */


/* @begin Content Layout */

#bd { padding-top: 10px; }
#bd .yui-main .yui-b { position: relative; margin-bottom: 30px; padding-right: 10px; }
#bd .yui-main .content { position: relative; padding: 10px 15px; background-color: rgb(240, 250, 226); }
#bd .yui-main .xray { display: none; }
#bd .yui-main .xray .content { background-color: #ddd; }

h2.big { color: white; margin: 0 0 10px 15px; padding: 0; font-size: 243%; border-width: 0; font-family: 'Trebuchet MS'; text-shadow: 2px 2px 5px black; }
.content h2 { margin: 10px -15px; padding: 10px 15px; line-height: 100%; background: transparent url('/static/img/white-fast.png') left bottom repeat-x; border-bottom: 1px solid rgb(179, 220, 2); border-top: 1px solid rgb(179, 220, 2); }
.content h2:first-child { margin: -10px -15px 10px; margin-bottom: 10px; border-top-width: 0px; }
.content p { line-height: 140%; letter-spacing: .05ex; text-align: justify; margin-bottom: 10px; }
.content h2 + p { margin-top: 10px; }

.content>ul { margin: 10px 0 10px 30px; 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 .yui-u li { text-align: left; }

.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; }

.content ul.actions { position: absolute; right: 0px; margin: 0 0 10px; list-style: none; }
.content 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 div { line-height: 100%; }
.content form, .dialog form { margin: 10px 0 0; }

.content form select, .dialog form select { border: 1px solid #999; padding: 2px 1px; font-size: 108%; }
.content form input, .dialog form input { border: 1px solid #999; padding: 2px 3px; width: 100% !important; font-size: 108%; }
.content form input.icon, .dialog form input.icon { padding-left: 22px; background-color: white; background-repeat: no-repeat; background-position: 3px center; }
.content form textarea, .dialog form textarea { width: 100%; border: 1px solid #999; padding: 2px 1px; color: #222; font-size: 108%; }

.content form .yui-gd, .dialog form .yui-gd { margin-bottom: 10px; }
.content form .disabled { opacity: 0.5; }

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

form .textfield:focus,
form .passwordfield:focus,
form .multicompletefield:focus,
form .textarea:focus,
form .wymeditor:focus,
form input.styledcalendardatetimepicker:focus { background-color: #ddd; border: 1px solid #999; color: #222; }

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

/* @end */


/* @begin Portlet Layout */

.portlets { background-color: black; padding: 10px; margin-top: 10px; margin-bottom: 10px; }
.portlets h3.big { color: white; margin: 0; padding: 0; padding-left: 10px; padding-top: 0px; }
.portlets.palette h3.big { margin-bottom: 10px; }

.portlet { position: relative; margin-top: 10px; background: rgb(179, 220, 2) url('/static/img/white.png') bottom left repeat-x; padding: 10px 10px; font-size: 93%; clear: both; }
.portlet:first-child { margin-top: 0; }
.portlet.blue { background-color: rgb(72, 144, 255); }
.portlet.orange { background-color: rgb(255, 144, 0); }
.portlet.grey { background-color: #343434; color: white; }

.portlet h2 { margin: -10px -10px 10px; background: transparent url('/static/img/white-fast.png') left bottom repeat-x; border-bottom: 1px solid black; padding: 5px 10px; text-transform: lowercase; }
.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.mini { margin-top: 10px; }
.portlets a:first-child .portlet.mini { margin-top: 0; }
.portlet.mini h3 { margin: 0; }
.portlet.mini div { position: absolute; top: 12px; right: 10px; }
.portlet.mini span { font-weight: bold; }

.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 .foot { text-align: right; font-size: 85%; padding: 10px 15px; margin: 10px -15px -10px; border-top: 1px solid black; }

/* @end */


/* @begin Specific Portlet CSS */

.portlet.news dl { }
.portlet.news dl dt { float: left; clear: left; width: 32px; height: 32px; background-color: red; margin-left: -5px; margin-right: 5px; font-family: 'Lucida Grande', 'Helvetica Nue', Helvetica; text-align: center; }
.portlet.news dl dd {  }

.portlets.map { border: 2px solid black; }

.palette { color: #bbb; line-height: 150%; }
.palette dl { margin: 0; }
.palette dt { width: 25%; float: left; text-align: right; clear: left; }
.palette dd { margin-left: 27%; padding: 0; }
.palette li + li { margin-top: 5px; }
.palette input { vertical-align: baseline; }
.palette a { color: #ddd; }
.palette a:hover { color: white; }


/* @end */


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

.content, .portlets { -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; }
.content h2 { -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; }
.portlet { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; }
.portlet h2 { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; }
.buttons button, .buttons .button, .thumbnails li { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }


/* @end */


/* @begin Buttons */

.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: 100%;
    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 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 */


/* @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 */