/* Global stuff */

/* Helper for clearing blocks that contains floats */
.clear-block{zoom:1;}
.clear-block:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

/* Global colors for content, mostly used on flatpages */
.content { color:#CCC; }
.content a { color:#DEF9C0; }
.content h1, .content h2, .content h3, .content h4 { color:#66BD04; }

/* Buttons */
.fg-button { 
    cursor:pointer;
    margin:0; 
    outline:0; 
    padding:0.5em 1em;
    text-decoration:none !important; 
    position: relative; 
    text-align: center;
    display:inline-block;
    zoom: 1; 
}

.ui-theme-green .ui-state-default {
    border: 1px solid #79ca07; background: #79ca07 url(jquery-ui-custom/images/ui-bg_highlight-soft_50_79ca07_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; outline: none;
}
.ui-theme-green .ui-state-hover,
.ui-theme-green .ui-state-focus {
    border: 1px solid #79ca07; background: #79ca07 url(jquery-ui-custom/images/ui-bg_highlight-soft_100_79ca07_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; outline: none;
}
.ui-theme-green .ui-state-active {
    border: 1px solid #696969; background: #4c4c4c url(jquery-ui-custom/images/ui-bg_flat_0_4c4c4c_40x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; outline: none;
}


ul.ui-state-error {
    margin-left:0;
    padding:0.5em;
    _zoom:1; /* no idea why, but IE6 won't show the ober ortherwise */
}

ul.ui-state-error li {
    list-style:none;
}

/* Small warning sign on error alerts */
.ui-state-error li span.ui-icon-alert  {
    float: left;
    margin-right: 0.3em;
}


/* Body */

html {
    background:#131313;
}

#bd {
    background-color:#302f30;
    padding:10px 7px;
}

#bd #main, #bd #sidebar {
    border:1px solid #111;
    padding:9px;
    background:url(../img/mainbox_bg.gif) black repeat-x left top;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    
    overflow:hidden;_overflow:visible;_zoom:1; /* clear-block */
}

#bd .size640 #main { /* base_2col.html */
    margin-right:10px;
}

#bd .size720 #main { /* base_3col.html */
    margin:0 10px;
}

#bd #sidebar {
    width:300px;
    overflow:hidden;
}

#bd .skyscraper {
    width:120px;
    height:600px;
}


/* page-{home, search, result} */

.page-home #main .effects {
    padding:2px;
}

.page-home #main .effects .effect,
.page-search #main .effects .effect,
.page-result #main #suggestions .effects .effect {
    float:left;
    height:180px;
    text-align:center;
    width:101px;
}

.page-home #main .effects .effect a,
.page-search #main .effects .effect a,
.page-result #main #suggestions .effects .effect a {
    outline:none;
    text-decoration:none;
    color:#66BD04;
}

.page-home #main .effects .effect a img,
.page-search #main .effects .effect a img,
.page-result #main #suggestions .effects .effect a img {
    border:1px solid #999;
    display:block;
}

.page-home #main .effects .effect a:hover,
.page-home #main .effects .effect a:focus,
.page-search #main .effects .effect a:hover,
.page-search #main .effects .effect a:focus,
.page-result #main #suggestions .effects .effect a:hover,
.page-result #main #suggestions .effects .effect a:focus {
    color:#DEF9C0;
}

.page-home #main .effects .effect a:hover img,
.page-home #main .effects .effect a:focus img,
.page-search #main .effects .effect a:hover img,
.page-search #main .effects .effect a:focus img,
.page-result #main #suggestions .effects .effect a:hover img,
.page-result #main #suggestions .effects .effect a:focus img {
    border:1px solid #DEF9C0;
}



/* page-effect */

.page-effect #main #upload-tabs-throbber {
    margin:100px auto;
    text-align:center;
    color:white;
    font-weight:bold;
    font-size:108%;
} 

.page-effect #main #upload-tabs {
    margin:0 auto;
    padding:0;
    width:90%;
    display:none;
    font-size:108%;
}

.page-effect #main #upload-tabs .content {
    color:black;
}

.page-effect #main #upload-tabs .ui-tabs-nav {
    float:left;
    margin:0;
    padding:0;
    width:25%;
}

.page-effect #main #upload-tabs .ui-tabs-nav li {
    border-width:1px 0 1px 1px !important;
    margin:0 0 2px 0;
    padding:0;
    width:100%;
}

.page-effect #main #upload-tabs .ui-tabs-nav li.ui-state-active {
    border-color:white;
}

.page-effect #main #upload-tabs .ui-tabs-nav a {
    margin:0;
    padding:0.5em 0;
    width:100%;
}

.page-effect #main #upload-tabs .ui-tabs-nav a span {
    padding:0 1em;
}

.page-effect #main #upload-tabs .ui-tabs-panel {
    position:relative;
    background-color:white;
    float:left;
    margin:0;
    min-height:200px;
    padding:0;
    width:74%;
    _height:200px;
}

.page-effect #main #upload-tabs .ui-tabs-panel form {
    padding:1em;
}

.page-effect #main #upload-tabs .ui-tabs-panel form label {
    font-weight:bold;
}

.page-effect #main #upload-tabs .ui-tabs-panel form input {
    width:250px;
}

.page-effect #main #upload-tabs #panel-from_file form input {
    _padding:0.25em 0; /* button looks horrible in IE6 otherwise */
}

.page-effect #main #upload-tabs .ui-tabs-panel form button {
    vertical-align:middle;
    *overflow:visible; *width:1; /* fixes padding on IE6/7 buttons */
}

.page-effect #main #upload-tabs .ui-tabs-panel form .upload-throbber {
    margin-left:10px;
    display:none;
    vertical-align:middle;
}

.page-effect #main #preview  {
    margin-top:1em;
    text-align:center;
}

.page-effect #main #preview h2 {
    font-weight:bold;
    color:white;
    font-size:108%;
}

.page-effect #main #panel-from_photobucket ul li {
    display:inline;
    margin-left:5px;
}

.page-effect #main #panel-from_photobucket ul li a {
    color: #66BD04;
}

/* photobucket browser */

.photobucket-browser {
    padding:35px;
}

.photobucket-browser .image{
    float:left;
    height:180px;
    text-align:center;
    width:180px;
}

.photobucket-browser .image a {
    outline:none;
    text-decoration:none;
    color:#66BD04;
}

.photobucket-browser .image a img {
    border:1px solid #999;
    display:block;
    margin-left: auto;
    margin-right: auto
}

.photobucket-browser .image a:hover,
.photobucket-browser .image a:focus {
    color:#DEF9C0;
}

.photobucket-browser .image a:hover img,
.photobucket-browser .image a:focus img {
    border:1px solid #DEF9C0;
}

.photobucket-browser #photobucket-throbber {
    margin:100px auto;
    text-align:center;
    color:white;
    font-weight:bold;
    font-size:108%;
}

/* page-result */

.page-result #main #result {
    float:left;
    text-align:center;
}

.page-result #main #result h2 a {
    font-size:108%;
    text-decoration:none;
    color:#66BD04;
}

.page-result #main #result h2 a:hover,
.page-result #main #result h2 a:focus {
    color:#DEF9C0;
}

.page-result #main #share {
    width:300px;
    text-align:left;
    float:right;
}

.page-result #main #share #download {
    display:block;
    font-weight:bold;
    font-size:108%;
    padding-left:0;
    padding-right:0;
    text-transform:uppercase;
    margin:0;
    margin-bottom:1em;
}

.page-result #main #share h2 {
    margin-bottom:0.5em;
    font-weight:bold;
    color:white;
    font-size:108%;
}

.page-result #main #share object {
    margin:0 auto;
}

.page-result #main #suggestions {
    clear:both;
}

.page-result #main #suggestions h2 {
    padding-top:20px;
    font-weight:bold;
    color:white;
    font-size:108%;
}

.page-result #main #suggestions .see-all {
    float:right;
    font-size:108%;
    text-decoration:none;
    color:#66BD04;
}

.page-result #main #suggestions .see-all:hover,
.page-result #main #suggestions .see-all:focus {
    color:#DEF9C0;
}

.page-result #main #suggestions .effects .effect {
    width:90px;
    margin:8px 11px;
}

.page-result #main #comments h2 {
    color:white;
    font-size:108%;
    font-weight:bold;
    margin-bottom:0.5em;
    padding-top:20px;
}

.page-result #main #comments #id_honeypot {
    display:none;
}

.page-result #main #comments  {
    color:white;
    margin-bottom:0.5em;
}

.page-result #main #comments a {
    color:#66BD04;
}

.page-result #main #comments .comment {
    border-top:1px solid #6A6A6A;
    margin-top:6px;
    padding:7px 0 4px 15px;
}

.page-result #main #comments #new-comment label {
    width: 7em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
}

.page-result #main #comments #new-comment div {
    margin: 0.5em;
}

.page-result #main #comments .no-comment-yet {
    text-align:center;
    margin:3px;
}

.page-result #main #comments .comment-content {
    margin-left: 10px;
}

#rate {
    color:white;
    display:inline;
}

#ratingno {
    display:inline;
    margin-left: 2px;
}

#rating {
    display:inline;
}

/* page-contact */

.page-contact #contact-form label {
    display:block;
}

.page-contact #contact-form textarea {
    width:25em;
}

/* preview-comment */
.preview-comment h2 {
    color:white;
    font-size:108%;
    font-weight:bold;
    margin-bottom:0.5em;
    padding-top:20px;
}

.preview-comment label {
    width: 7em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
}


.preview-comment  {
    color:white;
    margin-bottom:0.5em;
}

.preview-comment #main div {
    margin: 0.5em;
}

.preview-comment .errorlist {
    color:red;
    font-weight:bold;
}

/* Header */

#hd #header {
    background:url(../img/header_bg.gif) repeat-x left top #272727;
    height:100px;
}

#hd #header #logo {
    color:black;
    text-decoration:none;
    outline:none;
}

#hd #header #logo span {
    display:inline-block;
    margin-left:30px;
    margin-top:20px;
    height:55px;
    width:397px;
}

#hd #navigation table {
    width:100%;
    background: url(../img/navigation_bg.gif) repeat-x left top;
}

#hd #navigation #links li {
    margin-left:1em;
    display:inline-block;
    
    zoom:1;
    *display:inline; /* inline-block for IE6/7 */
}

#hd #navigation #search input,
#hd #navigation #search button {
    margin:0 5px 0 0;
    vertical-align:middle;
}
#hd #navigation #search input {
    border:0;
    color:#595959;
    font-size:108%;
    font-weight:bold;
    height:16px;
    padding:4px;
}

#hd #navigation #search button {
    cursor:pointer; 
    height:24px;
    padding:2px 0 0 0;
    text-align:center;
    width:24px;
}


/* Footer */

#ft {
    background-color:#0B0B0B;
    padding:10px;
    border-bottom:20px solid #302f30;
    zoom:1;
}

#ft #footer ul {
    text-align:right;
}

#ft #footer ul li {
    display:inline;
    margin-left:10px;
}

#ft #footer ul li a {
    color:white;
}

#ft #footer ul li.copyright {
    color:white;
    float:left;
    margin-left:0;
}