/* opts */
//@option compress: no;
$experimental-support-for-mozilla: 1;
$experimental-support-for-webkit: 1;

/* variables */

$shadow_weight: 3px;
$shadow_down: 3px;
$shadow_right: 1px;
$shadow_color: rgba(#444, 0.6);
$radius: 8px;
$hi_color: #be8;
$contour: #dde;
$main_color: #093E56;
$background: #A0A0A0;

/* mixins */

@import "compass/reset";
@import "compass/css3/box-shadow";
@import "compass/css3/text-shadow";
@import "compass/css3/border-radius";
@import "compass/utilities";
@import "compass/css3/opacity";
@import "compass/css3/images";

@mixin editable {
    margin: 0 0 0.7ex 0;
    @include border-radius($radius);
    color: #555;
    border: none;
    padding: 0 1ex 0 1ex;
    background: #ffd;

    &:hover {
        color: black;
        background: $hi_color;
    }
    &:focus {
        background: white;
    }
}

@mixin general_hover {
    &:hover {
        border-bottom: solid 3px #fa5;
        color: black;
    }
}

@mixin shadowed {
    color: black;
    @include border-radius($radius);
    @include single-box-shadow($shadow_color, $shadow_right, $shadow_down, $shadow_weight, 1px);
}

@mixin inner_shadowed {
    @include single-box-shadow($shadow_color, $shadow_right, $shadow_down, $shadow_weight, 0, false);
    @include border-radius($radius);
}

@mixin entryfont {
	outline:none;
    font-size: 16pt;
    color: $contour;
}

/* real CSS here */

li.entry {
    margin-bottom: 0.5ex;
    list-style-type: none;
    > span.actions {
      margin-left: 1em;
      vertical-align: 5px;
    }
    span.infos {
        margin-left: 1ex;
    }
    > input {
        @include border-radius($radius);
        @include entryfont;
        @include editable;
        margin: 0;
        width: 66%;
    }
    a {
        @include entryfont;
        @include general_hover;
    }
    > img {
        vertical-align: bottom;
        margin-right: 1ex;
    }

}
fieldset.toggler {
    > legend {
        cursor: pointer;
    }
}
span.toggler {
    cursor: pointer;
    margin-right: 1ex;
    @include border-radius($radius);
    padding: 0 0.5ex 0 0.5ex;

}
span.selected {
    border: solid white 1px;
}
label.autoform {
    display: block;
    margin-top: 1ex;
    padding: 0 1ex 0 0;
}
div.option {
    font-family: sans-serif;
    cursor: pointer;
    padding-left: 1em;
    &:hover {
        @include single-text-shadow($hi_color, 1px, 1px, 2px);
        color: black;
        text-decoration: underline;
    }
}
div.editable {
    > input, > textarea {
        @include editable;
        padding: .5ex;
        margin-top: 1ex;
    }
}
div.download {
    margin: 1em;
}
div.objects_forms {
    margin: 1ex auto 0 2ex;
}
div.codehilite {
    padding: 1ex;
    @include inner_shadowed;
    > pre {
        background: none;
    }
}
#login_form {
    margin-bottom: 2em;
}
.buttons {
    margin: 1ex auto;
    text-align: left;
}
.auto_edit_form {
    width: 80%;
    margin: 1em auto 0 auto;
}
.sortable {
    list-style-type: none;
}
.selected {
    @include border-radius($radius);
    @include background-image(linear-gradient(#91be15 0%, #84b710 100%));
    background: $hi_color;
}
.x_permissiona_grp {
    margin-top: 2ex;
    margin-bottom: 1ex;
    &:before {
        content:"Quick permissions:";
        font-weight: bold;
    }
}
.x_permissions_grp {
    @include editable;
    @include border-radius($radius);
    background: none;
    border: solid 2px #a00;
    padding: 1em;
    width: 25em;
    color: black;
    &:before {
      content:"Permissions:";
      color: #a00;
      font-weight: bold;
    }
    input[type=text] {
        border: solid 1px white;
    }
}
input.submit {
    display: inline-block;
    padding: 2px 10px 3px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    position: relative;
    cursor: pointer;
    border: solid 1px #444;
    border-bottom: 1px solid #222;

    @include border-radius(5px);
	@include background-image(linear-gradient(#223344, #444 50%, #223344 100%));
    @include text-shadow(#222 0 -1px 1px);
    @include box-shadow($shadow_color 2px 2px 2px);
    &:hover {
        top: 2px;
        @include box-shadow($shadow_color 0 0 0);
        @include text-shadow(none);
    	@include background-image(linear-gradient(#223344, #556 50%, #223344 100%));
        }
    }
}
textarea.markItUpEditor:hover {
    border: solid 3px $hi_color;
}
li.markItUpButton > a {
    @include opacity(.5);
    &:hover {
        border: none;
        @include opacity(1);
    }
}
.error_message {
    font-size: 300%;
    color: #a55;
}
.icon {
    width: 32px;
}
.minicon {
    width: 20px;
    margin-right: 1ex;
    margin-bottom: -8px;
}
.toc {
    border-left: solid 7px #567;
    width: 80%;
    margin: 1em 15% 1em 5%;
    a {
        color: #022;
        &:hover {
            color: #eff;
        }
    }
}
#user_actions {
    text-align: right;
}
#page_actions {
    margin-top: -32px;
}
table.codehilitetable {
    margin: 1em;
}
/*
STANDARD HTML SET
*/
body {
	padding:0;
	margin: 0 1ex 0 1ex;
	background-color: $background;
	font-family: Helvetica, sans-serif;
	color: $main_color;
}
legend {
    color: white;
    font-weight: bold;
    padding-bottom: 1ex;
}
h1 {
    font-style: italic;
    font-weight: normal;
    font-size: 300%;
    text-align: center;
    @include text-shadow(rgba(#000, 0.4) 5px 2px 5px);
}
h2 {
    font-size: 300%;
    margin: 1em 0 0.5em 0;
    color: $contour;
    @include text-shadow(rgba(#000, 0.6) 2px 2px 5px);
}
h3 {
    font-size: 250%;
    margin: 1em 0 0.5em 1ex;
}
h4 {
    font-size: 200%;
    margin: 1em 0 0.5em 1em;
}
h5 {
    font-size: 150%;
    margin: 1em 0 0.5em 1.5em;
    color: rgba($main_color, 0.8);
}
h6 {
    font-size: 150%;
    margin: 1em 0 0.5em 1.5em;
    color: rgba($main_color, 0.6);
}
ul {
    margin-left: 1em;
}
li {
    list-style-type: square;
    list-style-position: inside;
}
a {
   text-decoration: none;
   padding: 0;
   @include general_hover;
   /*
   @include border-radius($radius);
   */
   img {
      border: none;
   }
}
fieldset {
    margin: 1em 0 1em 0;
    padding: 0 1em 0 1em;
    border: {
        bottom: {
            style: dotted;
            color: #eee;
            width: 2px;
        }
        right: {
            style: none;
        }
        left: {
            style: none;
        }
        top: {
            style: solid;
            width: 2px;
            color: #eef
        }
    }
}
input[type="file"] {
    border: none !important;
    background: none !important;
}
input[type="text"], input[type="password"]  {
    @include border-radius($radius);
    @include editable;
}
label {
    > img {
        margin-bottom: -10px;
    }
}
dl {
    dt {
        font-weight: bold;
        margin: 1em 0.5ex 0 1em;
        font-size: 120;
        font-style: oblique;
    }
    dd {
        margin-left: 2em;
    }
    margin-bottom: 1em;
}
p {
    margin: 1ex;
}
pre {
    font-family: monospace;
    background-color: $contour;
    padding: 0.5ex;
    margin: 1ex;
}
em {
    font-style: italic;

    &:before {
        content: "«";
    }

    &:after {
        content: "»";
    }
}
strong {
    font-weight: bold;
}
#calendar {
    margin: 0;
}
/*
fileuploader
*/
.qq-uploader { position:relative; width: 100%;}
.qq-upload-button {
    display:block; /* or inline-block */
    width: 105px;
     padding: 7px 0;
     text-align:center;
    /*background:#880000;
    */
    border-bottom:2px solid #ddd;
    color:#755;
}
.qq-upload-button-hover {color:#000; border:2px solid #ffa; }
.qq-upload-button-focus {outline:1px dotted black;}

.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
    border: dashed 5px #ffa;
    text-align:center;
}
.qq-upload-drop-area span {
    display:block; position:absolute; top: 50%; width:100%;
    margin-top:-0.5em;
    font-size:250%;
}
.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
    margin-right: 7px;
}
.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("/static/loading.gif"); width:16px; height:16px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:11px;}
.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}
