@font-face {
 font-family: Miso light;
 src: url("../../../library/media/fonts/miso-light-webfont.woff") /* EOT file for IE */
}

@font-face {
 font-family: Miso regular;
 src: url("../../../library/media/fonts/miso-regular-webfont.woff") /* EOT file for IE */
}

@font-face {
 font-family: Delicious small caps;
 src: url("../../../library/media/fonts/Delicious-SmallCaps.otf") /* EOT file for IE */
}

@font-face {
 font-family: Delicious roman;
 src: url("../../../library/media/fonts/Delicious-Roman.otf") /* EOT file for IE */
}

/* -------------------------------- Reset Styles -------------------------------- */

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, fieldset, form, label, legend {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background: white;
	line-height: 1;
	color: black;
}

/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, td {
	font-weight: normal;
	text-align: left;
}
th{
    font-weight: bold;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
textarea{
    resize:none;
}

/* -------------------------------- General Styles -------------------------------- */

html { 
    
}

body{
/*    background: url('../../library/media/images/backgrndtop.png') no-repeat center 0 ;*/
}

#preload { display: none; z-index:-10; }

#horizon {
	position: absolute;
	left: 0;
	width: 100%;
}

@media all and (min-height: 610px){
	#horizon { top: 50%;}
}

.blue{
    color: #00b0f1;
}

.container{
    width:960px;
    margin: 0px auto 0px;
    margin-left: -480px;
    position: absolute;
    left: 50%;
    width: 960px;
    height: 610px;
    /*border: 1px solid black;*/
    overflow:visible;
}

@media all and (min-height: 610px){
	.container { top: -305px;}
}

#shell{ 
    position: absolute;  
    overflow: hidden;  
    width:100%; 
    left: 0; 
    top:50%;
    margin-top:-700px;
}
#sides { 
        width:960px;/*match width of content*/
        margin:auto; /*center*/
        height:450px; /*height of the affected area, including vertical positioning*/
        }
#sides:before{  
        position:relative; /*allows for positioning and stacking*/ 
        background-repeat:   no-repeat ;
        width:1050px;
        height:737px; /*height of image, since the image is the same i am setting the height here*/
        z-index:-1; /*stacking order*/
        display:inline;	  /*for IE*/ 
        content:""; 			
}
#sides:after{  
        position:relative; /*allows for positioning and stacking*/ 
        background-repeat:   no-repeat ;
        width:570px;
        height:500px; /*height of image, since the image is the same i am setting the height here*/
        z-index:-1; /*stacking order*/
        display:inline;	  /*for IE*/ 
        content:""; 			
}

#sides:after{
    margin-top:-168px;
    float: left; 
    left:-205px; /*same as width of element, positions element*/
    background-position: left top; /*other half of sprite*/
    background-image: url('../media/images/backgrndbottom_1.png');
}
#sides:before{   
    top:-0px; /*vertical positioning*/
    float: left ; 
    right:-495px ;/* same as width of element, positions element*/
    background-position: left top; /*other half of sprite*/
    background-image: url('../media/images/backgrndtop_1.png');
}

#background {
    position: absolute;
    z-index:-1;
    left:140px;
    top:0px;
}


#background1{background:url('/../library/media/images/backgrounds/background_1.png') no-repeat;width:876px;height:525px;}
#background2{background:url('/../library/media/images/backgrounds/background_2.png') no-repeat;width:811px;height:552px;}
#background3{background:url('/../library/media/images/backgrounds/background_3.png') no-repeat;width:860px;height:551px;}
#background4{background:url('/../library/media/images/backgrounds/background_4.png') no-repeat;width:860px;height:598px;}
#background5{background:url('/../library/media/images/backgrounds/background_5.png') no-repeat;width:960px;height:569px;} 
#background6{background:url('/../library/media/images/backgrounds/background_6.png') no-repeat;width:960px;height:496px;} 
#background7{background:url('/../library/media/images/backgrounds/background_7.png') no-repeat;width:960px;height:616px;} 
#background8{background:url('/../library/media/images/backgrounds/background_8.png') no-repeat;width:876px;height:589px;} 
#background9{background:url('/../library/media/images/backgrounds/background_9.png') no-repeat;width:876px;height:519px;} 
#background10{background:url('/../library/media/images/backgrounds/background_10.png') no-repeat;width:877px;height:560px;}
#background11{background:url('/../library/media/images/backgrounds/background_11.png') no-repeat;width:860px;height:517px;}
#background12{background:url('/../library/media/images/backgrounds/background_12.png') no-repeat;width:745px;height:564px;}
#background13{background:url('/../library/media/images/backgrounds/background_13.png') no-repeat;width:820px;height:538px;}
#background15{background:url('/../library/media/images/backgrounds/background_15.png') no-repeat;width:655px;height:586px;}
#background17{background:url('/../library/media/images/backgrounds/background_17.png') no-repeat;width:876px;height:628px;}
#background18{background:url('/../library/media/images/backgrounds/background_18.png') no-repeat;width:860px;height:576px;}
#background19{background:url('/../library/media/images/backgrounds/background_19.png') no-repeat;width:876px;height:607px;}
#background20{background:url('/../library/media/images/backgrounds/background_20.png') no-repeat;width:820px;height:551px;}


/*#background1 img{
    overflow: hidden;
}

#background2{
    position: absolute;
    z-index:-1;
    margin-top:0px;
    margin-left:0px;
}*/

#firstLogo{
    width:100%;
    text-align: center;
    margin-top:21px;
}

#logo{
    position: absolute;
    top:41px;
    right:49px;
    width:141px;
}

.transparent {
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; */
        width: 100%; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=80);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.8;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.8;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.8;
}

.shadow {
	-moz-box-shadow: 1px 2px 5px #000;
	-webkit-box-shadow: 1px 2px 5px #000;
	box-shadow: 1px 2px 5px #000;
	/* For IE 8 */
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";*/
	/* For IE 5.5 - 7 */
/*	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');*/
}

.fltlft{
    float:left;
}

.fltrgt{
    float:right;
}

.fltclr{
    float:none;
}

/* -------------------------------- Language -------------------------------- */

#languageWrapper
{
    height: 20px;
    padding-top:53px;
    padding-left: 82px;
}
#languageWrapper li a{color: #bcbec0;text-transform: uppercase; font-size: 17.01px; font-family: "Miso regular"}
#languageWrapper ul{list-style-type:none;margin:0 5px 0 0;padding:0;}
#languageWrapper li{text-indent:0px;float:left;margin:0;color: #bcbec0;}
#languageWrapper li:not(.first){padding-left: 5px;}
#languageWrapper li a:link, #languageWrapper li a:visited{text-decoration:none;display:block;}
/*#languageWrapper #nl a:link, #languageWrapper #nl a:visited{background:url('../../../library/media/images/language.png') no-repeat 0 -22px;}*/
#languageWrapper #nl a:hover, #languageWrapper #nl a.active_lang{/*background:url('../../../library/media/images/language.png') no-repeat 0 -1px;*/text-decoration: underline;}
/*#languageWrapper #fr a:link, #languageWrapper #fr a:visited{background:url('../../../library/media/images/language.png') no-repeat -20px -22px;}*/
#languageWrapper #fr a:hover, #languageWrapper #fr a.active_lang{/*background:url('../../../library/media/images/language.png') no-repeat -22px -1px;*/text-decoration: underline;}
/*#languageWrapper #en a:link, #languageWrapper #en a:visited{background:url('../../../library/media/images/language.png') no-repeat -64px -22px;}*/
#languageWrapper #en a:hover, #languageWrapper #en a.active_lang{/*background:url('../../../library/media/images/language.png') no-repeat -64px -1px;*/text-decoration: underline;}
/*#languageWrapper #de a:link, #languageWrapper #de a:visited{background:url('../../../library/media/images/language.png') no-repeat -43px -22px;}*/
#languageWrapper #de a:hover, #languageWrapper #de a.active_lang{/*background:url('../../../library/media/images/language.png') no-repeat -43px -1px;*/text-decoration: underline;}



nav{
    padding-top:53px;
    text-transform: uppercase;
}

nav ul{
    width:95px;
    text-align: right;
    list-style-type:none;
    margin:0;
    z-index: 2;
    padding-left:15px;
}

nav li{
    padding-bottom:5px;
}

nav li a{
    font-family: "Miso regular";
    text-decoration: none;
    font-size: 21.72px;
    height:27px;
}

nav li a:link, nav li a:visited{
    color: #bcbec0;
}

nav li a:hover, nav li a.active{
    color: #00b0f1
}

.subMenu {
        position:absolute;

        /*opacity: 0;*/
        margin:-23px 0 0 85px; 
        list-style:none;
        padding:2px 0 0 20px;
        text-align: left;
        width:200px;
        z-index:1;
}

.subMenu li {
        overflow: hidden;
}

ul.subMenu{
    width:0px;
}
ul.active{
    width:200px;
}

#quotes{
    text-align: right;
    margin-right: 49px;
    font-family: "Miso light";
    font-size: 26px;
    margin-bottom: 110px;
    margin-top:110px;
    height:52px;
}

footer{
    text-align: right;
    margin-right: 49px;
    font-family: "Miso light";
    font-size: 14px;
    color:#a7a9ac;
    padding-top:25px;
}

#quotationwrapper{
    padding-left: 82px;
    margin-top: -30px;
}

.rating{
    margin-top:-30px;
}

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

footer a:hover{
    color:#00b0f1;
}

footer .design a{
    color:#00b0f1;
    font-family: "Delicious small caps";
}

.me a{
    color:#00b0f1;
    font-family: "Miso regular";
}

#content{
    margin-left: 313px;
    width:569px;
    /*background: #fff;*/
    font-family: "Miso light";
    font-size: 18px;   
}

#content.small{
    margin-top:-68px;
    height:261px;
    background: url('/../library/media/images/contentbox.png') no-repeat; 
    margin-bottom: 100px;
}

#content.medium{
    margin-top:-118px;
    height:361px;
    background: url('/../library/media/images/contentbox_medium.png') no-repeat;
    margin-bottom: 50px;
}

#content.big{
    margin-top:-168px;
    height:461px;
    background: url('/../library/media/images/contentbox_big.png') no-repeat;    
}

#content.none{
    margin-top:-230px;
}

#closeContent div{
    
    width:17px;
    height:17px;
    position: relative;
    left:0px;
    bottom:0px;
}

#closeContent a:hover{
    
}

#contentTitle{
    padding: 10px;
    margin-bottom:10px;
    font-family: "Delicious small caps";
    padding-top:13px;
}

#contentText{
    /*overflow:auto;*/
    padding: 10px 20px 10px 0px;
    line-height: 1.2;
    font-size: 17px;
    font-family: "Miso light";
    margin:10px;
}

#contentText.small{
    height: 145px;    
}

#contentText.medium{
    height: 245px;    
}

#contentText.big{
    height: 345px;    
}

.smallerText{
    font-size:85%;
}

.smallestText{
    font-size:70%;
}

#contentwrapper{
    padding:20px;
}

.scroll{
    height: 120px;
    overflow:auto;
}


/* OVerlay */

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay h1 {
    font-family: "Delicious small caps";
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

.overlay p {
    font-family: "Miso regular";
    padding: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}