Template:GeorgiaTech/css/fancyboxes.css
From 2014.igem.org
(Difference between revisions)
Line 20: | Line 20: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | /* Name: Appetizer text */ | ||
+ | /* Description: Used to give a short and exciting description of the subsequent content. */ | ||
+ | p.intro { | ||
+ | font-style: italic; | ||
+ | font-size: 16px; | ||
+ | color: #808080; | ||
+ | margin-bottom:40px; | ||
+ | } | ||
+ | |||
+ | /* Name: DNA Sequence Code */ | ||
+ | /* Description: Used for highlighting DNA sequences and similar codes. */ | ||
+ | span.SequenceCode { | ||
+ | font-size: 14px; | ||
+ | font-family: Courier New; | ||
+ | color: red; | ||
+ | border-style: dashed; | ||
+ | border-width: 1px; | ||
+ | border-color: Gray; | ||
+ | padding: 0px 5px; | ||
+ | } | ||
+ | |||
+ | /* Name: Normal text */ | ||
+ | p { | ||
+ | font-size: 14px; | ||
+ | margin-top:10px; | ||
+ | font-family:Tahoma; | ||
+ | color: #3D3D3D; | ||
+ | } | ||
+ | |||
+ | /* Name: Paragraph intro */ | ||
+ | span.intro { | ||
+ | font-weight:Bold; | ||
+ | font-size: 15px; | ||
+ | font-family:Tahoma; | ||
+ | color: #3D3D3D; | ||
+ | } | ||
+ | |||
+ | /* Name: Important word */ | ||
+ | .specialWord { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | /* BASE */ | ||
+ | |||
+ | .BackgroundLayout { | ||
+ | |||
+ | width:100%; | ||
+ | left:0; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .MainLayout { | ||
+ | width:960px; | ||
+ | margin-right:auto; | ||
+ | margin-left:auto; | ||
+ | |||
+ | } | ||
+ | .EndFloatBlock { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* NAVIGATION */ | ||
+ | .top { | ||
+ | height:55px; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | padding-top: 22px; | ||
+ | padding-bottom: 10px; | ||
+ | /* background */ | ||
+ | background: #fefefe; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, #FFFFFF 20%, #EEEEEE 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#FFFFFF), color-stop(100%,#EEEEEE)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #FFFFFF 20%,#EEEEEE 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #FFFFFF 20%,#EEEEEE 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #FFFFFF 20%,#EEEEEE 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #FFFFFF 20%,#EEEEEE 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EEEEEE',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .bannerShadow { | ||
+ | /* border shadow */ | ||
+ | box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1); | ||
+ | -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1); | ||
+ | -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1); | ||
+ | } | ||
+ | |||
+ | .stick { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | z-index: 10000; | ||
+ | margin-top:-35px; | ||
+ | margin-right: -13px; | ||
+ | } | ||
+ | #sticky-anchor { | ||
+ | position: absolute; | ||
+ | margin-top: 35px; | ||
+ | } | ||
+ | .topWikiNavBackground { | ||
+ | height:18px; | ||
+ | margin-top: -32px; | ||
+ | background-color:rgb(221, 221, 221); | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/1/13/SDU2013_background2.jpg); | ||
+ | background-repeat: repeat; | ||
+ | } | ||
+ | |||
+ | .topMargin { | ||
+ | margin-top: 25px; | ||
+ | } | ||
+ | .NavbarContainer { | ||
+ | width:960px; | ||
+ | margin-right:auto; | ||
+ | margin-left:auto; | ||
+ | } | ||
+ | .NavbarContainerInner { | ||
+ | float:right; | ||
+ | } | ||
+ | .TopLogo { | ||
+ | height: 130px; | ||
+ | width:228px; | ||
+ | margin-top: -22px; | ||
+ | margin-left: -140px; | ||
+ | float:left; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/b/b9/SDU2013_TreeLogo.png); | ||
+ | background-size:contain; | ||
+ | background-repeat: no-repeat; | ||
+ | position:absolute; | ||
+ | } | ||
+ | .TopLogoAlt { | ||
+ | height: 89px; | ||
+ | width:170px; | ||
+ | margin-top: -15px; | ||
+ | margin-left: -80px; | ||
+ | float:left; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/0/0a/SDU2013_Leave.png); | ||
+ | background-size:170px; | ||
+ | background-repeat: no-repeat; | ||
+ | position:absolute; | ||
+ | } | ||
+ | .MenuButton { | ||
+ | margin: 35px 0px 0px 15px; | ||
+ | float: left; | ||
+ | font-size:12px; | ||
+ | font-family:Arial; | ||
+ | padding-bottom:2px; | ||
+ | position: relative; | ||
+ | |||
+ | } | ||
+ | .MenuButton:hover { | ||
+ | border-bottom-color:#C0C0C0; | ||
+ | border-bottom-width:3px; | ||
+ | border-bottom-style:solid; | ||
+ | } | ||
+ | .SelectedMenuButton { | ||
+ | border-bottom-color:#42B04F; | ||
+ | border-bottom-width:3px; | ||
+ | border-bottom-style:solid; | ||
+ | } | ||
+ | a.MenuButtonLink { | ||
+ | text-decoration:none; | ||
+ | color:black; | ||
+ | } | ||
+ | .IgemLogoLink { | ||
+ | margin: 17px 10px 0px 30px; | ||
+ | float: left; | ||
+ | font-size:14px; | ||
+ | } | ||
+ | .HeaderTitel { | ||
+ | float: left; | ||
+ | margin-left:70px; | ||
+ | margin-top:33px; | ||
+ | font-size:32px; | ||
+ | font-weight:bold; | ||
+ | position:absolute; | ||
+ | color:#3D3D3D; | ||
+ | } | ||
+ | .HeaderTitelAlt { | ||
+ | float: left; | ||
+ | margin-left:100px; | ||
+ | margin-top:33px; | ||
+ | font-size:32px; | ||
+ | font-weight:bold; | ||
+ | position:absolute; | ||
+ | color:#3D3D3D; | ||
+ | } | ||
+ | |||
+ | .menuPopup { | ||
+ | display: none; | ||
+ | margin-top: -8px; | ||
+ | padding-top: 18px; | ||
+ | position: absolute; | ||
+ | z-index: 99999; | ||
+ | right: -75px; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/3/36/SDU2013_Transparent.png); | ||
+ | } | ||
+ | .menuPopupContent { | ||
+ | width: 600px; | ||
+ | } | ||
+ | .menuPopupContentInner { | ||
+ | |||
+ | background: rgba(238, 238, 238, 0.93); | ||
+ | -webkit-border-radius: 0 0 10px 10px; | ||
+ | -moz-border-radius: 0 0 10px 10px; | ||
+ | border-radius: 0 0 10px 10px; | ||
+ | } | ||
+ | .menuItems { | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | .menuItems ul { | ||
+ | float: left; | ||
+ | margin: 0 20px 0 0; | ||
+ | } | ||
+ | .menuItems li { | ||
+ | font-size: 11px; | ||
+ | list-style-type: none; | ||
+ | list-style-image: none; | ||
+ | margin: 0 0 0 5px; | ||
+ | line-height: 1.3em; | ||
+ | } | ||
+ | .menuItems li.header { | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | margin: 0 0 2px 0; | ||
+ | color: #3D3D3D; | ||
+ | } | ||
+ | .menuItems li.header a { | ||
+ | color: #3D3D3D; | ||
+ | } | ||
+ | |||
+ | div.menuIntro { | ||
+ | padding: 1px 10px 10px 10px; | ||
+ | } | ||
+ | p.menuIntro { | ||
+ | font-size: 11px; | ||
+ | line-height: 1.3em; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 8px; | ||
+ | } | ||
+ | .warningBox { | ||
+ | background-color: #FEE9A6; | ||
+ | border-color: #EFBA6C; | ||
+ | border-width: 1px; | ||
+ | border-radius: 5px; | ||
+ | border-style: solid; | ||
+ | padding: 8px 8px 0px 8px; | ||
+ | font-weight: bold; | ||
+ | margin-top: 5px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | /* CONTENT */ | ||
+ | .contentBorder { | ||
+ | border: 1px solid #AAAAAA; | ||
+ | -webkit-border-radius: 7px; | ||
+ | -moz-border-radius: 7px; | ||
+ | border-radius: 7px; | ||
+ | -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | } | ||
+ | .expandedContent { | ||
+ | margin-left: -45px; | ||
+ | width: 930px; | ||
+ | } | ||
+ | .content { | ||
+ | font-family: Tahoma; | ||
+ | font-size: 14px; | ||
+ | color: #3D3D3D; | ||
+ | margin-bottom:60px; | ||
+ | background-color:white; | ||
+ | padding: 15px 60px; | ||
+ | |||
+ | border: 1px solid #cccccc; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -moz-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | } | ||
+ | |||
+ | .ContentHeader { | ||
+ | font-size:30px; | ||
+ | font-weight:bold; | ||
+ | font-family:Andy; | ||
+ | color:#3D3D3D; | ||
+ | margin-left:15px; | ||
+ | margin-bottom:5px; | ||
+ | } | ||
+ | |||
+ | iframe.TimeLine { | ||
+ | overflow: hidden; | ||
+ | border:none; | ||
+ | width: 958px; | ||
+ | height:450px; | ||
+ | margin:-15px -30px; | ||
+ | } | ||
+ | |||
+ | .boxgridHuge { | ||
+ | width: 885px; | ||
+ | height: 500px; | ||
+ | } | ||
+ | |||
+ | .boxgridBig, .boxgridMedium { | ||
+ | height: 550px; | ||
+ | } | ||
+ | .boxgridBig { | ||
+ | width: 615px; | ||
+ | float: left; | ||
+ | } | ||
+ | .boxgridMedium { | ||
+ | width: 298px; | ||
+ | float: left; | ||
+ | } | ||
+ | .boxgrid { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .boxgrid img{ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | border: 0; | ||
+ | } | ||
+ | .boxcaption{ | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | background: #000; | ||
+ | width: 100%; | ||
+ | opacity: .8; | ||
+ | padding: 10px; | ||
+ | /* For IE 5-7 */ | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); | ||
+ | /* For IE 8 */ | ||
+ | -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | ||
+ | } | ||
+ | .boxcaption:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | h2.onBlack { | ||
+ | color:white; | ||
+ | margin-top: -5px; | ||
+ | border: none; | ||
+ | Font-size: 26px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height:1em; | ||
+ | } | ||
+ | p.onBlack { | ||
+ | color:white; | ||
+ | margin-right:18px; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | p.onBlackIntro { | ||
+ | font-size:17px; | ||
+ | font-style: italic; | ||
+ | color:white; | ||
+ | margin-right:20px; | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* FOOTER */ | ||
+ | .footerShadow { | ||
+ | border-top-color: rgb(199, 199, 199); | ||
+ | border-top-width: 1px; | ||
+ | border-top-style: solid; | ||
+ | /* border shadow */ | ||
+ | box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1); | ||
+ | -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1); | ||
+ | -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1); | ||
+ | /* background */ | ||
+ | background: #fefefe; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(228, 228, 228) ), color-stop(100%,#FFFFFF )); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .footer { | ||
+ | position: fixed; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | height:35px; | ||
+ | width: 100%; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | .footerBack { | ||
+ | position:absolute; | ||
+ | height:100%; | ||
+ | top:0; | ||
+ | width:100%; | ||
+ | left:0px | ||
+ | } | ||
+ | |||
+ | .footerContainer { | ||
+ | width:960px; | ||
+ | margin-right:auto; | ||
+ | margin-left:auto; | ||
+ | margin-top: 10px; | ||
+ | overflow: visible; | ||
+ | } | ||
+ | .footerLogo { | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/4/4a/SDU2013_TopLogo.png); | ||
+ | height: 70px; | ||
+ | width: 70px; | ||
+ | bottom: 5px; | ||
+ | margin-left: -25px; | ||
+ | background-size: 66px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .footerLogoText { | ||
+ | float: left; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/c/c9/SDU2013_SduTextDarkSmall.png); | ||
+ | height: 14px; | ||
+ | width: 244px; | ||
+ | background-repeat: no-repeat; | ||
+ | margin-left: 25px; | ||
+ | margin-top: 2px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .footerBtn { | ||
+ | float: right; | ||
+ | padding: 5px 10px; | ||
+ | margin-top: -55px; | ||
+ | margin-left: 7px; | ||
+ | height: 75px; | ||
+ | position: relative; | ||
+ | display: none; | ||
+ | } | ||
+ | .footerBtn:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .footerBtnHeader { | ||
+ | font-size: 14px; | ||
+ | margin-top: -1px; | ||
+ | font-weight: bold; | ||
+ | margin-bottom: 3px; | ||
+ | font-family: Arial; | ||
+ | text-transform: capitalize; | ||
+ | color: black; | ||
+ | } | ||
+ | .footerBtnText { | ||
+ | margin-top: 0px; | ||
+ | font-size: 11px; | ||
+ | color: black; | ||
+ | } | ||
+ | .footerBtnPre { | ||
+ | font-family: Arial; | ||
+ | font-size: 10px; | ||
+ | font-weight: bold; | ||
+ | |||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | #btnFastForward, #btnNextChapter { | ||
+ | width: 180px; | ||
+ | } | ||
+ | #btnStartTour { | ||
+ | width: 380px; | ||
+ | } | ||
+ | #btnDigDeeper { | ||
+ | width: 255px; | ||
+ | } | ||
+ | #btnTheEnd { | ||
+ | width: 470px; | ||
+ | margin-top: -75px; | ||
+ | height: 90px; | ||
+ | } | ||
+ | .fastForwardIcon { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/5/55/SDU2013_ForwardBlack.png); | ||
+ | width: 32px; | ||
+ | height: 32px; | ||
+ | position: absolute; | ||
+ | margin-left: 152px; | ||
+ | } | ||
+ | .digDeeperIcon { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/b/b5/SDU2013_DigDeeperBlack2.png); | ||
+ | width: 32px; | ||
+ | height: 32px; | ||
+ | position: absolute; | ||
+ | margin-left: 227px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .nextChapterIcon { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/b/b5/SDU2013_DigDeeperBlack2.png); | ||
+ | width: 32px; | ||
+ | height: 32px; | ||
+ | position: absolute; | ||
+ | margin-left: 152px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .startTourIcon { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/5/5b/SDU2013_StartTour.png); | ||
+ | width: 32px; | ||
+ | height: 32px; | ||
+ | position: absolute; | ||
+ | margin-left: 350px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .tourEndIcon{ | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/e/ec/SDU2013_IgemLogoGrayscale.png); | ||
+ | width: 42px; | ||
+ | height: 32px; | ||
+ | position: absolute; | ||
+ | margin-left: 428px; | ||
+ | background-repeat: no-repeat; | ||
+ | margin-top: 4px; | ||
+ | background-size: 38px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #btnDigDeeper, #btnNextChapter, #GREEN { | ||
+ | background: rgb(205,235,142); /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgba(205,235,142,1) 0%, rgba(165,201,86,1) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,235,142,1)), color-stop(100%,rgba(165,201,86,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | #btnDigDeeper:hover { | ||
+ | background: rgb(221,241,177); /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgba(221,241,177,1) 0%, rgba(192,218,136,1) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,241,177,1)), color-stop(100%,rgba(192,218,136,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgba(221,241,177,1) 0%,rgba(192,218,136,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgba(221,241,177,1) 0%,rgba(192,218,136,1) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgba(221,241,177,1) 0%,rgba(192,218,136,1) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgba(221,241,177,1) 0%,rgba(192,218,136,1) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddf1b1', endColorstr='#c0da88',GradientType=0 ); /* IE6-9 */ | ||
+ | |||
+ | } | ||
+ | |||
+ | #btnFastForward, #btnStartTour, #ORANGE { | ||
+ | background: #ffc578; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | #btnFastForward:hover, #btnStartTour:hover { | ||
+ | background: #ffdbad; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, #ffdbad 0%, #f7b971 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdbad), color-stop(100%,#f7b971)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #ffdbad 0%,#f7b971 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #ffdbad 0%,#f7b971 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #ffdbad 0%,#f7b971 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #ffdbad 0%,#f7b971 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdbad', endColorstr='#f7b971',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | #btnTheEnd, #BLUE { | ||
+ | background: rgb(212,228,239); /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(212,228,239,1)), color-stop(100%,rgba(134,174,204,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgba(212,228,239,1) 0%,rgba(134,174,204,1) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=0 ); /* IE6-9 */ | ||
+ | |||
+ | } | ||
+ | |||
+ | /* TOUR MENU */ | ||
+ | .parentTourItem { | ||
+ | float:left; | ||
+ | width:auto; | ||
+ | height:100%; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/d/d7/SDU2013_UnselectedPoint.png); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center top; | ||
+ | text-align:center; | ||
+ | padding-top:22px; | ||
+ | padding-left:2px; | ||
+ | padding-right:2px; | ||
+ | |||
+ | } | ||
+ | .parentTourItemHidden { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .itemSelected { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/0/04/SDU2013_SelectedPoint.png); | ||
+ | } | ||
+ | .itemLastSelected { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/d/db/SDU2013_LastSelectedPoint.png); | ||
+ | } | ||
+ | .expandedTour { | ||
+ | |||
+ | height:100%; | ||
+ | float:left; | ||
+ | } | ||
+ | .expandedTourInner { | ||
+ | padding-top:17px; | ||
+ | float:left; | ||
+ | width:480px; | ||
+ | background-repeat:repeat-x; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/9/98/SDU2013_TourBar.png); | ||
+ | } | ||
+ | .tourBarCorners { | ||
+ | width:6px; | ||
+ | float:left; | ||
+ | height:100%; | ||
+ | background-repeat:no-repeat; | ||
+ | background-position-x:center; | ||
+ | |||
+ | } | ||
+ | .tourBend { | ||
+ | width:31px; | ||
+ | float:left; | ||
+ | height:100%; | ||
+ | background-repeat:no-repeat; | ||
+ | background-position-x:center; | ||
+ | |||
+ | } | ||
+ | .tourBendLeft { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/e/e5/SDU2013_TourbarBendLeft.png); | ||
+ | } | ||
+ | .tourBendLeftSelected { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/f/f5/SDU2013_TourbarBendLeftSelected.png); | ||
+ | } | ||
+ | .tourBendRight { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/1/16/SDU2013_TourbarBendRight.png); | ||
+ | } | ||
+ | .tourBarStart { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/0/03/SDU2013_TourStartBarSelected.png); | ||
+ | } | ||
+ | .tourBarEnd { | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/f/f1/SDU2013_TourEndBar.png); | ||
+ | } | ||
+ | .tourBoundingBox { | ||
+ | margin: 0 auto; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | top: 52px; | ||
+ | text-align:center; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | .tourBoundingBoxInner { | ||
+ | height:66px; | ||
+ | width:960px; | ||
+ | background: #EEEEEE; | ||
+ | display:inline-block; | ||
+ | padding-top:5px; | ||
+ | padding-left:10px; | ||
+ | padding-right:10px; | ||
+ | |||
+ | } | ||
+ | .stick2 { | ||
+ | position:fixed; | ||
+ | margin-right: -13px; | ||
+ | top: 52px; | ||
+ | } | ||
+ | .tourItemLabel { | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | background-color:white; | ||
+ | border-color:#B8B8B8; | ||
+ | border-style:solid; | ||
+ | border-width:1px; | ||
+ | text-align:center; | ||
+ | font-size:11px; | ||
+ | font-family:Arial; | ||
+ | padding: 0px 4px; | ||
+ | display:inline-block; | ||
+ | text-decoration:none; | ||
+ | color:black; | ||
+ | } | ||
+ | .tourItemLabelSelected { | ||
+ | background-color:#46B842; | ||
+ | color:white; | ||
+ | } | ||
+ | .tourItemLabelSelected:visited { | ||
+ | color:white !important; | ||
+ | } | ||
+ | .tourItemLabel:hover { | ||
+ | background-color:#46B842; | ||
+ | color:white !important; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | .tourItemLabel:visited { | ||
+ | color:black; | ||
+ | } | ||
+ | .tourItemLabelIndicator { | ||
+ | background-color:#fb9d23; | ||
+ | color:white !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* TOOLTIPS AND REFERENCES */ | ||
+ | |||
+ | .tooltipLink, .sourceReference { | ||
+ | cursor:pointer; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: right; | ||
+ | } | ||
+ | .tooltipLink { | ||
+ | font-weight:bold; | ||
+ | color: #004684; | ||
+ | } | ||
+ | .sourceReference { | ||
+ | padding-right:19px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/3/34/SDU2013_SourceIcon.png); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .tooltip { | ||
+ | display:none; | ||
+ | width:250px; | ||
+ | line-height: 1.1em; | ||
+ | font-size: 11px; | ||
+ | padding: 7px 9px; | ||
+ | font-family: Tahoma, Arial; | ||
+ | border: 1px solid #004684; | ||
+ | /* border shadow */ | ||
+ | -webkit-box-shadow: 4px 4px 12px rgba(50, 50, 50, 0.75); | ||
+ | -moz-box-shadow: 4px 4px 12px rgba(50, 50, 50, 0.75); | ||
+ | box-shadow: 4px 4px 12px rgba(50, 50, 50, 0.75); | ||
+ | /* background */ | ||
+ | background: #EEEEEE; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(228, 228, 228) ), color-stop(100%,#FFFFFF )); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .tooltipHeader { | ||
+ | font-size: 13px; | ||
+ | font-family: Tahoma, Arial; | ||
+ | font-weight: bold; | ||
+ | display: block; | ||
+ | margin-bottom:8px; | ||
+ | color: #FFFFFF; | ||
+ | background-color: #004684; | ||
+ | padding: 5px 5px 5px 10px; | ||
+ | margin-top: -8px; | ||
+ | margin-right: -10px; | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* IMAGES, GALLERIES AND DIALOGS */ | ||
+ | |||
+ | .dialog { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .normalImg, .popupImg, .imageGallery { | ||
+ | -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | padding: 5px; | ||
+ | background: white; | ||
+ | border: 1px solid #BBB; | ||
+ | } | ||
+ | .normalImg, .popupImg, .galleryImg, .imageGallery { | ||
+ | margin-bottom:10px; | ||
+ | font-size: 11px; | ||
+ | font-style: italic; | ||
+ | color: dimgray !important; | ||
+ | text-decoration: none; | ||
+ | font-family: Arial; | ||
+ | } | ||
+ | .normalImg:hover, .popupImg:hover, .galleryImg:hover, .imageGallery:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .normalImg img, .popupImg img, .galleryImg img { | ||
+ | display: block; | ||
+ | margin-bottom:2px; | ||
+ | border-width:0px; | ||
+ | } | ||
+ | .alignRight { | ||
+ | float: right; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | .alignLeft { | ||
+ | float: left; | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | .alignCenter { | ||
+ | padding: 10px 7px 3px 10px; | ||
+ | display: block; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | .galleryImg { | ||
+ | float: left; | ||
+ | margin-right: 5px; | ||
+ | width: 120px; | ||
+ | } | ||
+ | .galleryImg img { | ||
+ | width: 120px; | ||
+ | } | ||
+ | .imageGallery { | ||
+ | width: 625px; | ||
+ | } | ||
+ | .galleryMedium { | ||
+ | width: 375px !important; | ||
+ | } | ||
+ | .gallerySmall { | ||
+ | width: 125px !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ACCORDION */ | ||
+ | .accordion { | ||
+ | } | ||
+ | .accordionTitel { | ||
+ | cursor: pointer; | ||
+ | border: 1px solid #C7C7C7; | ||
+ | font-size: 13px; | ||
+ | font-family: Tahoma, Arial; | ||
+ | font-weight: bold; | ||
+ | padding: 3px 10px; | ||
+ | display: block; | ||
+ | margin-top:5px; | ||
+ | border-radius: 5px; | ||
+ | /* background */ | ||
+ | background: #EEEEEE; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(228, 228, 228) ), color-stop(100%,#FFFFFF )); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .accordionTitel:hover { | ||
+ | border: 1px solid #A5A5A5; | ||
+ | background: rgb(219,219,219); /* Old browsers */ | ||
+ | /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | ||
+ | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | ||
+ | background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(238,238,238,1) 99%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,219,219,1)), color-stop(99%,rgba(238,238,238,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */ | ||
+ | } | ||
+ | |||
+ | .accordion div.pane { | ||
+ | border-radius: 5px; | ||
+ | padding: 10px; | ||
+ | margin-top:3px; | ||
+ | margin-bottom: 10px; | ||
+ | display: none; | ||
+ | border: 1px solid #C7C7C7; | ||
+ | } | ||
+ | .accordion div.current { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* RESULT PAGE */ | ||
+ | .resultContainer { | ||
+ | width: 700px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | .groupTitel { | ||
+ | border-bottom-width: 2px; | ||
+ | border-bottom-style: solid; | ||
+ | border-bottom-color: #808080; | ||
+ | background-position: right top; | ||
+ | background-repeat: no-repeat; | ||
+ | font-size: 28px; | ||
+ | padding-left: 2px; | ||
+ | margin-bottom: 10px; | ||
+ | margin-top: 10px; | ||
+ | padding-top: 40px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | .Bronze { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/7/76/SDU2013_Bronze.png); | ||
+ | color: #D1A45F; | ||
+ | } | ||
+ | .Silver { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/1/19/SDU2013_Silver.png); | ||
+ | color: #B1B1B1; | ||
+ | } | ||
+ | .Gold { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/e/eb/SDU2013_Gold.png); | ||
+ | color: #EEC452; | ||
+ | } | ||
+ | .resultGroup { | ||
+ | margin-left: 20px; | ||
+ | padding-left: 55px; | ||
+ | background-position: left top; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/1/1b/SDU2013_YesIcon.png); | ||
+ | padding-bottom: 2px; | ||
+ | margin-bottom: 10px; | ||
+ | margin-right: 20px; | ||
+ | |||
+ | } | ||
+ | .resultTitel { | ||
+ | font-weight: bold; | ||
+ | font-size: 14px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | .resultText { | ||
+ | font-size: 12px; | ||
+ | margin-top: 0px; | ||
+ | } | ||
+ | |||
+ | /* VACCORDION */ | ||
+ | /* Vertical Accordion Style */ | ||
+ | .va-container{ | ||
+ | position:relative; | ||
+ | overflow: hidden; | ||
+ | |||
+ | } | ||
+ | .va-wrapper{ | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | position:relative; | ||
+ | overflow:hidden; | ||
+ | background:#000; | ||
+ | } | ||
+ | .va-slice{ | ||
+ | cursor:pointer; | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | left:0px; | ||
+ | overflow:hidden; | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | .va-title{ | ||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | font-size:28px; | ||
+ | margin-left:20px; | ||
+ | color:#fff; | ||
+ | text-shadow: 0px 0px 1px white; | ||
+ | font-weight: bold; | ||
+ | width: 340px; | ||
+ | background-color: rgba(0, 0, 0, 0.8); | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | .va-title-sub { | ||
+ | font-size:18px; | ||
+ | font-weight: normal; | ||
+ | float: left; | ||
+ | margin-right: 15px; | ||
+ | margin-top: 3px; | ||
+ | width: 140px; | ||
+ | } | ||
+ | .va-content{ | ||
+ | display:none; | ||
+ | margin-left:20px; | ||
+ | margin-left: 20px; | ||
+ | margin-top: 20px; | ||
+ | width: 330px; | ||
+ | background-color: rgba(0, 0, 0, 0.8); | ||
+ | padding: 5px 15px 10px 15px; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | max-height: 380px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .aboutLabel, .aboutText { | ||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | color: #fff; | ||
+ | text-shadow: 0px 0px 1px white; | ||
+ | font-size: 14px; | ||
+ | |||
+ | } | ||
+ | .aboutLabel { | ||
+ | text-transform: uppercase; | ||
+ | font-size: 16px; | ||
+ | font-style: italic; | ||
+ | margin-top: 12px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .va-slice ul{ | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | .va-slice ul li{ | ||
+ | float:left; | ||
+ | margin:0px 2px; | ||
+ | } | ||
+ | .va-slice ul li a{ | ||
+ | color:#000; | ||
+ | background:#eede2f; | ||
+ | padding:3px 6px; | ||
+ | font-size:14px; | ||
+ | font-family:'PT Sans', sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | .va-slice ul li a:hover{ | ||
+ | background:#000; | ||
+ | color:#fff; | ||
+ | text-shadow:none; | ||
+ | } | ||
+ | .va-nav span{ | ||
+ | width:40px; | ||
+ | height:25px; | ||
+ | background:transparent no-repeat center center; | ||
+ | position:absolute; | ||
+ | top:-35px; | ||
+ | left:50%; | ||
+ | margin-left:-20px; | ||
+ | text-indent:-9000px; | ||
+ | opacity:0.7; | ||
+ | cursor:pointer; | ||
+ | display:none; | ||
+ | z-index:100; | ||
+ | } | ||
+ | .va-nav span.va-nav-next{ | ||
+ | |||
+ | top:auto; | ||
+ | bottom:-35px; | ||
+ | } | ||
+ | .va-nav span:hover{ | ||
+ | opacity:1.0; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Revision as of 12:30, 23 June 2014