body {
    /*background: #342727 url(responsive-guide.png) 0 0 no-repeat;*/
    background-color: #342727;
    font-family: fira_sans_otlight, arial, sans-serif;
    font-size: 15px;
    margin: 0;
    color: #3F3434;
}

.data-protection-ok {
    padding: .7em .7em .6em .6em !important;
    background: rgba(255, 193, 7, 0.51) !important;
    display: inline-block;
    color: white !important;
    text-decoration: none !important;
    margin: .5em 0 0;
    border-radius: .5em;
    line-height: 1em;
    border: 2px solid #deba69;
    cursor: pointer;
    font-size: 16px;
}

.data-protection-ok {
    padding: 1em;
    background: #FFC107;
}

#data-protection a {
    text-decoration: underline;
    color: #FFC107;
}

#data-protection {
    background: rgba(149, 142, 143, 0.8);
    position: fixed;
    bottom: -15em;
    right: 1em;
    padding: 1em;
    color: white;
    width: 70%;
    max-width: 300px;
    border-radius: 10px;
    font-size: 16px;
    -webkit-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}

#data-protection.show {
    bottom: 1em !important;
}

td p {
    margin: 0;
}

img {
    border: 0;
    float: left;
}

#guestbook, #links, #contact, #language {
    display: none;
}

p {
    line-height: 24px;
}

#content-vita {
    float: left;
    padding: 1em 0 0;
    width: 640px;
}

.guestbook p {
    margin: 0 0 2em !important;
}

.links p {
    margin-bottom: 0;
}

.guestbook .copy {
    margin: 4.3em 0 0 1.4em;
    max-width: 633px;
}

.guestbook .frm {
    margin: 3em 0 0 4.4em;
    max-width: 633px;
    width: 633px;
    float: left;
}

.item {
    float: left;
    max-width: 618px;
    padding: 1.6em 0 0 0;
    border-bottom: 1px solid lightgray;
}

.links .item {
    border-bottom: 1px solid #D3D3D3;
    float: left;
    padding: 2em 0 .5em;
}

.copy {
    float: left;
    margin: 1.3em 0 0 1.4em;
    max-width: 615px;
}

.cds .copy, .harp .copy, .dates .copy, .vita .copy, .repertoire .copy, .links .copy, .contact .copy {
    margin: 1.3em 0 0 5.2em;
    max-width: 615px;
    min-width: 250px;
}

.contact .copy {
    max-width: 621px;
    width: 621px;
}

.links .copy div:last-of-type {
    border: 0;
}

.links .copy {
    margin-bottom: 3em;
}

.vita .copy {
    max-width: 530px;
}

.harp #subnavi {
    padding-left: 4.4em;
}

.cds #subnavi, .harp #subnavi, .dates #subnavi, .vita #subnavi, .repertoire #subnavi {
    width: auto;
    max-width: 600px;
}

.vita #subnavi {
}

#subnavi {
    float: left;
    width: 55px;
}

#subnavi a, #subnavi-year a {
    background: none repeat scroll 0 0 #D3D3D3;
    color: #3F3434;
    float: left;
    margin: 2px;
    min-width: 15px;
    padding: 0.3em 0.7em 0.2em;
}

#subnavi a.active,
#subnavi-year a.active {
    background: none repeat scroll 0 0 #544040;
    color: #fff;
}

#navi_top {
    float: left;
    padding: 4.6em 1em 0 0;
}

#navi_bottom {
    color: #fff;
    float: left;
    padding: 1.5em 1em 0 5em;
}

#copyright span {
    position: relative;
    top: 2px;
}

label.title {
    display: block;
    margin: 0 0 1em;
}

#copyright {
    color: #fff;
    float: left;
    clear: both;
    padding: 1em 1em 1em 5em;
}

input[type=submit] {
    border-top: 10px solid #ffffff;
}

.error {
    clear: both;
}

table {
    border-collapse: collapse;
}

.repertoire table td, .repertoire table th {
    border: 2px solid #FFFFFF;
    padding: 4px 57px 2px 13px;
}

.repertoire table {
    background-color: #F4F4F4;
    margin: 1em 0 2em;
}

td {
    vertical-align: top;
    padding-right: 10px;
    color: #888;
    line-height: 24px;
}

.index #text {
    padding: 2em 0 0 5.1em;
    width: 622px;
}

#content-programs {
    padding-top: 1em;
}

.copy h2 {

    padding: 1.5em 0 .2em;
}

.
h2 {
    font-size: 21px;
    padding: 0 0 .2em;
    margin: 0;
}

h3 {
    float: left;
}

.date {
    float: left;
    padding: 0 25px 0 0;
}

#cover a {
    clear: both;
    display: block;
}

#cover {
    width: 180px;
    float: left;
}

/*hr {*/
/*clear: both;*/
/*height: 1px;*/
/*border: 0;*/
/*color: #ffffff;*/
/*margin: 0;*/
/*}*/

hr {
    clear: both;
    /* height: 1px; */
    /* border: 0; */
    /* color: #ffffff; */
    margin: 2em 1px;
    width: 100%;
}

.divider {
    height: 10px;
    width: 100px;
}

* html .divider {
    margin: 0 0 15px 0;
}

.hidden {
    display: none;
}

#add {
    padding-bottom: 33px;
    display: inline-block;
}

fieldset {
    width: 300px;
    border: 0;
}

#wrapper {
    width: 1027px;
}

#content {
    background-color: #FFFFFF;
}

#visuals {
    float: right;
    width: 278px;
}

#content-wrapper {
    background-color: #FFFFFF;
    float: left;
    width: 100%;
}

#logo img {
    width: 100%;
}

#logo {
    padding: 4em 2em 1em 4.5em;
    width: 150px;
    float: left;
    margin: 0 2em 0 0;
}

#logo h1 {
    color: #fff;
    font-weight: normal;
    margin: 0;
}

.picture {
    float: right;
    margin: 0 0 15px 15px;
}

.picture_02 {
    float: left;
    margin: 0 15px 100px 0;
}

.picture_03 {
    margin: 0 0 22px 0;
}

.picture_04 {
    float: left;
    margin: 0 30px 40px 0;
}

* html .picture_03 {
    margin: 0 0 24px 0;
}

#navi_top a.active, #navi_bottom a.active {
    background-color: #544040;
}

#navi_top a:hover, #navi_bottom a:hover {
    background-color: #544040;
}

#navi_top a, #navi_bottom a {
    color: #FFFFFF;
    padding: 0.3em 0.6em 0.2em;
    background-color: #463535;
    margin: 0 1px 0 0;
}

#year {
    left: 93px;
    width: 236px;
}

p {
}

.pause {
    line-height: 40px;
}

.programs em {
    display: block;
}

#programs {
    max-width: 620px;
    display: inline-block;
}

.composer_cds {
    color: #ada0a0;
    line-height: 16px;
}

th {
    font-weight: normal;
    padding-right: 3em;
    text-align: left;
    vertical-align: top;
}

#programs .composer {
    color: #666666;
    float: left;
    line-height: 20px;
    width: 200px;
}

.track {
    margin: 0 0 8px 10px;
    display: block;
}

.x {
    background-color: #fff;
}

.highlight {
    color: #BA7943;
    padding-top: 1em;
}

.pager {
    padding: 1px 2px 1px 2px;
    background-color: #827a7a;
    color: #342727;
}

.pager_active {
    padding: 1px 2px 1px 2px;
    background-color: #ffffff;
    color: #342727;
}

.title {
    display: inline-block;
    margin: 6px 0 0 6px;
}

em {
    font-style: normal;
    font-family: fira_sans_otmedium, arial, sans-serif;
}

a {
    text-decoration: none;
    color: #ff6000;
}

/*a:hover {*/
/*border-bottom: none;*/
/*}*/

ul, li {
    list-style: none;
}

.copy li {
    list-style: initial;
}

li a {
    text-decoration: none;
    color: #c0c0c0;
    font: 10px/15px verdana, sans-serif;
    margin-right: 10px;
}

li a:hover, select {
    border-bottom: 1px dotted #8f8f8f;
    color: #8f8f8f;
}

input, textarea, select {
    border: 1px solid #CBCACA;
    font-family: fira_sans_otlight, sans-serif;
    font-size: 15px;
    margin: 0 6px 16px 0;
    min-width: 285px;
    padding: 4px 3px 2px 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn {
    cursor: pointer;
    float: left;
    font-family: RobotoCon, sans-serif;
    font-size: 12px;
    font-weight: normal;
    min-width: 28px;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
    color: #3F3434;
}

.btn-green {
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font-family: RobotoCon, sans-serif;
    font-size: 18px;
    font-weight: normal;
    min-width: 28px;
    padding: 11px 14px 8px 13px;
    text-align: center;
    text-decoration: none;
}

.btn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #666 1px 1px 4px;
    -moz-box-shadow: #666 1px 1px 4px;
    box-shadow: .05em .05em 2px #666666;
    background: #FEF1D0;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FEF1D0), to(#E3D6AF));
    background: -webkit-linear-gradient(#FEF1D0, #E3D6AF);
    background: -moz-linear-gradient(#FEF1D0, #E3D6AF);
    background: -ms-linear-gradient(#FEF1D0, #E3D6AF);
    background: -o-linear-gradient(#FEF1D0, #E3D6AF);
}

.btn-green {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #666 1px 1px 4px;
    -moz-box-shadow: #666 1px 1px 4px;
    box-shadow: 0.01em 0.1em 3px #666666;
    background: #79bb23;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#79bb23), to(#6fa422));
    background: -webkit-linear-gradient(#79bb23, #6fa422);
    background: -moz-linear-gradient(#79bb23, #6fa422);
    background: -ms-linear-gradient(#79bb23, #6fa422);
    background: -o-linear-gradient(#79bb23, #6fa422);
    background: linear-gradient(#79bb23, #6fa422);
}

.btn:hover {
    background-color: #ccc;
}

.answer {
    color: #000000;
}

select {
    margin: 0 5px 0 0;
    background-color: #F6F6F6;
}

.intro {
    margin-top: 0;
}

/* Breaking Point smartphones landscape */
@media (min-width: 1481px) and (max-width: 3200px) {
    #wrapper {
        width: 1227px;
        margin: 0 0 0 100px;
    }

    body {
        /*background-color: #000000;*/
        font-size: 16px;
    }

    p {
        line-height: 26px;
    }

    .copy {
        max-width: 815px;
        margin-bottom: 4em;
    }

    .cds .copy, .harp .copy, .dates .copy, .vita .copy, .repertoire .copy, .links .copy, .contact .copy {
        margin: 2em 0 2em 4.4em;
        max-width: 715px;
        width: 100%;
    }
}

@media (min-width: 1181px) and (max-width: 1480px) {
    #wrapper {
        margin: 0 0 0 40px;
        width: 1127px;
    }

    body {
        /*background-color: blue;*/
    }

    .copy {
        max-width: 715px;
    }
}

@media (min-width: 1001px) and (max-width: 1180px) {
    #wrapper {
        margin: 0;
        width: 960px;
    }

    body {
        /*background-color: purple;*/
        font-size: 14px;
    }

    .harp #subnavi {
        padding-left: 3em;
    }

    .index #text {
        padding: 2em 0 0 3.1em;
        width: 585px;
    }

    .cds .copy, .harp .copy, .dates .copy, .vita .copy, .repertoire .copy, .links .copy, .contact .copy {
        margin: 1.3em 0 0 3.2em;
        max-width: 615px;
    }

    #navi_bottom {
        padding: 1.5em 1em 0 3em;
    }

    #copyright {
        padding: 1em 1em 1em 3em;
    }

    #logo {
        padding: 4em 2em 1em 2.9em;
    }

    .copy {
        max-width: 580px;
    }

    .item {
        max-width: 585px;
        padding-top: 1.6em;
    }

    .guestbook .frm {
        width: auto;
    }

    .guestbook .copy {
        margin: 3.3em 0 0 1.4em;
        max-width: 540px;
    }

    p {
        padding-left: 0;
    }
}

@media (min-width: 781px) and (max-width: 1000px) {
    #wrapper {
        margin: 0;
        width: 900px;
    }

    body {
        /*background-color: red;*/
        font-size: 14px;
    }

    .index #text {
        padding: 2em 0 0 3.1em;
        width: 515px;
    }

    #navi_bottom {
        padding: 1.5em 1em 0 3em;
    }

    .links .item {
        float: none;
    }

    #copyright {
        padding: 1em 1em 1em 3em;
    }

    #logo {
        padding: 4em 2em 1em 2.9em;
    }

    .harp #subnavi {
        padding-left: 2em;
    }

    .item {
        max-width: 553px;
    }

    .guestbook .frm {
        width: auto;
    }

    .programs .copy {
        max-width: 515px;
    }

    .guestbook .copy {
        margin: 3.3em 0 0 1.4em;
        max-width: 480px;
    }

    .cds .copy, .harp .copy, .dates .copy, .vita .copy, .repertoire .copy, .links .copy {
        max-width: 555px;
        margin: 1.2em 0 0 3em;
    }

    .contact .copy {
        margin: 0.3em 0 0 3.2em;
        max-width: 555px;
    }

    p {
        padding-left: 0;
    }
}

/* Breaking Point smartphones portrait */
@media (max-width: 780px) {
    body {
        font-size: 20px;
        /*background-color: green;*/
    }

    #wrapper {
        max-width: 780px;
        margin: 0;
        width: auto;
    }

    #logo {
        padding: .4em 0 .4em .6em;
        width: 170px;
        margin-right: 1.1em;
        float: left;
    }

    #navi_bottom {
        display: none;
    }

    #navi_top {
        padding: 12px;
    }

    #visuals img {
        width: 170px;
    }

    .cds #subnavi, .harp #subnavi, .dates #subnavi, .vita #subnavi, .repertoire #subnavi {
        max-width: 425px;
        width: auto;
    }

    #visuals {
        width: 170px;
        padding: 0 0 1em 1em;
    }

    .programs em {
        display: inline;
    }

    .index #text {
        padding: 0.5em 2em 1em 1em;
        width: auto;
    }

    .copy {
        float: left;
        margin: .3em 0 0 1em;
        max-width: 355px;
    }

    #subnavi-year {
        margin-bottom: 24px;
    }

    .links .item {
        clear: both;
        padding: 0 !important;
        width: 100%;
    }

    .harp #subnavi {
        padding-left: 0;
    }

    #navi_top a, #navi_bottom a {
        color: #FFFFFF;
        margin: 0 3px 3px 0;
        padding: 0.4em 0.5em 0.4em;
        float: left;
    }

    .repertoire .copy, .harp .copy, .cds .copy, .links .copy {
        margin: 15px 0 0 17px;
        max-width: 413px;
    }

    .dates .copy, .vita .copy, .contact .copy, .guestbook .copy {
        margin: 15px 0 0 17px;
        max-width: 343px;
    }

    #guestbook, #links, #contact, #language {
        display: block;
    }

    .repertoire table td, .repertoire table th {
        padding-right: 26px;
    }

    #copyright {
        padding-left: 2em;
        font-size: 18px;
    }
}