/*********************************************/
/*         css styles for cargobar.ch        */
/*           written and composed by         */
/*               markus erdmann              */
/*             © 2009 esense gmbh            */
/*                                           */
/*********************************************/

/*********************************************/
/*                   width                   */
/*********************************************/
#pageContainer {width:80em;}
.centerContainer {width:42em;}
.rightContainer {width:17em;}
.widthSerieCategory {width:22em;}
#eventContainer .contentWrap {width:45em;}
#eventContainer .imageGalleryWrap {width:210px;}
.dateDay {;width:6.5em;}

.startContainerLeft,
.startContainerRight {width:38.5em;}

#eventContainer .imageContainer {width:54em;}
h5{width: 6em;}

.widthImage {width:50px;}
.eventFirstImage {width:210px;}
#eventContainer .imageGalleryWrap .imageThumbs ul li {width:34px;}

#eventContainer a.navigationPrevious {width:15%;}
.eventDate {width:69%;}

.widthDate,
.searchDate {width:11em;}

.firstLetterAnchor .backToTop,
.overviewTitle .backToTop,
.year .backToTop {width:12em;}

.leftContentContainer,
.rightContentContainer {width:34em;}

.firstLetterAnchor h2,
.year h2 {width:32em;}

.randomTextContainer,
#pageContainer #contentContainer .search input.searchField {width:30em;}

.rightContainer .description, .centerContainer .description,
.centerContainer .activeDescription {width:5.5em;}

.space {height:2.8em;}

.overflowHidden {width:100%;height:100px;}

.headerRandomContainer,
.startAdditionalContainer {width:100%;}

/*********************************************/
/*                   border                  */
/*********************************************/
/*** global border-bottom ***/
#pageContainer #contentContainer,
.content,
#pageContainer #contentContainer td,
.overflowHidden,
.borderBottom,
#eventContainer .navigationContainer,
.firstLetterTitle,
.firstLetterAnchor,
.allEventTitle,
#pageContainer #contentContainer .search #searchForm,
.imageSearchResultContainer,
.startOverviewTitle,
h2.twoColumnTitle,
h2.centerColumnTitle,
h2.fullscreenTitle,
.borderBottom {border-bottom: 1px solid #151515;}

#navFirst,
#navSecond,
#navThird,
.navYear,
#navBread {border-bottom: 1px solid #333338;}

/*** special border ***/
.eventDate {border-left: 1px solid #151515;border-right: 1px solid #151515;}
#pageContainer #contentContainer .search input.searchField {border:none;background-color:transparent;border-bottom: 1px solid #B3B3FF;}
.borderTop {border-top: 1px solid #151515;}

/*********************************************/
/*                 background                */
/*********************************************/
body {background-color:#151515;}

.firstLetterAnchor,
.overviewTitle,
.startEventContainer {background-color:#151515;}

#eventContainer,
#pageContainer #contentContainer tr,
.imageSearchResultContainer,
.content a.link,
.downloadContainer,
.startAdditionalContainer{background-color:#333338;}

#pageContainer #contentContainer tr:hover,
#eventContainer .navigationContainer,
.firstLetterTitle,
.allEventTitle,
.content a.link:hover,
#pageContainer #contentContainer .search #searchForm,
h2.twoColumnTitle,
h2.fullscreenTitle,
h2.centerColumnTitle,
.lightgrayBg {background-color:#444449;}

#headerContainer,
.year,
.startOverviewTitle,
#navBread,
#navFirst,
#navSecond,
#navThirdl,
.navYear {background-color:transparent;}

/*********************************************/
/*                   color                   */
/*********************************************/
body,
.eventDate h2,
.abstract,
.text p,
.date,
.dateDay,
#pageContainer #contentContainer .search input.searchField,
.searchDate,
.startTitleContainer .event a,
#navFirst a:hover,
#navFirst li.trail a,
#navSecond a:hover,
#navSecond li.trail a,
#navThird a:hover,
#navThird li.closed.trail a,
.navYearContent a:hover,
.activeEvent {color:#FFF;}

.lightgrayColor {color:#777;}

h5,
#navFirst a,
#navSecond a,
#navThird a,
.navYearContent a {color:#A5A5B7;}

p,a,dl,
#footerContainer,
.onlyImagesSearch p {color:#777;}

.inactiveEvent,
#pageContainer #contentContainer .search .searchFieldButton,
a {color:#B3B3FF;}

a:hover,
#pageContainer #contentContainer .search .searchFieldButton:hover,
.textSearchResult strong,
.startTitleContainer .event a:hover,
#navFirst li.active a,
#navFirst li.active.closed strong a,
#navFirst li.active.leaf strong a,
#navSecond li.active a,
#navSecond li.active.closed strong a,
#navSecond li.active.leaf strong a,
#navThird li.active a,
#navThird li.active.closed strong a,
#navThird li.active.leaf strong a,
.navYearContent a.activeYear {color: #FFFFb3;}

img {color:#151515;} /* slow loading pics show no text */

/*********************************************/
/*                  padding                  */
/*********************************************/
h5,
.eventDate h2,
a.firstLetter,
#navSecond ul li,
.navYearContent a,
#navThird ul li {padding:0 0.5em 0 0;}

#navFirst ul li {padding:0 1em 0 0;}

.abstract,
#eventContainer .imageGalleryWrap {padding:0 0 1em 0;}

#pageContainer #contentContainer .search #searchForm,
.rightContentContainer h2.eventTitle, .leftContentContainer h2.eventTitle {padding:0.5em 0 0.5em 0;}

.firstLetterAnchor .backToTop,
.overviewTitle .backToTop,
.year .backToTop {padding:1em 0 0 0;}

#navSecond,
#navThird {padding:0.1em 0 0 0;}

#navSecond ul,
#navThird ul {padding:0;}

.startTitleContainer {padding:0.5em 0.5em 0 0;}
#pageContainer #contentContainer {padding:0 0 2em 0;}
#footerContainer {padding:1em 0 0 0;}
.widthSerieCategory {padding-top:0.4em;}
#eventContainer a.navigationPrevious {padding: 1.2em 0 0 0.5em;}
#eventContainer a.navigationNext {padding: 1.2em 0.5em 0 0;}
.eventDate h3 {margin:0 0 0 4.65em;}
.eventDescrContainer {padding:0 1em 0 0;}
#eventContainer .contentWrap {padding:1em 0 1em 0.7em;}
#eventContainer .imageGalleryWrap a {padding:10px 0 10px 0;}
.mp3 {padding:0.5em 0 2em 0;}
.firstLetterTitle h1 {padding:0 0 0 0.5em;}
.firstLetterAnchor h2 {padding:0.5em 0 0.5em 0.5em;}
.allEventTitle h1 {padding:0.5em 0 0.5em 0.3em;}
.year h2 {padding:0.5em 0 0.5em 2.8em;}
.content a.link {padding:0 0 0 1em;}
.overviewTitle {padding:0 0 0.5em 0;}
.overviewTitle h2 {padding:0.5em 0 0 0;}
.centerContainer .activeDescription {padding:0.9em 0 0 0;}
.randomImageContainer {padding:0 1em 0 0;}
.randomTextContainer {padding:1em 0 0 0;}
#pageContainer #contentContainer .search input.searchField {padding:0.2em;}
.textSearchResult {padding:0 0 0.2em 0.5em;}
.onlyImagesSearch {padding:0.5em 0 0.2em 0;}
.startTextWrapper{padding-left: 10px;}
.startOverviewTitle h2 {padding:0.5em 0 0.35em 0;}
.startOverviewDate {padding:0.9em 0 0 1em;}
.startOverviewContainer .text {padding:0 0 0.5em 0;}
#eventContainer .imageContainer {padding:0 0 1em 15.6em;}
h2.twoColumnTitle {padding:0.5em 0 0.5em 2.65em;}
h2.fullscreenTitle {padding:0.5em 0 0.5em 0.65em;}
h2.centerColumnTitle {padding:0.5em 0 0.5em 12.1em;}
.twoColumnImageContainer {padding:1em 0 1em 0;}
#navBread h5 {padding:0.25em 0 0 0;}
#navFirst ul {padding:0;}
.leftContentContainer {padding:1em 0 1em 4em;}
.rightContentContainer {padding:1em 4em 1em 0;}
.fullscreenContainer {padding:1em 1em 1em 1em;}
.additionalContent {padding:0.5em 0.75em 0.5em 0.75em;}
#navFirst a, #navSecond a, #navThird a {padding:0 0.1em 0 0;}

/*********************************************/
/*                   margin                  */
/*********************************************/
#pageContainer #contentContainer {margin:0 0 2em 0;}
.eventDate h3 {margin:0 0 0 4.65em;}
.eventDate h2 {margin:0 0 0 3.65em;}
#pageContainer #contentContainer .search input.searchField {margin:0 1em 0 15.5em;}
h2.noResult {margin:0 0 0 9em;}
.onlyImagesSearch {margin:0 1em 0 14.2em;}
.onlyImagesSearch input {margin:0.1em 0 0 0.5em;}

/*********************************************/
/*                image opacity              */
/*********************************************/
.imageLink a,
#eventContainer .imageGalleryWrap a,
.imageSearchResultContainer a {filter:alpha(opacity=70);opacity: 0.7;-moz-opacity:0.7;}

.imageLink a:hover,
#eventContainer .imageGalleryWrap a:hover,
.imageSearchResultContainer a:hover {filter:alpha(opacity=100);opacity: 1;-moz-opacity:1;}

/*********************************************/
/*                    font                   */
/*********************************************/
/*** family ***/
body {font-family:Trebuchet MS,Helvetica,Arial,"Liberation sans","Bitstream Vera Sans",sans-serif;}

/*** style ***/
body {text-transform:uppercase;}

.text,
#footerContainer,
#eventContainer a.linkOne,
#eventContainer a.linkTwo {text-transform:none;}

h5,
.rightContainer h5 {text-align:right;}

#footerContainer {text-align:center;}

h4,
p,a,dl,
.eventDate h2,
.eventTitle,
.firstLetterTitle h1,
.firstLetterAnchor h2,
.allEventTitle h1,
.year h2,
.overviewTitle,
.overviewTitle h2,
.activeEvent, .inactiveEvent,
h2.noResult,
.textSearchResult strong,
.startOverviewTitle,
.startOverviewTitle h2,
h2.twoColumnTitle,
#navFirst li.active.closed strong a,
#navFirst li.active.leaf strong a,
#navThird a,
.rightContentContainer h2.eventTitle, .leftContentContainer h2.eventTitle {font-weight:normal;}

.abstract {font-weight:bold;}

/*** size ***/
body {font-size:75%;}

.activeEvent, .inactiveEvent {font-size:1.5em;}

#navFirst a {font-size:1.5em;} /* h2 */
#navSecond a, #navThird a {font-size:1.1666em;} /* h3 */

/*** line-height ***/
.activeEvent, .inactiveEvent {line-height:1.3em;}

/*********************************************/
/*                 cargo tv                  */
/*********************************************/
#cargoTvContainer {
position:absolute;
top:0px;
width:134px;
height:100px;
margin:0 0 0 100%;
left:-134px;
float:left;
background-color:transparent;
}

#cargoTvBild {
position:absolute;
top:0px;
left:0px;
height:100px;
width:134px;
background-color:transparent;
font-size:1px;
color:#ddd;
line-height:1px;
}

#cargoTvLink a {
position:absolute;
top:0px;
left:0px;
width:134px;
height:100px;
font-size:1px;
color:#ddd;
line-height:1px;
cursor:pointer;
}

/*********************************************/
/*                back button                */
/*********************************************/
.backToTop a {
padding:0.2em 2em 0.2em 0;
background:transparent url(../pics/back-top-off.gif) top right no-repeat;
color:#151515;
}

.backToTop a:hover {
color:#ffffb3;
background:transparent url(../pics/back-top-on.gif) top right no-repeat;
}

.historyBackButton a {
position:absolute;
left:94.5em;
float:left;
width:5.5em;
height:20px;
top:5.5em;
font-size:0.8em;
color:#151515;
padding:0.5em 0 0 0;
background:transparent url(../pics/back-button.gif) top right no-repeat;
}

.historyBackButton a:hover {
color:#ffffb3;
background-position:bottom right;
}

/*********************************************/
/*                back button                */
/*********************************************/
.multimediaWidth {
width:12em;
}

/*** overview ***/
.hasMultimedia {
padding:3px 0 0 3px;
float:right;
margin:0;
background-color:transparent;
line-height:1px;
font-size:1px;
}

.hasMultimedia a {
width:12px;
height:11px;
padding:0;
margin:0;
float:left;
background:transparent url(../pics/multimedia-medium.gif) 0 0 no-repeat;
}

.hasMultimedia a:hover {
background:transparent url(../pics/multimedia-medium.gif) 0 -11px no-repeat;
}

.hasMultimedia a img {
padding:0;
float:left;
border:none;
background-color:transparent;
}

/*** list ***/
.hasMultimediaList {
position:absolute;
left:150em;
padding:0;
width:12px;
height:11px;
float:right;
margin:6px 0 0 0;
background-color:transparent;
line-height:1px;
font-size:1px;
}

.hasMultimediaList a {
width:12px;
height:11px;
padding:0;
margin:0;
float:left;
background:transparent url(../pics/multimedia-medium.gif) 0 0 no-repeat;
}

.hasMultimediaList a:hover {
background:transparent url(../pics/multimedia-medium.gif) 0 -11px no-repeat;
}

.hasMultimediaList a img {
padding:0;
float:left;
border:none;
background-color:transparent;
}

/*** search ***/
.hasMultimediaSearch {
padding:0;
width:12px;
height:11px;
margin:6px 3px 0 0;
float:right;
background-color:transparent;
line-height:1px;
font-size:1px;
}

.hasMultimediaSearch a {
width:12px;
height:11px;
padding:0;
margin:0;
float:left;
background:transparent url(../pics/multimedia-medium.gif) 0 0 no-repeat;
}

.hasMultimediaSearch a:hover {
background:transparent url(../pics/multimedia-medium.gif) 0 -11px no-repeat;
}

.hasMultimediaSearch a img {
padding:0;
float:left;
border:none;
background-color:transparent;
}

/*********************************************/
/*               random screen               */
/*********************************************/
#randomScreenContainer {
position:relative;
top:0;
left:0;
width:1280px;
height:1024px;
float:left;
overflow:hidden;
background-color:#111115;
margin:0;
padding:0;
line-height:0;
}

.screenCenterContainer {
position:relative;
top:0;
left:0;
width:100%;
float:left;
display:block;
height:1024px;
overflow:hidden;
background-color:#111115;
margin:0;
padding:0;
}

.screenCenterContainer table,
.screenCenterContainer tr,
.screenCenterContainer td {
position:relative;
top:0;
left:0;
margin:0;
padding:0;
border:none;
vertical-align: top;
line-height:0px;
float:left;
}

.screenCenterContainer table tr td {
position:relative;
top:0;
left:0;
padding:0 0 10px 0;
margin:0 0 5px 0;
background-color:#2b2b2e;
}

.screenLeftContainer {
position:relative;
top:0;
left:0;
width:49.8%;
height:1024px;
float:left;
margin:0;
padding:0;
overflow:hidden;
}

.screenRightContainer {
position:relative;
top:0;
left:0;
width:49.8%;
height:1028px;
float:right;
margin:0;
padding:0;
overflow:hidden;
}

.screenOverviewTitle {
position:relative;
width:100%;
float:left;
background-color:#444449;
margin:0;
padding:0;
letter-spacing:2px;
}

.screenOverviewTitle h2 {
float:left;
padding:5px 10px 5px 10px;
font-size:2em;
line-height:1em;
margin:0;
color:#ffffb3;
}

.screenOverviewTitle .screenOverviewDate {
float:left;
padding:5px 10px 5px 0px;
font-size:2em;
line-height:1em;
margin:0;
color:#eee;
}

.screenOverviewTitleContainer {
width:100%;
float:left;
}

.screenOverviewTitleContainer h2 {
font-size:3em;
line-height:1em;
color:#eee;
letter-spacing:1px;
padding:5px 20px 5px 10px;
margin:0;
width:auto;
float:left;
}

.screenOverviewTitleContainer p.screenOverviewDate {
position:relative;
left:10px;
font-size:2em;
line-height:1.2em;
color:#eee;
letter-spacing:1px;
padding:12px 0 0 0;
margin:0;
width:auto;
color:#a5a5b7;
}

.screenOverviewContentContainer {
font-size:2em;
line-height:1.2em;
color:#b3b3ff;
letter-spacing:1px;
float:left;
padding:0px 10px 0 10px;
width:auto;
}

.screenOverviewContentContainer h5.description {
text-align:left;
float:left;
padding:2px 10px 0 0;
width:auto;
}

.screenLeftContentAbstract {
position:relative;
left:10px;
font-size:2em;
line-height:1.2em;
color:#eee;
letter-spacing:1px;
padding:10px 10px 10px 0;
margin:0;
width:auto;
color:#eee;
float:left;
text-transform:none;
font-weight:normal;
}

.randomScreenImageContainer {
position:relative;
width:100%;
height:auto;
float:left;
padding:0;
overflow:hidden;
background-color:#2b2b2e;
}

.screenTitleWrapper {
position:relative;
margin:0 0 10px 0;
width:100%;
float:left;
display:block;
padding:0;
}

.screenImageWrapper {
position:relative;
margin:0 0 0 0;
width:100%;
display:block;
float:left;
padding:0 0 0 0;
}

.randomScreenImageContainer img {
color:#2b2b2e;
padding:0;
border-top:5px solid #151515;
border-bottom:5px solid #151515;
}

.screenBlockElement {
padding:0 0 0 0;
}

.noSpace {
margin:-5px 0 0 0;
}

/*********************************************/
/***************** end of css ****************/