/* CSS for the TFS media archive
*/ 

@media print {
#col1   {position: absolute; top: 106px; left: 26px; width: 145px;}
#col2   {position: absolute; top: 106px; left: 183px; width: 400px;}
#col2in   {max-height: 1200px; max-width: 400px; padding-right: 1rem; overflow: auto; cursor: pointer;}
#col2in:hover { max-height: 1200px; max-width: 400px;}
#col3   {padding-top: 1rem;}
#col3index   {position: absolute; top: 106px; left: 183px; }
#footer {display: none;}
}

/* CSS for the TFS media archive
*/ 

@media screen and (max-width: 600px) {
#col1   {position: absolute; top: 106px; left: -200px; width: 145px; }
#col2   {position: absolute; top: 106px; left: 26px;}
#col2in   {max-height: 300px; max-width: 400px; padding-right: 1rem; overflow: auto; cursor: pointer;}
#col2in:hover { max-height: 1200px; max-width: 400px;}
#col3   {padding-top: 1rem;}
#col3index   {position: absolute; top: 106px; left: 26px; }
#footer {position: absolute; top: 50px; left: -270px;}
img.preview {width: 200px;}
}

@media screen and (min-width: 600px) and (max-width: 800px) {
#col1   {position: absolute; top: 106px; left: 26px; width: 145px;}
#col2   {position: absolute; top: 106px; left: 183px; width: 400px;}
#col2in   {max-height: 300px; max-width: 400px; padding-right: 1rem; overflow: auto; cursor: pointer;}
#col2in:hover { max-height: 1200px; max-width: 400px;}
#col3   {padding-top: 1rem;}
#col3index   {position: absolute; top: 106px; left: 183px; }
#footer {position: absolute; top: 22px; left: -130px;}
}


@media screen and (min-width: 800px)  {
#col1   {position: absolute; top: 106px; left: 26px; width: 145px;}
#col2   {position: absolute; top: 106px; left: 183px; width: 290px;}
#col3   {position: absolute; top: 0px; left: 370px;}
#col3index   {position: absolute; top: 106px; left: 183px; max-width: 920px;}
}

#layout {margin: 26px 20px; width: 100%; padding:12px; padding-top: 0px; color: #777; font-family: Arial, Helvetica, sans-serif;}
#header {position: absolute; top: 20px; left: 26px; height: 86px;}
#_col1   {position: absolute; top: 106px; left: 26px; width: 145px;}
#_col2   {position: absolute; top: 106px; left: 183px; width: 290px;}
#_col3   {position: absolute; top: 106px; left: 552px;}

#medianav {width: 400px; margin-top: 8px; margin-bottom: 8px;}
#layout, #first, banner, #col1, #col2, #footer, #second, #col3 {}
#highres {text-decoration: underline;}
#externallinks {position: absolute; top: 25px; left: 517px; width: 125px; height: 75px;}
#langselect {position: absolute; top: 31px; left: 677px; width: 100px; height: 75px;}
#lang-de, #lang-en {cursor: pointer; display: block; float: left; width: 25px; text-align: center;}
.lang-sep {display: block; float: left; text-align: center;}
img.preview {overflow: hidden; padding-right: 8px; padding-bottom: 5px;}
img.preview-fixed {width: 176px; overflow: hidden; padding-right: 8px; padding-bottom: 6px;}
#icon-facebook a       {display: block; float: left; width: 25px; height: 25px; background-image: url('/static/Facebook.jpg');}
#icon-twitter a       {display: block; float: left; width: 25px; height: 25px; background-image: url('/static/Twitter.jpg');}
#icon-pinterest a       {display: block; float: left; width: 25px; height: 25px; background-image: url('/static/Pinterest.jpg');}
#icon-youtube a       {display: block; float: left; width: 25px; height: 25px; background-image: url('/static/Youtube.jpg');}
#icon-shop a       {display: block; float: left; width: 25px; height: 25px; background-image: url('/static/Shop.jpg');}
a {color: black; text-decoration: none;}
.hidden {display: none;}
.strong {font-weight: bold; color: black;}
.navh1 {cursor: pointer; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: normal; font-variant: normal; font-style: normal; line-height: 20px; text-decoration: none; text-transform: none;}
.navh2 a {color: #777;}
.navh2 a:hover {color: black;}
.navh2 {color: #777; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: light; font-variant: normal; font-style: normal; line-height: 15px; text-decoration: none; text-transform: none;}
#col2, #col3 {color: #777; font-family: Times New Roman, Times, serif; font-size: 13px; font-weight: normal; font-variant: normal; font-style: normal; line-height: 15px; text-transform: none;}
#col2 h1 {margin-top: 5px; margin-bottom: -6px; color: #777; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: normal; font-variant: normal; font-style: normal; line-height: 8px; text-decoration: none; text-transform: none;}
html, body {background-color: white; color: black; margin: 0; padding: 0;}
body {font-size: 13px; font-family: Helvetica, 'MS Sans Serif', sans-serif; line-height: 15px; color: #777;}
h1, h2, h3 {margin: 1.5em 0 0.5em 0;}
h1 {font-size: 1.667em;}
h2 {font-size: 1em;}
h3, h4, h5, h6 {font-size: 1em;}
textarea, select, input, table {font-size: 1em;}
#navigation {padding-bottom: 1em;}
preview {display: block; position: relative; float: left; overflow: hidden; margin: 0 8px 8px 0; height: 242px; width: 176px;}
previewcaption {position: absolute; background: black; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; width: 242px; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease;}
preview:hover previewcaption {opacity: 1;}
preview:hover:before {opacity: 0;}
.caption-bot:before {bottom: 10px; left: 10px;}
.caption-bot previewcaption {left: 0; bottom: -30%;}
.caption-bot:hover previewcaption {bottom: 0;}


#externallinks {position: absolute; top: 25px; left: 517px; width: 125px; height: 75px;}
#icon-shop a       {display: block; float: left; width: 25px; height: 25px; background-image: url('/static/Shop.jpg');}

#col1 .navh1 {  font-family: Arial, Helvetica, sans-serif;  font-size: 15px;  line-height: 20px;  letter-spacing: 0em;}
#col1 .navh2 {  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  line-height: 15px;  letter-spacing: 0em;}
#col2 {  font-family: Arial, Helvetica, sans-serif;  font-size: 11px;  line-height: 11px;  letter-spacing: 0em;}
#col2 h1 {  font-family: Arial, Helvetica, sans-serif;  font-size: 15px;  line-height: 8px;  letter-spacing: 0em;}
#col2 section {  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  line-height: 16px;  letter-spacing: 0em;}
#col3 #mediadescription {  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  line-height: 15px;  letter-spacing: 0em;}
#col3 #mediadownload {  font-family: 'Times New Roman', Times, serif;  font-size: 13px;  line-height: 15px;  letter-spacing: 0em;}
#col3 #medialink {  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  line-height: 15px;  letter-spacing: 0em;}
#col3 #mediatitle {  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  line-height: 15px;  letter-spacing: 0em;}