/* ===== MAIN ===== */

body {
    background: #FBFBFB url("/img/background.png") repeat-y scroll center 0;
    color: #000;
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    margin: 0;
    padding: 0;
}

h1 {
    color: #474747;
    font-size: x-large;
    text-align: center;
    margin: 4px 0;
    padding: 0;
    height: 106px;
    text-transform: uppercase;
}

h2 {
    color: #474747;
    font-size: large;
    text-align: center;
    margin: 7px 0 5px 0;
    padding: 4px 2px 8px 2px;
    text-transform: uppercase;
}

h3 {
    color: #474747;
    font-size: medium;
}

h4 {
    color: #474747;
    font-size: small;
}

hr {
    height: 1px;
    background-color: #BBB;
    color: #BCBCBC;
    border: 0;
}

.header, .footer {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

.header {
    height: 108px;
}

.footer {
    color: #BBB;
    height: 12px;
    text-align: center;
    font-size: x-small;
    clear: both;
    width: 100%;
    padding: 10px 0;
}

.nav {
    float: left;
    width: 200px;
}

.nav ul {
    list-style-type: square;
    padding: 0;
    margin: 2px 2px 2px 20px;
}

li {
    margin-bottom: 2px;
}

p {
    margin-top: 0;
    text-align: justify;
}

img {
    border: none;
}


/* ===== LINKS ===== */

a                   { color: #444; }

a:link, a:visited   { text-decoration: none; }

a:hover, a:active   { text-decoration: underline; }


/* ===== FORMS ===== */

optgroup {
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

input, select, textarea {
    padding: 5px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="file"], select, textarea {
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #BBB;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.15) inset;
}

fieldset { border: 1px solid #BBB; }

legend   { font-weight: bold; }

textarea { resize: none; height: 319px; width: 100%; }

input.error, select.error, textarea.error { border-color: #F00; }

td.error, .substituted-user { color: #F00; font-weight: bold; }

table {
    font-size: 100%;
}

table.border {
    border-width: 2px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 30px;
    width: 100%;
}

table.border, table.border th, table.border td {
    border-color: #A0A0A0;
    border-style: solid;
}

table.border th {
    background-color: #D3D3D3;
    border-bottom-width: 2px;
}

table.border th, table.border td {
    border-width: 1px;
    margin: 0;
    padding: 5px;
}

table.list, table.sublist {
    width: 100%;
    padding: 0;
    margin: 7px 0 20px 0;
    border: none;
    border-collapse: collapse;
}

table.list th, table.sublist th {
    background-color: #D3D3D3;
}

table.list th, table.list td, table.sublist th, table.sublist td {
    padding: 3px;
    height: 36px;
}

table.zebra {
    border: 0;
    margin-bottom: 30px;
    width: 100%;
    border-collapse: collapse;
}

table.zebra th {
    background-color: #D3D3D3;
}

table.zebra th, table.zebra td {
    border: 0;
    margin: 0;
    padding: 5px;
}

table.zebra tr.even {
    background-color: #FFF;
}

table.zebra tr.odd {
    background-color: #F8F8F8;
}


/* ===== OTHER CLASSES ===== */

.wrapper {
    width: 988px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
}

.nav .menu {
    list-style-type: none;
    margin: 46px 0 46px 0;
    padding: 0;
}

.nav .menu li {
    padding: 0;
    margin: 0 10px 0 0;
    border-top: 1px solid #BBB;
}

.nav .menu li.separated {
    border-top: 8px solid #BBB;
}

.nav .administration, .nav .user {
    margin-top: 18px;
}

.nav .menu a {
    color: #474747;
    font-weight: bold;
    display: block;
    height: 29px;
    padding-top: 12px;
    padding-left: 10px;
}

.nav .menu a, .nav div {
    border: 0;
}

.nav .menu a:link, .nav .menu a:visited {
    text-decoration: none;
}

.nav .menu a:hover, .nav .menu a:active {
    text-decoration: underline;
    background-color: #EEE;
}

.nav div {
    margin: 0 0 46px 0;
    padding: 5px;
}

.nav h2 {
    margin: 0 10px 0 0;
}

.nav div a {
    display: block;
    font-family: "Open Sans Condensed", "Arial Narrow", "Helvetica Narrow", Tahoma, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 18px;
}

.nav div p {
    font-family: "Open Sans Condensed", "Arial Narrow", "Helvetica Narrow", Tahoma, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 25px 0 0 0;
}

.main {
    float: left;
    width: 772px;
    margin: 0px;
    padding: 0 8px 0 8px;
}

.solid-border {
    border: 1px solid #FFA562;
}

.narrow-text {
    font-family: "Open Sans Condensed", "Arial Narrow", "Helvetica Narrow", Tahoma, Arial, Helvetica, sans-serif;
}

div.success, div.error, div.notice {
    border-radius: 3px;
    margin: 8px 0 18px 0;
    padding: 12px;
    font-weight: bold;
}

div.success {
    border: 1px solid #090;
    color: #090;
}

div.error {
    border: 1px solid #F00;
    color: #F00;
}

div.notice {
    border: 1px solid #F80;
    color: #F80;
}

div.success p, div.error p, div.notice p {
    text-align: left;
    font-size: x-small;
    font-weight: normal;
    color: #474747;
    padding: 0;
    margin: 0;
}

.nowrap { white-space: nowrap; }
.right  { text-align: right; }
.left   { text-align: left; }
.center { text-align: center; }
.top    { vertical-align: top; }
.bottom { vertical-align: bottom; }

.selected    { background-color: #EEE; }
.deactivated { background-color: #FAA; }
.rare        { margin-bottom: 10px; }

.right-border { border-right: 1px solid #FFA562; }
.left-border  { border-left:  1px solid #FFA562; }

.logged-user {
    font-weight: bold;
}

.substituted-user {
    color: #F00;
    font-weight: bold;
}

.auto-sort-button {
    display: block;
    float: left;
}

.throbber-div, .message-div {
    height: 30px;
    overflow: hidden;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

.throbber-div span, .message-div span {
    display: block;
    float: left;
    height: 30px;
    padding-top: 7px;
    vertical-align: central;
    box-sizing: border-box;
}

.throbber-div span:first-child, .message-div span:first-child {
    width: 48px;
    text-align: center;
}

.clearfix {
    clear: both;
}

.highlight {
    background-color: #FFA !important;
}

.highlight-deleted {
    background-color: #FAA !important;
}

.right-border {
    border-right: 1px solid #D3D3D3 !important;
}

@media (max-width: 1005px) {
    .wrapper {
        width: 100%;
    }
    .main {
        width: calc(100% - 216px);
    }
}

@media (max-width: 455px) {
    .wrapper {
        width: 440px;
    }
    .main {
        width: 224px;
    }
}


/* ===== PHOTOGALLERY ===== */

.photo, .gallery {
    float: left;
    border: 1px solid #BBB;
    border-radius: 3px;
    box-shadow: 4px 4px 3px #CCC;
    text-align: center;
    margin: 0 0 14px 14px;
    padding: 4px;
    overflow: hidden;
}

.photo {
    height: 130px;
    width: 130px;
}

.gallery {
    height: 260px;
    width: 232px;
}

.photo a:first-child, .gallery a:first-child {
    display: block;
    border-radius: 1px;
    overflow: hidden;
    margin: 6px 0 0 6px;
    padding: 0;
}

.photo a:first-child {
    height: 118px;
    width: 118px;
}

.gallery a:first-child {
    height: 220px;
    width: 220px;
}

.photo img, .gallery img {
    margin: 0;
}

.photo p, .gallery p {
    margin: 0;
    padding: 2px 5px 2px 5px;
    font-weight: bold;
    text-align: center;
}

.admin {
    float: left;
    width: 370px;
    padding: 0 8px 8px 8px;
}

.box, .event-box, .guestbook-box {
    border: 1px solid #BBB;
    border-radius: 3px;
    box-shadow: 4px 4px 3px #CCC;
    margin: 0 0 17px 0;
    padding: 0;
}

.admin h3, .box h3, .event-box h3 {
    font-size: small;
    background-color: #EEE;
    margin: 0;
    padding: 9px;
    text-align: left;
}

.box h4 {
    margin: 0;
    padding: 4px 0 8px 0;
    text-align: left;
}

.event-box .header, .guestbook-box .header {
    background-color: #EEE;
    height: 36px;
}

.guestbook-box .header table {
    border: 0;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    float: left;
}

.guestbook-box .header table td {
    border: 0;
    margin: 0;
    padding: 0 0 0 10px;
}

a.envelope {
    display: block;
    height: 34px;
}

.event-box .header h3 {
    font-size: small;
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-panel {
    float: right;
    margin: 2px;
}

.none, .content {
    margin: 0;
    padding: 10px;
    text-align: justify;
}

.event-box .footer, .guestbook-box .footer {
    padding: 2px 0;
    margin: 0;
    color: #000;
    font-size: x-small;
    text-align: right;
}

.admin a {
    font-weight: bold;
}

.full {
    width: 100%;
}

.event-box .ui-button, #members .ui-button {
    width: 78px;
}

.new-button, .expand-button {
    width: 115px;
}

.top {
    vertical-align: top;
}

td.top {
    padding-top: 8px;
}

.subgallery {
    padding: 14px 14px 0 0;
}

.subgallery .photo {
    height: 143px;
    width: 126px;
}

.subgallery .photo a {
    height: 114px;
    width: 114px;
}

.subgallery .photo .checkbox {
    height: 23px;
    width: 114px;
    margin: 1px 0 0 6px;
    padding-top: 3px;
    cursor: pointer;
}

.subgallery .clearfix {
    padding: 14px;
}

.photolist {
    border: 1px solid #BBB;
    border-radius: 3px;
    box-shadow: 4px 4px 3px #CCC;
    margin: 0 0 14px 14px;
    padding: 10px;
    overflow: hidden;
}

.photolist a {
    display: block;
    height: 118px;
    width: 118px;
}

.photolist textarea {
    height: 55px;
}

.photolist textarea, .photolist input[type="text"] {
    width: 400px;
}

.photolist input[type="number"] {
    width: 65px;
}

.subgallery .photolist .checkbox {
    height: 23px;
    width: 118px;
    margin-top: 1px;
    padding-top: 3px;
    cursor: pointer;
}


/* ===== IDS ===== */

#registration-form table input, #registration-form table select,
#user-form table input[type="text"], #user-form table input[type="password"],
#user-form table select {
    width: 200px;
}

#login-form #login-form-login, #login-form #login-form-password {
    width: 160px;
}

#login-form label, #search-form label:first-child {
    display: none;
}

#edit-form #title {
    width: 680px;
    font-weight: bold;
}

#edit-form #order, #user-form #timeout {
    width: 50px;
}

#edit-form table {
    margin: 18px 0 4px 0;
}

#login-form input {
    margin: 5px 0;
}

#registration-form input, #registration-form select {
    margin: 3px 0;
}

#cms-select {
    margin-bottom: 10px;
}

#repertory, #members {
    margin-top: 10px;
}

#members th, #members td {
    height: 40px;
    box-sizing: border-box;
}

#members th {
    text-align: left;
}

#members img {
    width: 39px;
    height: 32px;
}
