@media screen,handheld,projection{
/**
 * Styles for liederhalle-stuttgart.de
 * (c) 2013, M.Sc. Benjamin Zaiser, info-at-benjamin-zaiser.de
 */
*{ margin: 0; padding: 0; }
body{ margin: 20px 0 0 0; background: #eee url("../images/bg-main.jpg") repeat-x; font: normal normal 11px Verdana, Arial, Helvetica, sans-serif; color:#333; }
a{ text-decoration: none; color: #333; }
a:hover{ text-decoration: underline; }
img{ border: 0; }
.clearer{ clear:both; }
.printlogo{ display: none; }

/**
 * General
 */ 
.page{ width: 945px; margin: 0 auto; background:#fff; padding: 10px 20px 0 20px; z-index: 10; position: relative; }



/**
 * Socialmedia (Facebook, etc.)
 */
.socialmedia{ float: right; margin-bottom: 10px; }
.socialmedia a{ display: block; float: left; outline: 0; background: url("../images/buttons.png") no-repeat; width: 18px; height: 17px; outline: none; margin-left: 3px; }
.socialmedia a span{ display: none; }
.socialmedia a.flickr{ background-position: -18px 0px; }
.socialmedia a.youtube{ background-position: -36px 0px; }
.socialmedia a.xing{ background-position: -54px 0px; }
.socialmedia a.google{ background-position: -72px 0px; }
.socialmedia a.twitter{ background-position: -90px 0px; }
.socialmedia a.pinterest{ background-position: -108px 0px; }
.socialmedia a.greenevents{ background-position: -126px 0px; }



/**
 * Header
 */
.header{ clear: both; }
.metainfo{ background: #4D2202; padding:4px 7px 4px 2px; color:#A69181; font-size: 10px; text-align: right; }
.metainfo a{ color: #A69181; padding: 0 5px; }

/** Breadcrumb */
.breadcrumb{ list-style-type: none; float: left; }
.breadcrumb li{ display: inline; }

/** Langswitch */
.langswitch span,
.langswitch a{ background: url("../images/sprite.png") 0px 0px no-repeat; padding: 0 20px 0 0; }
.langswitch  a:hover{ color:#A69181; }
.langswitch  .en{ background-position: right -102px; }
.langswitch  a.en:hover { background-position: right -154px; }
.langswitch  .de{ background-position: right top; }
.langswitch  a.de:hover{ background-position: right -52px; }

/** Image-area */
.image-area{ clear: left; background: url("../images/bg-header.jpg") repeat-x; padding:10px 0 0 0; }
.image-area .images-left { float:left; width:351px; }
.image-area .images-left .logo { float:left; width:234px; height:117px; background: url("../images/logo.jpg") no-repeat; display: block; }
.image-area .images-left .logo span{ display: none; }
.image-area .images-left .image1 { float:left; width:117px; height:117px; }
.image-area .images-left .image2 { float:left; width: 107px; height: 107px; margin-right: 10px; background: #065198; }
.image-area .images-left .image3 { float:left; width:117px; }
.image-area .images-left .image4 { float:left; width:107px; height: 107px; margin-right: 10px; background: #ccc; }
.image-area .image5 { float:left; width: 370px; height: 224px; display: block; overflow: hidden; position: relative; }
.image-area .image5 .gallery{ position: static !important; }
.image-area .image5 .border{ display: block; width: 12px; height: 12px; position: absolute; bottom: 0; right: 10px; z-index: 100; background: url(../images/sprite.png) no-repeat top left; }
.image-area .image6 { float:left; width:224px; height: 224px; display: block; background: url("../images/herzlich_willkommen.jpg") no-repeat top left; overflow: hidden; }



/**
 * Container
 */
.container { background: url("../images/bg-container.jpg") repeat-y; margin:20px 0 0 0; width:945px; min-height: 500px; }
.container .left { float:left; width:204px; padding:20px 20px 0 10px; }

/**
 * Loginstatus 
 */
.login-status{ font-size: 10px; line-height: 23px; margin-bottom: 10px; }
.login-status strong{ font-weight: normal; display: block; }
.login-status a.logout{ float: right; display: block; padding-right: 25px; background: url("../images/sprite.png") no-repeat -438px -515px; color: #333;  }
.login-status .username{ font-style: normal; }
.login-status a.gotointranet{ display: block; }
 


/**
 * Navigation
 */ 
.navi { font-size: 10px; list-style-type:none; border-bottom:1px solid #fff; text-transform:uppercase; }

/* 1st Level */
.navi li a { border-top:1px solid #fff; padding:7px 0 7px 18px; background: url("../images/sprite.png") -213px -180px no-repeat; display:block; color:#333; }
.navi li a:hover,
.navi li a.active { border-top:1px solid #fff; padding:7px 0 7px 18px; background: #DAE5F0 url("../images/sprite.png") 6px -180px no-repeat; display:block; color:#065198; text-decoration: none; }
.navi li img{ float:left; margin: 5px 5px 0 18px; }

/* 2nd Level */
.navi ol{ list-style-type:none; border-top:1px solid #fff; text-transform:none; }
.navi ol li a { border-top:0; padding:4px 0 4px 28px; background: url("../images/sprite.png") -201px -246px no-repeat; }
.navi ol li a:hover,
.navi ol li a.active{ border-top:0; padding:4px 0 4px 28px; background: url("../images/sprite.png") 18px -246px no-repeat; }

/* 3rd Level */
.navi ol ol { list-style-type:none; padding:0; border-top:0; text-transform:none; }
.navi ol ol li a { border-top:0; padding:4px 0 4px 40px; background: url("../images/sprite.png") -189px -304px no-repeat; display:block; color:#333; }
.navi ol ol li a:hover,
.navi ol ol li a.active { border-top:0; padding:4px 0 4px 40px; background: url("../images/sprite.png") 31px -305px no-repeat; display:block; color:#065198; }

/** Partner */ 
.partners{ padding:20px 0 0 0; text-align: center; }
.partners img{ margin: 7px; vertical-align: middle; }
.partners h6{ color: #888888; font-size: 9px; font-weight: normal; text-align: left; padding: 5px 0 0 20px; border-top: 1px solid #ffffff; }

/** TagCloud */
.left .csc-default  h5{ text-transform: uppercase; font-weight: normal; font-size: 1em; background: #DAE5F0 url("../images/sprite.png") 6px -180px no-repeat; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #065198; padding: 7px 0 7px 18px; margin-bottom: 10px; }
.tx-bztagcloud-pi1{ font-family: arial; font-size: 1em; text-align: center; overflow: hidden; }
.tx-bztagcloud-pi1 span{ color: #4179af; float: left;  line-height: 18px; padding: 1px; }
.tx-bztagcloud-pi1 a{ color: #4179af; text-decoration: none; }






/**
 * Article / Main Content
 */
.container .content{ border-top: 1px solid #D9D9D9; float: left; padding: 20px 21px 0; width: 434px; line-height: 18px; }
.content h1 { padding:0px 0px 10px 0px; font-size: 11px; color:#4D2202; }
.content h2{ font-size: 11px; margin: 0 0 5px 0; }
.content h3,
form fieldset legend{ font-size: 11px; margin: 0; font-weight: bold; }
.content a{ text-decoration: underline; }
.content a:hover{ color: #000; }
.content p.bodytext,
.news-single-item p{ margin-bottom: 10px; }
.content .csc-default{ margin-bottom: 15px; } /** http://liederhalle.benjamin-zaiser.de/wir-ueber-uns/referenzen.html*/
.content ul,
.content ol{ list-style-type: none; }
.content li{ padding-left: 10px; background: url("../images/sprite.png") no-repeat -494px -981px; padding-top: 5px; }
.content .csc-textpic-caption{ font-style: italic; }

.content .contenttable{ border-spacing: 3px; width: 100%; }
.content .contenttable td { background: #EDEAE8; text-align: center; }
.content .contenttable .td-0 { width: 156px; }
.content .contenttable thead,
.content .contenttable .td-0 { background: #EAF0F6; text-align: left; }
.content .kapazitaeten thead th { background: none no-repeat scroll center center #EAF0F6; width: 40px; }
.content .kapazitaeten thead .td-1 { background-image: url("../images/0.gif"); }
.content .kapazitaeten thead .td-2 { background-image: url("../images/1.gif"); }
.content .kapazitaeten thead .td-3 { background-image: url("../images/2.gif"); }
.content .kapazitaeten thead .td-4 { background-image: url("../images/3.gif"); }
.content .kapazitaeten thead .td-5 { background-image: url("../images/4.gif"); }
.content .kapazitaeten thead .td-6 { background-image: url("../images/5.gif"); }
.content .contenttable tbody th{ font-weight: normal; }

/**
 * Aside / Border
 */
.container .right { float: right; font-size: 10px; padding: 0 0 0 10px; width: 224px; }
.container .right .csc-default { padding:8px 10px 10px 10px; clear: both; }
.container .right .csc-frame-rulerAfter{ border-bottom: 10px solid #fff; padding:8px 10px 10px 10px; clear: both; }
.container .right h3{ color:#4D2202; font-size: 11px; margin-bottom: 5px; }
.container .right p.bodytext{ margin-bottom: 5px; }
.container .right p.bodytext a,
.container .right .tx-bz-guestbook a { color:#333; text-decoration: underline; padding-left: 10px; background: url("../images/sprite.png") no-repeat 0px -523px; }
.container .right p.bodytext a:hover { color:#000; }
.container .right DIV.csc-textpic DIV.csc-textpic-single-image IMG { margin-bottom: 0; }




/** Raumfinder */
#map-view-container,
#map-container { background: url("../images/raumfinder/map.png") no-repeat top left; width: 205px; height: 262px; }
#map-view-container.en,
#map-view-container.en #map-container{ background-image: url("../images/raumfinder/map_en.png"); }
#map-view-container img.map { position: relative; z-index: 100; }




/**
 * Footer
 */
.footer{ text-align: right; width:985px; background: url("../images/bg-footer.gif") no-repeat; margin:0 auto; padding:50px 0 10px 0; font-size: 10px; color:#999; }
.footer address{ font-style: normal; float: left; }

.footer .metanavi{ display: inline; text-align: right; list-style-type: none; padding:0px 20px 0px 0px; }
.footer .metanavi li{ display: inline; margin-left: 3px; padding-left: 6px; border-left: 1px solid #c0c0c0; }
.footer .metanavi li.first{ border: 0px; }
.footer .metanavi li a{ background: url("../images/sprite.png") 0px 0px no-repeat; padding: 0px 0px 0px 17px; color:#999; }
.footer .metanavi li  a:hover { color:#999; }
.footer .metanavi li a.sitemap{ background-position: 0px -430px; }
.footer .metanavi li a.print{ background-position: -219px -369px; }
.footer .metanavi li a.login{ background-position: 0px -369px; }
.footer .metanavi li a.top{ background-position: -219px -433px; }





/**
 * Forms
 */
form fieldset{ border: 0px; padding: 0px; margin: 10px 0; }
form .error{ color: red !important; }
form .labelinput{ background: #EAF0F6; margin: 1px 0; padding: 3px 4px 0; }

/** General */
form label,
form .label{ display: block; float: left; width: 140px; }
form label.autowidth{ width: auto;     float: none; display: inline; }
form input{ width: 200px; margin-bottom: 5px; border: 1px solid #999999; font-size: 11px; padding: 1px; }
form input[type=submit],
form .button{ margin: 5px 0; padding: 0 20px; width: auto; cursor: pointer; display: block; background: #f0f0f0; border: 1px solid #999; text-decoration: none; font: normal normal 11px Verdana, Arial, Helvetica, sans-serif; line-height: 15px; }
.submitbuttons input{ float: left; }
.submitbuttons .button{ float: left; margin-left: 10px; }
form textarea{ width: 100%; height: 100px; }
.radio label{ vertical-align: top; }
form input.radiobutton{ display: inline; width: auto; margin: 0 5px; }
/** Radiobuttons among each other */
form fieldset .among-each-other fieldset label{ width: auto; float: none; display: block; margin-bottom: 5px; }
form input:hover, 
form .button:hover,
form input:focus { border: 1px solid #065198; color: #065198; }
form input.small{ width: 89px; }
.error{ color: red; }
.messages{ color: green; }


/**
 * Contactform
 */
.labelinput.radio input{ width: auto; margin: 0 5px; }
.labelinput.radio label{ display: inline; width: auto; float: none; }
.labelinput #zip{ width: 50px; margin-right: 10px; }
.labelinput #city{ width: 136px; }
.labelinput a{ text-decoration: none; }

.content .error a,
.content .csc-mailform-field a{ text-decoration: none; }

/**
 * Information & Reservierung
 */
#formhandler_rating_form  #eventdatefrom,
#formhandler_rating_form  #eventdateto, 
#formhandler_rating_form  #eventperiodfrom,
#formhandler_rating_form  #eventperiodto{ width: 74px; margin-right: 10px; }

#formhandler_rating_form h4 label{ width: auto; }
#formhandler_rating_form .csc-mailform{ margin-bottom: 10px; }
#formhandler_rating_form label{ float: left; }
#formhandler_rating_form input{ float: left; padding: 1px; }
#formhandler_rating_form .csc-mailform-table { border-collapse: collapse; width: 100%; }
#formhandler_rating_form.csc-mailform-table td,
#formhandler_rating_form.csc-mailform-table th { border-bottom: 1px solid #FFFFFF; font-weight: normal; text-align: left; }
#formhandler_rating_form .csc-mailform-table td.first { width: 130px; }
#formhandler_rating_form .csc-mailform-table #spacepersons1,
#formhandler_rating_form .csc-mailform-table #spacepersons2,
#formhandler_rating_form .csc-mailform-table #spacepersons3 { width: 40px; }
#formhandler_rating_form fieldset fieldset { margin: 0; padding: 0; }
#formhandler_rating_form fieldset fieldset label { display: inline; margin-right: 5px; width: auto; line-height: 22px; }
#formhandler_rating_form fieldset fieldset input { width: auto; padding: 1px; margin: 3px 3px 5px 3px; border: 0; }
#formhandler_rating_form fieldset .inlinelabel { width: auto; }
#formhandler_rating_form .csc-mailform-table td,
#formhandler_rating_form .csc-mailform-table th { border-bottom: 1px solid #FFFFFF; font-weight: normal; text-align: left; }
#formhandler_rating_form .csc-mailform-field,
#formhandler_rating_form .csc-mailform-table td,
#formhandler_rating_form .csc-mailform-table th { background: none repeat scroll 0 0 #EAF0F6; margin: 1px 0; padding: 3px 4px 0; }
#formhandler_rating_form .zip span.label label{ display: inline; float: none; }
#formhandler_rating_form .zip input#zip{ width: 50px; float: left; margin-right: 10px; }
#formhandler_rating_form .zip input#city{ width: 136px; }



/**
 * Sitemap 
 */
.csc-sitemap li{ padding-bottom: 40px; background-position: -494px -982px; }
.csc-sitemap ul ul li{ padding-top: 10px; padding-bottom: 0; background-position: -494px -977px; }
.csc-sitemap ul ul ul li{ padding-top: 0; padding-bottom: 0; background-position: -494px -987px; }



/**
 * Guestbook
 */
.tx-bz-guestbook dl{ background: #E6EDF4; margin-bottom: 20px; padding: 5px 5px 3px; width: 408px; }
.tx-bz-guestbook .description{ padding-bottom: 10px; }
.tx-bz-guestbook .author{ color: #065198; text-align: right; padding: 0; }




/**
 * Eventmanagement
 */
.tx-bz-eventmanagement .teaserview{ height: 53px; overflow: hidden; position: relative; }
.tx-bz-eventmanagement .teaserview a{ display: block; margin-bottom: 20px; }
.tx-bz-eventmanagement .teaserview .teaserwrapper{ position: absolute; top: 0px; left: 0px; }

.tx-bz-eventmanagement .searchForm{ margin-bottom: 20px; }
.tx-bz-eventmanagement .results{ border-style: collapsed; width: 100%; }
.tx-bz-eventmanagement .results tr th{ background: #EAF0F6; border-bottom: 1px solid #fff; font: 11px/18px Verdana,Arial,Helvetica,sans-serif; text-align: left; border-right: 1px solid #fff; }
.tx-bz-eventmanagement .results tr th.date{ width: 100px; }
.tx-bz-eventmanagement .results tr th.tickets{ width: 50px; }
.tx-bz-eventmanagement .results tr th,
.tx-bz-eventmanagement .results tr td{ vertical-align: top; padding: 2px 5px; }
.tx-bz-eventmanagement .results tr td.event{ padding-bottom: 10px; }
.tx-bz-eventmanagement .results tr.odd{ background: #E2E0DC; }
.tx-bz-eventmanagement .results tr.even{ background: #f6f6f6; } 
.tx-bz-eventmanagement .results p{ margin-bottom: 3px; }
.tx-bz-eventmanagement .results td.tickets a{ display: block; width: 23px; height: 15px; background: url("../images/sprite.png") no-repeat right -638px; }
.tx-bz-eventmanagement .results td.tickets a span{ display: none; }



/**
 * Fluid Pager
 */
.f3-widget-paginator{ list-style-type: none; text-align: center; }
.f3-widget-paginator li{ display: inline; background: none; }
.f3-widget-paginator li a{ padding: 0 5px; }
.f3-widget-paginator li.current a{ font-weight: bold; }


/**
 * Landingpage
 */
.landing .landingcontainer,
.landing .header .image-area,
.landing .header .image-area .images-left .logo { background: none; }
.landing .landingcontainer{ background: url(../images/landing_col_bg.gif) repeat-y top left; padding-bottom: 20px; margin-top: 20px; position: relative; }
.page.landing{ background: #ffffff url(../images/landing_bg.jpg) no-repeat 20px 50px; } 
.landingcontainer .left{ width: 463px; float: left; margin-right: 19px; padding: 0; }
.landingcontainer .right{ width: 463px; float: left; margin: 0px; padding: 0; }

/** Inhaltselemente */
.landing .landingcontainer h1{ color: #0052a0; font-weight: normal; margin: 20px 20px 10px 0; padding: 0 10px 0 0; font-size: 18px; border-bottom: 3px double #0052a0; }
.landing .landingcontainer h1 a{ color: #0052a0; text-decoration: none; }

.landingcontainer p,
.landingcontainer ul{ margin-bottom: 10px; line-height: 18px; }
.landingcontainer ul{ list-style-type: none; clear: both; }
.landingcontainer ul li{ display: block; float: left; width: 40%; padding-left: 10px; background: url(../images/landing_li.gif) no-repeat 0px 6px; }
.landingcontainer .right ul li{ float: none; }

.landingcontainer .right .csc-frame { right: 16px; position: absolute; top: 292px; width: 204px; z-index: 10; }
.landingcontainer .right .csc-frame h2 { font-size: 11px; }
.landingcontainer .right .csc-frame .teaserview{ margin: 10px 0; }

/** Footer */
.landing.footer{ background-position: 0px -22px; padding-top: 27px;  }
.landing.footer .metanavi{ visibility: hidden; }



/**
 * Modern Landingpage 2014
 * [tsk-319] 
 */ 
.landing2014{ width: 100%; height: 100%; margin: 0; padding: 0; background: none; }
.landing2014 .gallery{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.landing2014 .gallery div{ width: 100% !important; height: 100% !important; background-size: cover; position: absolute; top: 0; left: 0; z-index: 0; }
.landing2014 .page{ width: auto; margin: 0; padding: 0; background: none; }
.landing2014 .metainfo{ position: absolute; right: 10px; top: 50px; z-index: 10; width: 120px; height: 100px; background: none; text-align: left; }
.landing2014 .metainfo a,
.landing2014 .metainfo span{ background: none; color: #fff; padding: 3px 0; display: block; }
.landing2014 .page .left,
.landing2014 .page .right{ position: absolute; text-align: center; line-height: 20px; background: url("../images/landingpage2014_left.png") no-repeat top left; }
.landing2014 .page .left{ top: 30px; right: 350px; padding: 63px 42px 45px 20px; width: 237px; height: 167px;}
.landing2014 .page .right{ top: 180px; right: 62px; padding: 90px 100px 80px 20px; background-image: url("../images/landingpage2014_right.png"); width: 225px; height: 109px;}
.landing2014 h1{ color: #004f9b; font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.landing2014 h2{ color: #333333; font-size: inherit; font-weight: bold; margin-bottom: 5px; }
.landing2014 .footer{ display: none; }
.landing2014 .article a{ text-decoration: none; color: inherit; }


/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }






/**
 * Filelinks
 */
.content .csc-uploads { border-collapse: collapse; width: 100%; }
.content .csc-uploads td.csc-uploads-fileSize { width: 10%; }
.content .csc-uploads td { padding-bottom: 5px; }
.content .csc-uploads p { margin-bottom: 0; }
.content .csc-uploads tr.tr-odd { background: #EEE; }




/**
 * tt_news
 */
.news-latest-item { margin: 10px 0; }
.news-latest-item h3 a { font-size: 11px; text-decoration: none; }
.news-latest-item a { text-decoration: none !important; }
.news-list-browse .showResultsWrap { display: none; }
.news-list-item{ margin-bottom: 10px; }
.news-single-files dd { margin-left: 0; }
.news-single-files dd a { padding-right: 5px; }
.news-single-files dd img { display: none; }
.news-single-img { float: right; }
.news-single-backlink { clear: both; margin-top: 10px; }
.news-list-morelink{ padding: 0 10px; }



/**
 * Imagegallery
 */ 
.tx-bzimagegallery-pi1 .imagegallery_navi { display: none; position: static; }
.tx-bzimagegallery-pi1 .pagerNavi { float: left; margin-bottom: 5px; margin-top: 5px; padding-top: 10px; }
.tx-bzimagegallery-pi1 .pagerNavi a { background: #4D2202; border: 1px solid #000000; color: #FFFFFF; display: block; float: left; line-height: 15px; margin-bottom: 5px; margin-right: 5px; padding: 3px 5px; text-decoration: none; }
.tx-bzimagegallery-pi1 .pagerNavi a.activeSlide { background: none repeat scroll 0 0 #F2F2F2; color: #000000; }




}
@media print{
/**
 * Styles for liederhalle-stuttgart.de
 * - printer friendly -
 * (c) 2013, M.Sc. Benjamin Zaiser, info-at-benjamin-zaiser.de
 */
html,body { font: normal normal 11px Verdana, Arial, Helvetica, sans-serif; color:#000; }
.clearer { clear:both; }
img{ border: 0; }
a{ color: #000; text-decoration: none; }
p{ margin-top: 0; }

.langswitch,
.image-area,
.left,
.metanavi,
.socialmedia,
.right{ display: none; }

.header{ margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #c0c0c0; }
.header .breadcrumb{ list-style-type: none; font-size: .9em; margin: 5px 0 0 0; padding: 0; }
.header .breadcrumb li{ display: inline; padding: 0; margin: 0; }
.header .breadcrumb a{ color: #555; padding: 0 5px; text-decoration: none; font-style: italic; }
.header .breadcrumb li.first a{ padding-left: 0; }

.footer{ margin-top: 20px; padding-top: 10px; border-top: 1px solid #c0c0c0; }
.footer address{ font-style: normal; font-size: .9em; }

.tx-bz-eventmanagement .labelinput label{ width: 100px; display: block; float: left; }
.tx-bz-eventmanagement .results{ border-collapse: collapse; }
.tx-bz-eventmanagement .results th{ text-align: left; border-bottom: 1px solid #000; }
.tx-bz-eventmanagement .results td{ vertical-align: top; border-bottom: 1px solid #c0c0c0; padding-top: 10px; }
.tx-bz-eventmanagement .results .tickets{ display: none; }
.tx-bz-eventmanagement h3{ margin-top: 0; }


}




/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../images/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}