body {
    margin: 0; padding: 16px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    color: #FFF;
    min-width: 380px;
    background: #333 url(../imgs/layout/bg.jpg) center top;
}

img { max-width: 100%; border: none; }

h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

h1 { font-size: 24px; }
h2 { font-size: 18px; color: #5BA39E; }
h3, h4, h5, h6 { font-size: 16px; color: #5BA39E; }

p {
    margin: 0 0 16px 0;
    line-height: 1.5;
}

p:last-child { margin: 0; }

li { margin-bottom: 4px; }
li:last-child { margin-bottom: 0; }

table {
    margin-left: auto;
    margin-right: auto;
    border: none;
    border-collapse: collapse;
}

table td,
table th {
    margin: 0; padding: 0;
    text-align: left;
    vertical-align: middle;
    empty-cells: show;
}

table th { font-weight: normal; }

code {
    display: inline-block;
    padding: 0 3px;
    font-family: Consolas, monospace;
    font-size: 14px;
    background: #F1F1F1;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* Layout */

#header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    position: relative;
    height: 75px;
    overflow: hidden;
    border-bottom: solid 1px #666;
}

#label {
    position: absolute;
    left: 0; top: 0;
    z-index: 1024;
    height: 75px;
    padding-right: 16px;
    background: #333;
}

#logo {
    position: absolute;
    left: 0; top: 0;
    display: block;
    width: 75px; height: 75px;
    opacity: 1.0;
    background: url("../imgs-client/layout/logo.png") no-repeat center center;
}

a#logo:active { top: 1px; }

#label-client {
    margin-top: 3px;
    text-indent: 91px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    cursor: default;
    color: #CCC;
}

#label-service {
    text-indent: 91px;
    font-family: Arial, sans-serif;
    font-size: 22px;
    cursor: default;
}

#branding {
    margin-top: 3px;
    text-indent: 113px;
    font-style: italic;
    cursor: default;
    color: #999;
}

#branding a:link, #branding a:visited { color: #BBB; text-decoration: none; border-bottom: solid 1px #666; }

#topbar {
    position: absolute;
    right: 0; top: 0;
    z-index: 768;
    height: 75px;
    overflow: hidden;
}

#topbar > div { margin: 16px 0 0 32px; float: right; }

#topbar-separator { width: 1px; height: 42px; background: #666; }
#topbar-phone { padding-left: 48px; background: url(../imgs/icons/topbar-phone.png) no-repeat left center; }
#topbar-infos { padding-left: 48px; background: url(../imgs/icons/topbar-eye.png) no-repeat left center; }
#topbar-website { padding-left: 42px; background: url(../imgs/icons/topbar-home.png) no-repeat left center; }
#topbar-contact { padding-left: 50px; background: url(../imgs/icons/topbar-face.png) no-repeat left center; }

#topbar-i18n a:link,
#topbar-i18n a:visited { opacity: 0.5; }
#topbar-i18n a:hover{ opacity: 0.9; }
#topbar-i18n img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#content {
    position: relative;
    padding: 64px 0;
}

#footer {
    margin: 16px 0;
    padding-top: 16px;
    color:  #808080;
    cursor: default;
    border-top: solid 1px #666;
}

#footer-links a:link, #footer a:visited {
    color: #CCC;
    text-decoration: none;
}

#footer-links a:hover {
    border-bottom: solid 1px #999;
}

#footer-toolbar {
    margin-top: 16px;
}

/* Layout - Calendar */

#calendar-arrival-icon-col { padding: 0 16px 0 0; }
#calendar-departure-icon-col { padding: 0 16px 0 48px; }
#calendar-capacity-col { padding: 0 0 0 48px; }
.calendar-capacity-symbol-col { padding: 0 8px 0 4px; }

.calendar-capacity-symbol-col label,
.calendar-capacity-text-col label {
    cursor: pointer;
}

#calendar-arrival,
#calendar-departure { width: 228px; height: 258px; }

#calendar-arrival .ui-datepicker,
#calendar-departure .ui-datepicker { min-height: 240px; }

.cc-range-member a {
    color: #FFF !important;
    border-color: #5BA39E !important;
    background: #5BA39E !important;
}

#calendar-toolbar {
    position: absolute;
    left: 0; top: -32px;
    width: 100%;
    text-align: center;
}

#calendar-toolbar-panel {
    display: inline-block;
    padding: 6px 32px;
    border: solid 1px #666;
    background: #333;
}

/* Layout - Classes */

.panel,
.centered-panel {
    margin-bottom: 16px;
    padding: 16px;
    color: #333;
    background-color: #FFF;

    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
}

.panel .panel,
.centered-panel .panel {
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
}

.centered-panel {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
}

.large-sized { max-width: 1024px; }
.giant-sized { max-width: 1280px; }

.phantom-panel {
    margin-bottom: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;

    -webkit-box-shadow: none;
    box-shadow: none;
}

.phantom-panel { max-width: 800px; }
.phantom-panel.large-sized { max-width: 1056px; }
.phantom-panel.giant-sized { max-width: 1312px; }

.tabs-panel { max-width: 768px !important; }
.tabs-panel.large-sized { max-width: 1024px !important; }
.tabs-panel.giant-sized { max-width: 1280px !important; }

/* Generic */

.gray, .gray a:link, a.gray:link, .gray a:visited, a.gray:visited { opacity: 1.0; color: #666; }
.gray a:hover, a.gray:hover { color: #333; }

.light-gray { color: #999; }

.white, .white a:link, a.white:link, .white a:visited, a.white:visited { color: #FFF; }
.white a:link, a.white:link, .white a:visited, a.white:visited { opacity: 0.85; }
.white a:hover, a.white:hover, .white a:hover, a.white:hover { opacity: 1.00; }

.my-highlight { color: #5F8024; }

.red { padding: 3px; color: #933; background-color: #FFF6F6; }
.yellow { padding: 3px; color: #990; background-color: #FFFFF6; }
.blue { padding: 3px; color: #339; background-color: #F6F6FF; }
.green { padding: 3px; color: #393; background-color: #F6FFF6; }

.unlined { text-decoration: none; }

.left-text { text-align: left; }
.centered-text { text-align: center; }
.right-text { text-align: right; }

.full-width { width: 100%; }

.tiny-text { font-size: 10px; }
.small-text { font-size: 11px; }
.medium-text { font-size: 12px; }
.large-text { font-size: 17px; font-family: Arial, sans-serif; }

.separator-small { margin: 8px 0; height: 1px; clear: both }
.separator { margin: 16px 0; height: 1px; clear: both; }
.separator-large { margin: 32px 0; height: 1px; clear: both; }

.separator-line { background: #CCC; }
.separator-line-gray { background: #666; }

.padded { padding: 32px; }

.message { margin-bottom: 16px; }
.message:last-child { margin-bottom: 0; }

.symbolic-plus { padding-left: 20px; background-image: url(../imgs/icons/plus.png); }
.symbolic-plus-link { padding-left: 20px; background-image: url(../imgs/icons/plus-link.png); }
.symbolic-minus { padding-left: 20px; background-image: url(../imgs/icons/minus.png); }
.symbolic-edit { padding-left: 20px; background-image: url(../imgs/icons/edit.png); }
.symbolic-email { padding-left: 24px; background-image: url(../imgs/icons/email.png); }
.symbolic-pw { padding-left: 16px; background-image: url(../imgs/icons/pw.png); }
.symbolic-phone { padding-left: 20px; background-image: url(../imgs/icons/phone.png); }
.symbolic-off { padding-left: 20px; background-image: url(../imgs/icons/off.png); }
.symbolic-cross { padding-left: 22px; background-image: url(../imgs/icons/cross.png); }
.symbolic-user { padding-left: 19px; background-image: url(../imgs/icons/user.png); }
.symbolic-booking { padding-left: 21px; background-image: url(../imgs/icons/booking.png); }
.symbolic-date { padding-left: 20px; background-image: url(../imgs/icons/calendar.png); }
.symbolic-warning { padding-left: 22px; background-image: url(../imgs/icons/warning.png); }
.symbolic-attachment { padding-left: 22px; background-image: url(../imgs/icons/attachment.png); }
.symbolic-config { padding-left: 21px; background-image: url(../imgs/icons/config.png); }
.symbolic-stats { padding-left: 18px; background-image: url(../imgs/icons/stats.png); }
.symbolic-tag { padding-left: 22px; background-image: url(../imgs/icons/tag.png); }
.symbolic-reload { padding-left: 22px; background-image: url(../imgs/icons/reload.png); }
.symbolic-search { padding-left: 22px; background-image: url(../imgs/icons/search.png); }
.symbolic-door { padding-left: 22px; background-image: url(../imgs/icons/door.png); }
.symbolic-info { padding-left: 22px; background-image: url(../imgs/icons/info.png); }
.symbolic-tickets { padding-left: 22px; background-image: url(../imgs/icons/tickets.png); }

.symbolic { display: inline-block; min-height: 16px; background-repeat: no-repeat; background-position: left center; }
p.symbolic { display: block; }

.symbolic-tag { background-position: left top; }

/* Special symbolics */

.symbolic-arrow-left { padding-left: 24px; background-image: url(../imgs/icons/arrow-left.png); background-repeat: no-repeat; background-position: left center; }
.symbolic-arrow-right { padding-right: 24px; background-image: url(../imgs/icons/arrow-right.png); background-repeat: no-repeat; background-position: right center; }

.symbolic-datepicker { text-indent: 20px; background-image: url(../imgs/icons/calendar.png); background-repeat: no-repeat; background-position: 6px center; }

.message { margin-bottom: 16px; }
.message:last-child { margin-bottom: 0; }

.message { line-height: 1.5; }

.default-message,
.success-message {
    padding: 8px 8px 8px 48px; color: #FFF; background: #393 url(../imgs/icons/msg-success.png) no-repeat 12px center;
    -webkit-box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(51, 153, 51, 0.75);
    -moz-box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(51, 153, 51, 0.75);
    box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(51, 153, 51, 0.75);
}

.info-message {
    padding: 8px 8px 8px 48px; color: #FFF; background: #5BA39E url(../imgs/icons/msg-info.png) no-repeat 16px center;
    -webkit-box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(84, 123, 151, 0.75);
    -moz-box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(84, 123, 151, 0.75);
    box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(84, 123, 151, 0.75);
}

.error-message {
    padding: 8px 8px 8px 48px; color: #FFF; background: #933 url(../imgs/icons/msg-error.png) no-repeat 12px center;
    -webkit-box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(153, 51, 51, 0.75);
    -moz-box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(153, 51, 51, 0.75);
    box-shadow: inset 0 0 16px 0 rgba(255, 255, 255, 0.40), 0 0 8px 0 rgba(153, 51, 51, 0.75);
}

.sandbox {
    padding: 8px;
    border: solid 1px #CCC;
    background-color: #F1F1F1;
}

.sandbox-list { margin-bottom: 16px; }
.sandbox-list:last-child { margin-bottom: 0; }

.sandbox .sandbox { background-color: #FFF; }

.info-box { display: none; margin-top: 8px; }

.bundle { margin-bottom: 16px; }
.bundle:last-child { margin-bottom: 0; }

.badge,
.badge-white {
    display: inline-block;
    padding: 12px 18px;
    vertical-align: middle;
    color: #FFF;
    font-size: 28px;
    line-height: 1.0;
    cursor: default;
    background-color: #377271;

    -webkit-border-radius: 128px;
    -moz-border-radius: 128px;
    border-radius: 128px;
}

.badge-white {
    color: #333;
    background-color: #FFF;
}

.badge-label,
.badge-label-white {
    margin: 0 8px;
    color: #377271;
    font-size: 16px;
    vertical-align: middle;
    cursor: default;
}

.badge-label-white {
    color: #FFF;
}

.default-table td { padding-right: 16px; padding-bottom: 16px; vertical-align: top; }
.default-table td:last-child { padding-right: 0; }
.default-table tr:last-child > td { padding-bottom: 0; }

.compact-table { margin: 0; }
.compact-table td { padding-right: 8px; padding-bottom: 6px; vertical-align: top; }
.compact-table td:last-child { padding-right: 0; }
.compact-table tr:last-child > td { padding-bottom: 0; }

.compact-medium-table td { padding-right: 16px; }

.bordered-table tr td { padding: 8px; border: solid 1px #CCC; }
.bordered-table tr th { padding: 0 8px 8px 8px; }

.bordered-col {
    padding-left: 16px;
    border-left: solid 1px #CCC;
}

.half-table { width: 49%; }
.half-table:last-child { width: 50%; border-left: solid 1px #CCC; }

.middle-table td { vertical-align: middle; }

.no-wrap { white-space: nowrap; }

.links-back,
.links-forth { display: inline-block; margin: 0 48px; line-height: 1.3; vertical-align: top; }
.links-forth ul { margin: 4px 0 0 4px; padding-left: 16px; color: #FFF; }

.loading {
    width: 100%; height: 100%;
    opacity: 0.1;
    background: url("../imgs/icons/jquery-ui/animated-overlay.gif");

    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
}

.symbolic-link-list { white-space: nowrap; }
.symbolic-link-list .symbolic-link { margin-right: 12px; }
.symbolic-link-list .symbolic-link:last-child { margin-right: 0; }

/* Rounded */

.panel, .centered-panel, .sandbox, code,
.error-message, .info-message, .default-message, .success-message,
.default-button, input[type="text"], input[type="password"], textarea, select,
.rounded {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* Links */

a:link, a:visited { opacity: 0.75; color: #334F6A; }
a:hover { opacity: 1.0; }
a:active { position: relative; top: 1px; }

a.symbolic-link:link,
a.symbolic-link:visited {
    color: #333;
    text-decoration: none;
}

.tabs-panel a:link,
.tabs-panel a:visited {
    display: inline-block;
    margin: 0 0 1px 0;
    padding: 8px 12px;
    color: #333;
    background: #FFF;

    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.tabs-panel .outer-tab { margin-right: 4px; }
.tabs-panel .outer-tab:last-child { margin-right: 0; }

.tab-active { opacity: 1.0 !important; }
.tab-align-right { float: right; }

a.overlay:link,
a.overlay:visited {
    display: block;
    padding: 1px 3px;
    position: absolute;
    right: 18px; bottom: 20px;
    color: #333;
    opacity: 0.85;
    background: #FFF;
}

a.overlay:hover { opacity: 1.0; }
a.overlay:active { top: auto; }

/* Buttons */

.default-button,
a.default-button:link,
a.default-button:visited {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #666;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 1.0;
    border: solid 1px #CCC;
    border-bottom-color: #666;
    background: #F6F6F6;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(100%, #EEE));
    background: -webkit-linear-gradient(top, #FFF 0%, #EEE 100%);
    background: -moz-linear-gradient(top, #FFF 0%, #EEE 100%);
    background: -ms-linear-gradient(top, #FFF 0%, #EEE 100%);
    background: linear-gradient(to bottom, #FFF 0%, #EEE 100%);

    -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.20);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.20);
}

.default-button:hover,
a.default-button:hover {
    color: #333;
    border-color: #AAA;
    border-bottom-color: #333;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(100%, #E2E2E2));
    background: -webkit-linear-gradient(top, #FFF 0%, #E2E2E2 100%);
    background: -moz-linear-gradient(top, #FFF 0%, #E2E2E2 100%);
    background: -ms-linear-gradient(top, #FFF 0%, #E2E2E2 100%);
    background: linear-gradient(to bottom, #FFF 0%, #E2E2E2 100%);
}

.default-button:active,
a.default-button:active {
    top: 1px;
}

.mini-button,
a.mini-button:link,
a.mini-button:visited {
    padding: 4px 6px;
    font-size: 11px;
}

.back-button,
a.back-button:link,
a.back-button:visited {
    display: inline-block;
    padding-left: 42px;
    min-height: 32px;
    line-height: 1.5;
    background: url(../imgs/icons/misc-back.png) no-repeat left center;
}

/* Forms */

form { margin: 0; padding: 0; }

input[type="text"],
input[type="password"],
textarea,
select {
    padding: 6px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #666;
    border: solid 1px #999;
    background-color: #FFF;

    -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
textarea:hover,
textarea:focus,
select:hover, select:focus {
    color: #333;
    border-color: #666;
}

select { padding: 5px; }
option { padding-right: 16px; }

.inline-element { position: relative; display: inline-block; }
.inline-label { position: absolute; top: 7px; left: 8px; z-index: 1024; min-height: 16px; color: #666; cursor: text; }
.inline-label span { display: none; }
.inline-label-container { position: relative; z-index: 512; }

.default-form-notes { margin: 3px 0 0 8px; color: #666; line-height: 1.4; font-size: 11px; font-style: italic; }
.default-form-errors { margin: 8px 0 0 0; padding: 0 0 0 8px; color: #933; line-height: 1.4; font-size: 11px; font-style: italic; }

.default-form-label-top { padding-left: 8px; padding-bottom: 3px; }
.default-form-label-row { padding-top: 7px; text-align: right; }

.default-form-radio-group label { display: block; cursor: pointer; }

/* Responsive - We haz it :D */

@media screen and (max-width: 1536px)
{
    .responsive-pass-1 { display: none; }
}

@media screen and (max-width: 1280px)
{
    .responsive-pass-2 { display: none; }

    #calendar-toolbar { text-align: center; }
    #calendar-toolbar-datepicker { display: inline-block; margin-left: 8px; margin-right: 8px; float: none; }
    #calendar-toolbar-userpanel { display: inline-block; margin-left: 8px; margin-right: 8px; float: none; }
}

@media screen and (max-width: 1024px)
{
    .responsive-pass-3 { display: none; }

    .half-table { margin-bottom: 32px; width: 100% !important; border: none !important; }
    .half-table:last-child { margin-bottom: 32px; width: 100% !important; border: none !important; }

    .padded { padding: 8px; }

    #content { padding: 8px 0; }
}

@media screen and (max-width: 768px)
{
    .responsive-pass-4 { display: none; }
}

@media screen and (max-width: 512px)
{
    .responsive-pass-5 { display: none; }

    #label { position: static; }

    #label-client { font-size: 14px; text-align: center; text-indent: 64px; margin-top: 8px; }
    #label-service { font-size: 16px; text-align: center; text-indent: 64px; }

    #branding { text-indent: 64px; text-align: center; }
}

@media screen and (min-width: 64px)
{
    #label { background: transparent !important; }
}

/* Print */

@media print
{
    body { margin: 0; padding: 0; color: #333; background: #FFF; }

    .no-print,
    .responsive-pass-1,
    .responsive-pass-2 { display: none; }

    .panel, .centered-panel {
        position: static !important;
        border: solid 1px #CCC !important;

        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    .half-table { margin-bottom: 32px; width: 100% !important; border: none !important; }
    .half-table:last-child { margin-bottom: 32px; width: 100% !important; border: none !important; }

    #content { padding: 0; }

    #footer { margin: 0; border: none; }
}