@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust: none;}

body, html {/*overflow-x: hidden;*/ /*height: 100%;*/}
body
{
    margin: 0px;
    font-family: arial, helvetica, sans-serif;
    /*font-size: 14px;*/
    font-size: 100.01%;
    line-height: 1.2;
    color: rgb(85, 85, 85);
    background: rgb(51, 51, 51);
}

#imain :focus {outline: none;}
#imain
{
    /*width: 480px;*/
    background: rgb(226, 226, 226) url(background_mobile.jpg) no-repeat fixed;
    background-size: 100%;
    position: relative;
}



/*-------------------------------------------------------------------------------- ACCORDION */
.caccordion {font-size: 70%;}
.caccordionprogram {font-size: 90%;}



.cah1
{
    height: 40px;
    margin: 0px 10px;
    padding-top: 8px;
    border: 1px solid rgb(255, 255, 255);
    border-bottom: none;
    cursor: pointer;
    
    font-family: "didact gothic", arial, helvetica, sans-serif;
    letter-spacing: 4px;
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    
    background: rgb(85, 85, 85);
}
.cah1.clast {border-bottom: 1px solid rgb(255, 255, 255);}
.cah1.ui-state-active {color: rgb(118, 110, 193);}

.cadiv {display: none;}
.cadivinner {margin: 0px 10px; padding: 10px; background: rgb(255, 255, 255); line-height: 1.5;}



/*
.cah1.clevel2
{
    padding: 8px 20px 0px 60px;
    height: 25px;
    border-top: 1px solid rgb(0, 0, 0);
    background: rgb(48, 42, 37) url(arrow.png) 40px center no-repeat;
}
.cah1.clevel2.ui-state-active {background-image: url(arrow_down.png);}
.cah1.clevel2.cfirst {border-top: none;}

.cadiv.clevel2.cfirst {display: block;}
*/



/*--------------------------------------------------------------------------------*/
#ihomeh1
{
    height: 38px;
    padding: 0px;
    margin: 0px;
    border: none;
    background: url(background_top.png) repeat-x;
    position: relative;
}
#ihomeh1 #ilogo {width: 480px; height: 40px; background: url(logo_soundframe.png) no-repeat 10px 9px;}
#ihomediv {/*height: 318px;*/ display: block;}
#ihomediv .cadivinner {background: none; /*height: 298px; background: url(logo_substructions_mobile.png) 0px 10px no-repeat;*/}
#ihomediv .cadivinner img {width: 30%;}

#iprogramdiv .cah1
{
    height: 48px;
    padding: 0px;
    margin: 0px;
    background: rgb(51, 51, 51) url(background_calendar_mobile.png) 52px 0px no-repeat;
    border: none;
    border-top: 1px solid rgb(153, 153, 153);
    text-align: center; 
    line-height: 1.2;
    letter-spacing: 1px;
    position: relative;
}
#iprogramdiv .cah1.cfirst {border-top: 1px solid rgb(255, 255, 255);}
#iprogramdiv .cadivinner {padding: 0px;}

#iprogramdiv .cah1.ccalendarday {}

#iprogramdiv .ccalendarday1 {width: 52px; padding-top: 5px; float: left;}
#iprogramdiv .ccalendarday1 .ca {font-size: 10px;}
#iprogramdiv .ccalendarday1 .cd {font-size: 20px;}
#iprogramdiv .ccalendarday2 {display: none; /*font-size: 24px;*/ font-size: 20px; text-transform: none; /*width: 400px; position: absolute; right: 0px; top: 8px; */ margin-left: 74px; padding-top: 12px;}

#iprogramdiv .cah1.ccalendarday.ui-state-active .ccalendarday2 {display: block;}
#iprogramdiv .cah1.ccalendarday.ui-state-active {/*color: rgb(85, 85, 85); background-color: rgb(255, 255, 255);*/}

#iprogramdiv .caccordionprogram .cadivinner {padding: 0px 0px 0px 0px; margin: 0px;}



/*--------------------------------------------------------------------------------*/
#ibottom
{
    padding: 10px;
    margin-top: 50px;
    background: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
#ibottom a {color: rgb(255, 255, 255);}



/*--------------------------------------------------------------------------------*/
.csc-textpic-caption {font-size: 12px;}

.bodytext img {width: 100%;}



/*-------------------------------------------------------------------------------- TEXT */
a {color: rgb(85, 85, 85); text-decoration: underline;}
a:hover {text-decoration: none;}

h1 {/*font-size: 24px;*/ font-size: 140%;}
h2 {/*font-size: 18px;*/ font-size: 130%;}
h3, h4, h5, h6 {/*font-size: 14px;*/ font-size: 120%;}
h1, h2, h3, h4, h5, h6 {margin: 0px 0px 10px 0px;}

p {margin: 0px 0px 10px 0px;}

ul {list-style: square; margin-bottom: 10px;}
li {margin-left: 20px;}

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



/*-------------------------------------------------------------------------------- DATA EVENTS */
#iprogramdiv .cdaywrap {}
/*
#iprogramdiv .clocationwrap {float: left; display: inline; position: relative; width: 460px; margin: 0px 10px 40px 10px;}
*/

#iprogramdiv .cevent {/*margin-bottom: 10px;*/ padding-top: 5px; padding-bottom: 10px;}
#iprogramdiv .cevent.cfirst {/*margin-bottom: 10px;*/ padding-top: 0px; padding-bottom: 10px;}

#iprogramdiv .cevent.ccancelled-1 {text-decoration: line-through;}

#iprogramdiv .clocation h2.ceventname {margin-bottom: 3px; padding: 5px 10px 7px 10px;}
#iprogramdiv .clocation {padding: 0px 0px 3px 0px; margin-bottom: 10px;}
#iprogramdiv .clocation .clocationimage img {display: inline-block; width: 60%; height: auto;}
#iprogramdiv .clocation .clocationimage {float: left; display: inline; position: relative; /*width: 60px; margin-right: 20px; margin-left: 3px;*/ width: 20%; text-align: center;}
#iprogramdiv .clocation .clocationtext {float: left; display: inline; position: relative; /*width: 370px;*/ width: 76%; margin-right: 4%;}

#iprogramdiv .ctime {float: left; display: inline; position: relative; /*width: 60px; margin-right: 20px;*/ width: 20%; text-align: center;}
#iprogramdiv .ctext {float: left; display: inline; position: relative; /*width: 370px;*/ width: 76%; margin-right: 4%;}

#iprogramdiv .ctext .cvideolabel, #iprogramdiv .ctext .caudiolabel {float: left; display: inline; position: relative; /*width: 60px; margin-right: 20px;*/ width: 16%; margin-right: 4%;}
#iprogramdiv .ctext .cvideotext, #iprogramdiv .ctext .caudiotext {float: left; display: inline; position: relative; /*width: 290px;*/ width: 80%; margin-bottom: 10px;}
#iprogramdiv .ctext .cvideotext .cvideoartists .cname, #iprogramdiv .ctext .caudiotext .caudioartists .cname {font-weight: bold;} 

/* category colors */
/* party */
#iprogramdiv .cevent.ccategory-1 {border-top: 1px solid rgb(137, 214, 199);}
#iprogramdiv .cevent.ccategory-1 .clocation h2.ceventname {border-top: 2px solid rgb(137, 214, 199); border-bottom: 3px solid rgb(137, 214, 199);}
#iprogramdiv .cevent.ccategory-1 .clocationtext .cname a {padding-left: 5px; border-left: 10px solid rgb(137, 214, 199);}
#iprogramdiv .cevent.ccategory-1 .clocation {border-bottom: 1px solid rgb(137, 214, 199);}
/* exhibition */
#iprogramdiv .cevent.ccategory-2 {border-top: 1px solid rgb(241, 169, 203);}
#iprogramdiv .cevent.ccategory-2 .clocation h2.ceventname {border-top: 2px solid rgb(241, 169, 203); border-bottom: 3px solid rgb(241, 169, 203);}
#iprogramdiv .cevent.ccategory-2 .clocationtext .cname a {padding-left: 5px; border-left: 10px solid rgb(241, 169, 203);}
#iprogramdiv .cevent.ccategory-2 .clocation {border-bottom: 1px solid rgb(241, 169, 203);}
/* lecture */
#iprogramdiv .cevent.ccategory-3 {border-top: 1px solid rgb(255, 239, 120);}
#iprogramdiv .cevent.ccategory-3 .clocation h2.ceventname {border-top: 2px solid rgb(255, 239, 120); border-bottom: 3px solid rgb(255, 239, 120);}
#iprogramdiv .cevent.ccategory-3 .clocationtext .cname a {padding-left: 5px; border-left: 10px solid rgb(255, 239, 120);}
#iprogramdiv .cevent.ccategory-3 .clocation {border-bottom: 1px solid rgb(255, 239, 120);}



/* MAK exception */
/*
#iprogramdiv .clocationwrap-1 {width: 940px;}
#iprogramdiv .clocationwrap-1 .ctext {width: 860px;}
#iprogramdiv .clocationwrap-1 .clocationtext {width: 860px;}
*/
/* Hotel am Brillantengrund exception */
/*
#iprogramdiv .clocationwrap-2 {width: 940px;}
#iprogramdiv .clocationwrap-2 .ctext {width: 860px;}
#iprogramdiv .clocationwrap-2 .clocationtext {width: 860px;}
*/

#ievent-44 {padding-top: 0px !important;}
#ievent-44 .clocation {display: block !important; border-bottom: none !important; margin-bottom: 5px !important;}
#ievent-44 .clocation .clocationimage {display: none;}
#ievent-44 .clocation .clocationtext {display: none;}
#ievent-45 {padding-top: 0px !important;}
#ievent-45 .clocation {display: block !important; border-bottom: none !important; margin-bottom: 5px !important;}
#ievent-45 .clocation .clocationimage {display: none;}
#ievent-45 .clocation .clocationtext {display: none;}
#ievent-27 {padding-top: 0px !important;}
#ievent-27 .clocation {display: block !important; border-bottom: none !important; margin-bottom: 5px !important;}
#ievent-27 .clocation .clocationimage {display: none;}
#ievent-27 .clocation .clocationtext {display: none;}



/*-------------------------------------------------------------------------------- MEDIA QUERIES */
/*
@media only screen and (max-width: 960px) {
#imain
{
    transform: scale(2);
    transform-origin: left top;
    -ms-transform: scale(2);
    -ms-transform-origin: left top;
    -webkit-transform: scale(2);
    -webkit-transform-origin: left top;
    -moz-transform: scale(2);
    -moz-transform-origin: left top;
    -o-transform: scale(2);
    -o-transform-origin: left top;
}
}



@media only screen and (max-width: 800px) {
#imain
{
    transform: scale(1.666);
    transform-origin: left top;
    -ms-transform: scale(1.666);
    -ms-transform-origin: left top;
    -webkit-transform: scale(1.666);
    -webkit-transform-origin: left top;
    -moz-transform: scale(1.666);
    -moz-transform-origin: left top;
    -o-transform: scale(1.666);
    -o-transform-origin: left top;
}
}



@media only screen and (max-width: 640px) {
#imain
{
    transform: scale(1.333);
    transform-origin: left top;
    -ms-transform: scale(1.333);
    -ms-transform-origin: left top;
    -webkit-transform: scale(1.333);
    -webkit-transform-origin: left top;
    -moz-transform: scale(1.333);
    -moz-transform-origin: left top;
    -o-transform: scale(1.333);
    -o-transform-origin: left top;
}
}
*/



/* android sometimes reports 533px instead of 800px ??? */
/*
@media only screen and (max-width: 533px) { 
#imain
{
    transform: scale(1.1104);
    transform-origin: left top;
    -ms-transform: scale(1.1104);
    -ms-transform-origin: left top;
    -webkit-transform: scale(1.1104);
    -webkit-transform-origin: left top;
    -moz-transform: scale(1.1104);
    -moz-transform-origin: left top;
    -o-transform: scale(1.1104);
    -o-transform-origin: left top;
}
}



@media only screen and (max-width: 480px) {
#imain
{
    transform: scale(1);
    transform-origin: left top;
    -ms-transform: scale(1);
    -ms-transform-origin: left top;
    -webkit-transform: scale(1);
    -webkit-transform-origin: left top;
    -moz-transform: scale(1);
    -moz-transform-origin: left top;
    -o-transform: scale(1);
    -o-transform-origin: left top;
}
}



@media only screen and (max-width: 320px) {
#imain
{
    transform: scale(0.666);
    transform-origin: left top;
    -ms-transform: scale(0.666);
    -ms-transform-origin: left top;
    -webkit-transform: scale(0.666);
    -webkit-transform-origin: left top;
    -moz-transform: scale(0.666);
    -moz-transform-origin: left top;
    -o-transform: scale(0.666);
    -o-transform-origin: left top;
}
}
*/