/* ===================================
 * Author: Nazarkin Roman
 * -----------------------------------
 * Contact:
 * email - roman@nazarkin.su
 * icq - 642971062
 * skype - roman444ik
 * -----------------------------------
 * GitHub:
 * https://github.com/NazarkinRoman
 * ===================================
*/

@import "reset.css";
@import "upload.css";
@import "file_types.css";

html, body {
    width       : 100%;
    height      : 100%;
    background  : url(../img/bg.png);
    font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size   : 14px;
    min-width   : 800px;
    min-height  : 600px;
    overflow    : hidden;
}

.clear {
    clear : both;
}

.preloader {
    position    : absolute;
    width       : 128px;
    height      : 128px;
    margin-top  : -64px;
    margin-left : -64px;
    top         : 50%;
    left        : 50%;
    background  : url(../img/preloader.gif) no-repeat center;
}

.ribbon {
    position   : absolute;
    top        : 0;
    right      : 0;
    border     : 0;
    width      : 133px;
    height     : 133px;
    background : url(../img/ribbon.png) no-repeat;
}

.msgbox {
    display       : none;
    border-radius : 5px;
    background    : rgba(0, 0, 0, 0.5);
    color         : #fff;
    padding       : 10px;
    position      : absolute;
    width         : 280px;
    top           : 5px;
    right         : 5px;
    z-index       : 1;
}

.msgbox a {
    color: #fff;
}

.msgbox.info {
    background: rgba(141,182,0, 0.8);
}

.msgbox.error {
    background: rgba(204,0,0, 0.8);
}

/* CONTENT BLOCK */

.wrap {
    position           : relative;
    width              : 630px;
    height             : 480px;
    margin-top         : -220px; /* 50% of height */
    margin-left        : -315px; /* 50% of width */
    padding            : 5px 5px 0;
    top                : 50%;
    left               : 50%;
    overflow           : hidden;
    background         : #fff;
    -webkit-box-shadow : 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow    : 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow         : 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow : 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow    : 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow         : 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.wrap.recaptcha {
    height      : 130px;
    width       : 300px;
    margin-top  : -65px;
    margin-left : -150px;
    text-align  : center;
}

.wrap.recaptcha #recaptcha_response_field {
    padding : 10px;
    width   : 90%;
    margin  : 0 auto;
}

.wrap.recaptcha #recaptcha_image {
    margin-bottom : 10px;
    width         : 90%;
}

.wrap:before,
.wrap:after {
    content  : "";
    position : absolute;
    z-index  : -2;
}

.error h1 {
    position    : absolute;
    top         : 0;
    margin-top  : 0px;
    font-size   : 40px;
    text-align  : center;
    width       : 100%;
    font-family : Georgia, "Times New Roman", Times, serif;
    font-weight : normal;
    font-style  : italic;
}

.wrap h2 {
    font-size     : 17px;
    font-weight   : normal;
    font-style    : italic;
    border-bottom : 1px solid #ccc;
    margin-bottom : 5px;
    font-family   : Georgia, "Times New Roman", Times, serif;
}

.content {
    height   : 360px;
    overflow : auto;
    position : relative;
}

/* HEADER */

.header {
    height        : 75px;
    border-bottom : 1px solid #ccc;
    margin-bottom : 5px;
}

.header .logo {
    float        : left;
    width        : 223px;
    height       : 75px;
    text-indent  : -9999px;
    margin-right : 10px;
}

.header .logo a {
    display    : block;
    height     : 75px;
    width      : 223px;
    background : url(../img/logo.png) no-repeat;
    overflow   : hidden;
}

.header .menu {
    float : right;
}

.header .menu a {
    line-height : 75px;
    font-size   : 16px;
    padding     : 0 10px;
}

/* UPLOAD FORM */

.wrap .upload {
    cursor             : pointer;
    border             : 3px dashed #ccc;
    height             : 250px;
    background         : url(../img/up_bg.png) center no-repeat;
    -webkit-transition : all 300ms ease;
    -moz-transition    : all 300ms ease;
    -ms-transition     : all 300ms ease;
    -o-transition      : all 300ms ease;
    transition         : all 300ms ease;
}

.wrap .description {
    margin-top : 10px;
}

.wrap .description span {
    display     : block;
    float       : left;
    width       : 30%;
    padding     : 0 10px;
    line-height : 20px;
}

/* FOOTER */

.footer {
    height     : 30px;
    margin-top : 25px;
    padding    : 5px 0;
    border-top : 1px solid #ccc;
}

.footer .links {
    width : 300px;
    float : left;
}

.footer .links {
    line-height : 35px;
}

.footer .counters {
    float : right;
}

.footer .counters span {
    -webkit-transition : all 300ms ease;
    -moz-transition    : all 300ms ease;
    -ms-transition     : all 300ms ease;
    -o-transition      : all 300ms ease;
    transition         : all 300ms ease;
    opacity            : 0.3;
    filter             : alpha(opacity=30);
    -moz-opacity       : 0.3;
}

.footer .counters span:hover {
    opacity      : 1;
    filter       : alpha(opacity=100);
    -moz-opacity : 1;
}

/* VIEW FILE */
.rightblock {
    width      : 150px;
    float      : right;
    text-align : right;
}

.rightblock div {
    margin-bottom : 5px;
}

.rightblock div span {
    -webkit-transition : all 150ms ease;
    -moz-transition    : all 150ms ease;
    -ms-transition     : all 150ms ease;
    -o-transition      : all 150ms ease;
    transition         : all 150ms ease;
    color              : #909090;
    border-bottom      : 1px dotted #909090;
    cursor             : pointer;
    text-decoration    : none;
}

.rightblock div span a {
    text-decoration : none;
    color           : #909090;
}

.rightblock div span:hover,
.rightblock div span a:hover {
    color        : #000;
    border-color : #000;
}

.leftblock {
    max-width : 450px;
    min-width : 360px;
    float     : left;
}

.content .list {
    margin-bottom : 10px;
}

.content .list li {
    margin : 5px 0;
}

.content .list li span {
    color : #909090
}

.content .big_button {
    -moz-box-shadow       : inset 0px 1px 0px 0px #c1ed9c;
    -webkit-box-shadow    : inset 0px 1px 0px 0px #c1ed9c;
    box-shadow            : inset 0px 1px 0px 0px #c1ed9c;
    background-color      : #9dce2c;
    -moz-border-radius    : 3px;
    -webkit-border-radius : 3px;
    border-radius         : 3px;
    border                : 1px solid #83c41a;
    display               : inline-block;
    color                 : #fff;
    font-family           : Trebuchet MS;
    font-size             : 28px;
    margin-bottom         : 10px;
    font-weight           : normal;
    padding               : 10px 30px;
    text-decoration       : none;
    text-shadow           : 1px 1px 5px #689324;
}

.content .big_button:hover {
    background-color : #8cb82b;
}

.content .big_button:active {
    position : relative;
    top      : 1px;
}

.content .preview_button {
    -moz-box-shadow       : inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow    : inset 0px 1px 0px 0px #97c4fe;
    box-shadow            : inset 0px 1px 0px 0px #97c4fe;
    background-color      : #3d94f6;
    -moz-border-radius    : 3px;
    -webkit-border-radius : 3px;
    border-radius         : 3px;
    border                : 1px solid #337fed;
    display               : inline-block;
    color                 : #fff;
    font-family           : Trebuchet MS;
    font-size             : 28px;
    margin-bottom         : 10px;
    margin-left           : 5px;
    font-weight           : normal;
    padding               : 10px 15px;
    text-decoration       : none;
    text-shadow           : 1px 1px 5px #1570cd;
}

.content .preview_button:hover {
    background-color : #1e62d0;
}

.content .preview_button:active {
    position : relative;
    top      : 1px;
}

/* MY FILES */
.myfiles .file {
    float  : left;
    width  : 19%;
    margin : 2px;
    cursor : pointer;
}

.myfiles .file a {
    color           : #000;
    text-decoration : none;
}

.myfiles .file:hover .title {
    text-decoration : underline;
    color           : #287fc3;
}

.myfiles .file .title {
    position    : relative;
    height      : 16px;
    width       : 80%;
    margin      : 0 auto;
    overflow    : hidden;
    text-align  : center;
    color       : #000;
    white-space : nowrap;
}

.myfiles .file .title:after {
    content    : "";
    position   : absolute;
    right      : 0;
    top        : 0;
    bottom     : 0;
    width      : 30px;
    background : -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
    background : -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
    background : -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
    background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* PAGING */

.paging {
    text-align : center;
    position   : absolute;
    bottom     : 0;
    left       : 0;
    width      : 100%;
}

.paging .next {
    float : right;
}

.paging .prev {
    float : left;
}

.paging a {
    -moz-box-shadow       : inset 0px 1px 0px 0px #c1ed9c;
    -webkit-box-shadow    : inset 0px 1px 0px 0px #c1ed9c;
    box-shadow            : inset 0px 1px 0px 0px #c1ed9c;
    background-color      : #9dce2c;
    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    border-radius         : 2px;
    border                : 1px solid #83c41a;
    display               : inline-block;
    color                 : #fff;
    font-family           : Trebuchet MS;
    font-size             : 15px;
    font-weight           : normal;
    padding               : 3px 10px;
    text-decoration       : none;
    text-shadow           : 1px 1px 0px #689324;
}

.paging a:hover {
    background-color : #8cb82b;
}

.paging .inactive {
    -moz-box-shadow       : inset 0px 1px 0px 0px #fff;
    -webkit-box-shadow    : inset 0px 1px 0px 0px #fff;
    box-shadow            : inset 0px 1px 0px 0px #fff;
    background-color      : #ededed;
    -moz-border-radius    : 2px;
    -webkit-border-radius : 2px;
    border-radius         : 2px;
    border                : 1px solid #dcdcdc;
    display               : inline-block;
    color                 : #777;
    font-family           : Trebuchet MS;
    font-size             : 15px;
    font-weight           : normal;
    padding               : 3px 10px;
    text-decoration       : none;
    text-shadow           : 1px 1px 0px #fff;
}

/* POPUPS */
.popup-layout {
    position       : absolute;
    display        : none;
    top            : 0;
    bottom         : 0;
    left           : 0;
    right          : 0;
    width          : 100%;
    height         : 100%;
    background     : #000;
    filter         : alpha(opacity=80);
    -moz-opacity   : 0.8;
    -khtml-opacity : 0.8;
    opacity        : 0.8;
    z-index        : 10;
}

.popup {
    position           : absolute;
    display            : none;
    top                : 50%;
    left               : 50%;
    width              : 400px;
    height             : 215px;
    margin-top         : -107px;
    margin-left        : -200px;
    z-index            : 11;
    padding            : 10px;
    background         : #fff;
    -webkit-box-shadow : 0px 0px 10px 5px rgba(00, 00, 00, 0.5);
    box-shadow         : 0px 0px 10px 5px rgba(00, 00, 00, 0.5);
}

.preview_modal {
    position   : absolute;
    display    : none;
    z-index    : 11;
    overflow   : auto;
    padding    : 25px;
    top        : 0;
    bottom     : 0;
    right      : 0;
    left       : 0;
    background : #fff;
    text-align : center;
}

.preview_modal h2 {
    text-align : left;
    font-size  : 20px;
}

.popup input {
    display     : block;
    margin      : 3px 0 10px 0;
    padding     : 5px;
    font-family : Courier New;
    width       : 90%;
}

.popup .close,
.preview_modal .close {
    position  : absolute;
    top       : 5px;
    right     : 10px;
    content   : 'X';
    font-size : 20px;
    z-index   : 12;
    cursor    : pointer;
}

.popup h1,
.wrap .h1 {
    font-size     : 20px;
    font-weight   : normal;
    font-style    : italic;
    border-bottom : 1px solid #ccc;
    margin-bottom : 10px;
    font-family   : Georgia, "Times New Roman", Times, serif;
}

.upload_button {
    display : none;
}

/* page styles */
.staticpage {
    padding     : 5px;
    line-height : 20px;
}

.staticpage p {
    margin : 10px 0;
}

.staticpage img {
    margin : 5px;
}

.staticpage ul {
    list-style : inside;
}

.staticpage ul li {
    margin-left   : 5px;
    margin-bottom : 3px;
}

.staticpage h1,
.staticpage h2,
.staticpage h3,
.staticpage h4 {
    font-size     : 20px;
    font-weight   : normal;
    font-style    : italic;
    margin-bottom : 10px;
    border        : 0;
    font-family   : Georgia, "Times New Roman", Times, serif;
}