Difference between revisions of "Team:Cork Ireland/Collaborations"
Line 43: | Line 43: | ||
#menuContainer{ | #menuContainer{ | ||
display: none; | display: none; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Credit: http://www.templatemo.com | ||
+ | */ | ||
+ | |||
+ | body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | line-height: 1.5em; | ||
+ | font-family: Arial, "Arial", Times, serif; | ||
+ | font-size: 12px; | ||
+ | color: #8a8a79; | ||
+ | background: #565758 ; | ||
+ | } | ||
+ | |||
+ | ul li:hover { | ||
+ | color: #7F2416; | ||
+ | } | ||
+ | |||
+ | a:link, a:visited { color: #c0f048; text-decoration: none; font-weight: normal; } | ||
+ | a:active, a:hover { color: #FFFF00; text-decoration: underline; } | ||
+ | |||
+ | p { margin: 0px; padding: 0px; font-size: 1.2vw; color: #000; line-height: 1.5vw;} | ||
+ | |||
+ | img { margin: 0px; padding: 0px; border: none; } | ||
+ | |||
+ | .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } | ||
+ | |||
+ | .cleaner_h10 { clear: both; width:100%; height: 10px; } | ||
+ | .cleaner_h20 { clear: both; width:100%; height: 20px; } | ||
+ | .cleaner_h30 { clear: both; width:100%; height: 30px; } | ||
+ | .cleaner_h40 { clear: both; width:100%; height: 40px; } | ||
+ | .cleaner_h50 { clear: both; width:100%; height: 50px; } | ||
+ | .cleaner_h60 { clear: both; width:100%; height: 60px; } | ||
+ | |||
+ | .divider { | ||
+ | clear: both; | ||
+ | padding-bottom: 15px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | .fl { float: left; } | ||
+ | .fr { float: right; } | ||
+ | |||
+ | .m_right { margin-right: 30px; } | ||
+ | |||
+ | .button a { | ||
+ | display: block; | ||
+ | width: 125px; | ||
+ | height: 26px; | ||
+ | padding: 9px 0 0 15px; | ||
+ | color: #343c1d; | ||
+ | font-size: 11px; | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .button a:hover { | ||
+ | color: #c0f048; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | margin: 0px; | ||
+ | padding: 2px 0; | ||
+ | font-size: 30px; | ||
+ | font-weight: bold; | ||
+ | color: #3EDAAD; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | margin: 0px; | ||
+ | padding: 2px 0; | ||
+ | font-size: 30px; | ||
+ | font-weight: normal; | ||
+ | color: #3EDAAD; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | margin: 0 0 10px 0; | ||
+ | padding: 0; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | color: #3EDAAD#8a8a79; | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .image_wrapper { | ||
+ | border: 1px solid #ffffff; | ||
+ | margin-top: 3px; | ||
+ | margin-bottom: 5px; | ||
+ | height: auto; | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | .fl_image { | ||
+ | float: left; | ||
+ | margin-right: 15px; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .fr_image { | ||
+ | float: right; | ||
+ | margin-left: 15px; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .fc_image { | ||
+ | float: center; | ||
+ | margin-left: 15px; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .list_01 { | ||
+ | margin: 0 0 20px 40px; | ||
+ | padding: 0px; | ||
+ | list-style: decimal; | ||
+ | } | ||
+ | |||
+ | .list_01 li { | ||
+ | margin: 0 0 0 0; | ||
+ | padding: 0 0 10px 0; | ||
+ | } | ||
+ | |||
+ | /* title bar */ | ||
+ | |||
+ | #bar_wrapper { | ||
+ | width: 100%; | ||
+ | height: 100px; | ||
+ | margin: 0 auto; | ||
+ | background-color:#444444; | ||
+ | } | ||
+ | |||
+ | #title_bar { | ||
+ | width: 980px; | ||
+ | height: 100px; | ||
+ | margin: 0 auto; | ||
+ | background-color: #444444; | ||
+ | padding-top: 15px; | ||
+ | } | ||
+ | |||
+ | #templatemo_site_title_bar #site_title { | ||
+ | float: left; | ||
+ | width: 300px; | ||
+ | margin-left: 50px; | ||
+ | padding: 35px 0 0 0; | ||
+ | } | ||
+ | |||
+ | #site_title h1 a { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | font-size: 32px; | ||
+ | color: #a7cf3a; | ||
+ | font-weight: normal; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #site_title h1 a:hover { | ||
+ | font-weight: normal; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #site_title h1 a span { | ||
+ | display: block; | ||
+ | margin-top: 10px; | ||
+ | font-size: 14px; | ||
+ | color: #5c5c5c; | ||
+ | } | ||
+ | |||
+ | #templatemo_site_title_bar #top_menu { | ||
+ | float:right; | ||
+ | margin: 65px 50px 0 0; | ||
+ | padding: 0px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | /* end of title bar */ | ||
+ | |||
+ | |||
+ | /* banner */ | ||
+ | #templatemo_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #templatemo_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/5/5f/BannerToSizeCork.jpg") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #templatemo_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #banner_content h2 { | ||
+ | color: #E02121; | ||
+ | font-size: 26px; | ||
+ | font-weight: normal; | ||
+ | line-height: 30px; | ||
+ | margin: 0 0 20px 0; | ||
+ | padding: 2px 0; | ||
+ | } | ||
+ | |||
+ | #banner_content p { | ||
+ | color: #8ba151; | ||
+ | font-size: 18px; | ||
+ | margin-bottom: 20px; | ||
+ | line-height: 24px; | ||
+ | } | ||
+ | |||
+ | #banner_content a { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | #templatemo_banner #gallery { | ||
+ | float: left; | ||
+ | margin: 50px 0 0 50px; | ||
+ | position:relative; | ||
+ | width: 380px; | ||
+ | height: 180px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | #gallery a { | ||
+ | float:left; | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | #gallery a img { | ||
+ | border:none; | ||
+ | width: 380px; | ||
+ | height: 180px; | ||
+ | } | ||
+ | |||
+ | #gallery a.show { | ||
+ | z-index:500 | ||
+ | } | ||
+ | |||
+ | #gallery .caption { | ||
+ | z-index:600; | ||
+ | overflow: hidden; | ||
+ | background-color:#000; | ||
+ | color:#ffffff; | ||
+ | width: 380px; | ||
+ | height: 45px; | ||
+ | margin-bottom: 10px; | ||
+ | position:absolute; | ||
+ | bottom:-2px; | ||
+ | } | ||
+ | |||
+ | #gallery .caption .content { | ||
+ | margin:5px; | ||
+ | font-size: 11px; | ||
+ | } | ||
+ | |||
+ | #gallery .caption .content h3 { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | color:#1DCCEF; | ||
+ | } | ||
+ | |||
+ | /* end of banner */ | ||
+ | |||
+ | /* menu */ | ||
+ | |||
+ | #templatemo_menu_wrapper { | ||
+ | width: 100%; | ||
+ | height: 75px; | ||
+ | min-width: 1300px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #templatemo_menu { | ||
+ | margin: 0px auto; | ||
+ | background: #3EDAAD; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul ul { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul li:hover > ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul { | ||
+ | |||
+ | padding: 0 20px; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | display: inline-table; | ||
+ | } | ||
+ | #templatemo_menu ul:after { | ||
+ | content: ""; clear: both; display: block; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul li { | ||
+ | float: left; | ||
+ | } | ||
+ | #templatemo_menu ul li:hover { | ||
+ | background: #4b545f; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul li:hover a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul li a { | ||
+ | display: block; padding: 25px 30px; | ||
+ | color: #212629; text-decoration: none; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul ul { | ||
+ | background: #5f6975; border-radius: 0px; padding: 0; | ||
+ | position: absolute; top: 100%; | ||
+ | } | ||
+ | #templatemo_menu ul ul li { | ||
+ | float: none; | ||
+ | border-top: 1px solid #6b727c; | ||
+ | border-bottom: 1px solid #575f6a; position: relative; | ||
+ | } | ||
+ | #templatemo_menu ul ul li a { | ||
+ | padding: 15px 40px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul ul li a:hover { | ||
+ | background: #4b545f; | ||
+ | } | ||
+ | |||
+ | #templatemo_menu ul ul ul { | ||
+ | position: absolute; left: 100%; top:0; | ||
+ | } | ||
+ | |||
+ | /* end of menu */ | ||
+ | |||
+ | /* content */ | ||
+ | |||
+ | #templatemo_content { | ||
+ | clear: both; | ||
+ | width: 940px; | ||
+ | padding: 0 20px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #templatemo_content h2 { | ||
+ | color: #E02121; | ||
+ | height: 28px; | ||
+ | padding: 5px 0 0 45px; | ||
+ | margin: 0 0 25px 0; | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | |||
+ | #side_column { | ||
+ | float: right; | ||
+ | width: 260px; | ||
+ | padding: 30px; | ||
+ | } | ||
+ | |||
+ | #side_column h2 { | ||
+ | } | ||
+ | |||
+ | #main_column { | ||
+ | float: left; | ||
+ | width: 540px; | ||
+ | padding: 20px 40px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #main_column p { | ||
+ | text-align: justify; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .side_column_box { | ||
+ | clear: both; | ||
+ | margin-bottom: 15px; | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .news_section { | ||
+ | clear: both; | ||
+ | margin-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .inputfield { | ||
+ | height: 16px; | ||
+ | width: 245px; | ||
+ | padding: 2px 5px; | ||
+ | margin: 0 0 10px 0; | ||
+ | font-size: 12px; | ||
+ | font-variant: normal; | ||
+ | line-height: normal; | ||
+ | } | ||
+ | |||
+ | .submitbutton { | ||
+ | float: right; | ||
+ | margin: 0px; | ||
+ | padding: 0 6px 3px 6px; | ||
+ | cursor: pointer; | ||
+ | font-size: 12px; | ||
+ | text-align: center; | ||
+ | vertical-align: bottom; | ||
+ | white-space: pre; | ||
+ | } | ||
+ | |||
+ | .section_w540 { | ||
+ | clear: both; | ||
+ | width: 540px; | ||
+ | } | ||
+ | |||
+ | .section_260 { | ||
+ | float: left; | ||
+ | width: 260px; | ||
+ | } | ||
+ | |||
+ | /* end of content */ | ||
+ | |||
+ | /* footer */ | ||
+ | |||
+ | #templatemo_footer_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | margin: 0 auto; | ||
+ | background: #fff; | ||
+ | } | ||
+ | |||
+ | #templatemo_footer { | ||
+ | width: 940px; | ||
+ | padding: 40px 20px; | ||
+ | margin: 0 auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #templatemo_footer a { | ||
+ | font-weight: bold; | ||
+ | color: #939382; | ||
+ | } | ||
+ | |||
+ | #templatemo_footer .footer_menu { | ||
+ | margin: 0 0 5px 0; | ||
+ | padding: 0px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | .footer_menu li { | ||
+ | margin: 0px; | ||
+ | padding: 0 20px; | ||
+ | display: inline; | ||
+ | border-right: 1px solid #939382; | ||
+ | } | ||
+ | |||
+ | .footer_menu .last_menu { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | /* end of footer */ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*Normal state*/ | ||
+ | .link { | ||
+ | opacity: 0.5; | ||
+ | height:auto; | ||
+ | max-width:100%; | ||
+ | display: inline; | ||
+ | padding: 5%; | ||
+ | } | ||
+ | |||
+ | /*Hover state*/ | ||
+ | .link:hover { | ||
+ | opacity: 1.0; | ||
+ | height:auto; | ||
+ | max-width:100%; | ||
+ | display: inline; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #templatemo_column { | ||
+ | clear: both; | ||
+ | width: 620px; | ||
+ | padding: 0; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #split { | ||
+ | width:50%vw; | ||
+ | height:50%vw; | ||
+ | margin-right:10px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | #splitR { | ||
+ | width:50%vw; | ||
+ | height:50%vw; | ||
+ | margin-left:10px; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #templatemo_column h2 { | ||
+ | color: #E02121; | ||
+ | height: 28px; | ||
+ | padding: 5px 0 0 5px; | ||
+ | margin: 0 auto; | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | |||
+ | #main_content { | ||
+ | float: center; | ||
+ | width: 540px; | ||
+ | padding: 20px 40px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #main_content p { | ||
+ | text-align: justify; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .imgholder { | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | /*Hover state*/ | ||
+ | .imgholder:hover { | ||
+ | opacity: 1.0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* clearfix */ | ||
+ | .clearfix { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | #wrapper{ | ||
+ | width:720px; | ||
+ | margin:0 auto 3em; | ||
+ | text-align:center; | ||
+ | float: left; | ||
+ | } | ||
+ | #wrapper h2{ | ||
+ | margin:0; | ||
+ | color:#0082E0; | ||
+ | text-shadow:1px 1px 1px #777; | ||
+ | font-size:33px; | ||
+ | font-family:Arial Narrow, Arial, sans-serif; | ||
+ | } | ||
+ | #wrapper h2 span{ | ||
+ | color:#56B8FF; | ||
+ | } | ||
+ | #wrapper hgroup h3{ | ||
+ | font-style:italic; | ||
+ | font-weight:normal; | ||
+ | font-size:18px; | ||
+ | text-shadow:0 1px 0 #fafafa; | ||
+ | color:#444; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | .imgholder{ | ||
+ | position:relative; | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | border-radius:100px; | ||
+ | float:bottom; | ||
+ | margin:75px 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* thumbnails style */ | ||
+ | .imgholder img{ | ||
+ | position:absolute; | ||
+ | left:0; | ||
+ | top:0; | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | z-index:5; | ||
+ | border-radius:100px; | ||
+ | -moz-border-radius:100px; | ||
+ | -webkit-border-radius:100px; | ||
+ | opacity:0.3; | ||
+ | filter: alpha(opacity = 30); | ||
+ | box-shadow:0 0 5px #000; | ||
+ | -moz-box-shadow:0 0 5px #000; | ||
+ | -webkit-box-shadow:0 0 5px #000; | ||
+ | |||
+ | transform: scale(0.5,0.5); | ||
+ | -ms-transform: scale(0.5,0.5); | ||
+ | -moz-transform: scale(0.5,0.5); | ||
+ | -webkit-transform: scale(0.5,0.5); | ||
+ | |||
+ | transition: | ||
+ | opacity 1s, | ||
+ | transform 1s ease-in-out 0.3s; | ||
+ | -moz-transition: | ||
+ | opacity 1s, | ||
+ | -moz-transform 1s ease-in-out 0.3s; | ||
+ | -webkit-transition: | ||
+ | opacity 1s, | ||
+ | -webkit-transform 1s ease-in-out 0.3s; | ||
+ | } | ||
+ | .imgholder:hover img{ | ||
+ | opacity:1; | ||
+ | filter: alpha(opacity = 100); | ||
+ | transform: scale(1,1); | ||
+ | -ms-transform: scale(1,1); | ||
+ | -moz-transform: scale(1,1); | ||
+ | -webkit-transform: scale(1,1); | ||
+ | } | ||
+ | |||
+ | .imgholder figcaption{ | ||
+ | position:absolute; | ||
+ | left:-5px; | ||
+ | top:40%; | ||
+ | width:130px; | ||
+ | color: #008702; | ||
+ | font-weight:bold; | ||
+ | text-shadow:-1px -1px 0 #fff; | ||
+ | z-index:4; | ||
+ | |||
+ | transition: | ||
+ | top 0.5s ease-out; | ||
+ | -moz-transition: | ||
+ | top 0.5s ease-out; | ||
+ | -webkit-transition: | ||
+ | top 0.5s ease-out; | ||
+ | } | ||
+ | .imgholder:hover figcaption{ | ||
+ | top:120%; | ||
+ | } | ||
+ | /* decorations style */ | ||
+ | .imgholder .circle{ | ||
+ | position:absolute; | ||
+ | border-radius:100px; | ||
+ | -moz-border-radius:100px; | ||
+ | -webkit-border-radius:100px; | ||
+ | } | ||
+ | .imgholder .outer1{ | ||
+ | top:-8px; | ||
+ | left:-8px; | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | z-index:2; | ||
+ | |||
+ | border:8px solid; | ||
+ | border-color:#e2fcde; | ||
+ | box-shadow:0 0 3px #baffaf; | ||
+ | -moz-ox-shadow:0 0 3px #baffaf; | ||
+ | -webkit-box-shadow:0 0 3px #baffaf; | ||
+ | |||
+ | background: #ffffff; | ||
+ | background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e3ffe2 100%); | ||
+ | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e3ffe2)); | ||
+ | background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e3ffe2 100%); | ||
+ | background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e3ffe2 100%); | ||
+ | background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e3ffe2 100%); | ||
+ | background: radial-gradient(center, ellipse cover, #ffffff 0%,#e3ffe2 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3ffe2',GradientType=1 ); | ||
+ | |||
+ | transform:rotate(90deg); | ||
+ | -ms-transform:rotate(90deg); | ||
+ | -moz-transform:rotate(90deg); | ||
+ | -webkit-transform:rotate(90deg); | ||
+ | |||
+ | transition: | ||
+ | transform 1.8s ease-in-out, | ||
+ | box-shadow 1s ease-out, | ||
+ | border-color 1.5s; | ||
+ | -moz-transition: | ||
+ | -moz-transform 1.8s ease-in-out, | ||
+ | -moz-box-shadow 1s ease-out, | ||
+ | border-color 1.5s; | ||
+ | -webkit-transition: | ||
+ | -webkit-transform 1.8s ease-in-out, | ||
+ | -webkit-box-shadow 1s ease-out, | ||
+ | border-color 1.5s; | ||
+ | } | ||
+ | .imgholder:hover .outer1{ | ||
+ | border-color:#08ea00 #8aff7f #08ea00 #8aff7f; | ||
+ | box-shadow:0 0 10px #02e211; | ||
+ | -moz-box-shadow:0 0 10px #02e211; | ||
+ | -webkit-box-shadow:0 0 10px #02e211; | ||
+ | transform:rotate(-10deg); | ||
+ | -ms-transform:rotate(-10deg); | ||
+ | -moz-transform:rotate(-10deg); | ||
+ | -webkit-transform:rotate(-10deg); | ||
+ | } | ||
+ | .imgholder .outer2{ | ||
+ | top:-18px; | ||
+ | left:-18px; | ||
+ | width:136px; | ||
+ | height:136px; | ||
+ | z-index:1; | ||
+ | |||
+ | border:10px solid; | ||
+ | border-color: #fcd6d6 #ff9b9b #fcd6d6 #ff9b9b; | ||
+ | box-shadow:0 0 20px #ff8e8e; | ||
+ | -moz-box-shadow:0 0 20px #ff8e8e; | ||
+ | -webkit-box-shadow:0 0 20px #ff8e8e; | ||
+ | opacity:0; | ||
+ | filter: alpha(opacity = 0); | ||
+ | |||
+ | transform: scale(1.3,1.3) rotate(180deg); | ||
+ | -ms-transform: scale(1.3,1.3) rotate(180deg); | ||
+ | -moz-transform: scale(1.3,1.3) rotate(180deg); | ||
+ | -webkit-transform: scale(1.3,1.3) rotate(180deg); | ||
+ | |||
+ | transition: | ||
+ | opacity 0.5s, | ||
+ | transform 0.7s ease-out; | ||
+ | -moz-transition: | ||
+ | opacity 0.5s, | ||
+ | -moz-transform 0.7s ease-out; | ||
+ | -webkit-transition: | ||
+ | opacity 0.5s, | ||
+ | -webkit-transform 0.7s ease-out; | ||
+ | } | ||
+ | .imgholder:hover .outer2{ | ||
+ | opacity:0.9; | ||
+ | filter: alpha(opacity = 90); | ||
+ | transform: scale(1,1) rotate(-10deg); | ||
+ | -ms-transform: scale(1,1) rotate(-10deg); | ||
+ | -moz-transform: scale(1,1) rotate(-10deg); | ||
+ | -webkit-transform: scale(1,1) rotate(-10deg); | ||
+ | } | ||
+ | |||
+ | .a {list-style-type: circle;} | ||
+ | |||
+ | .text1 { | ||
+ | width: 450px; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | background-color: white; | ||
+ | padding: 10px, 5px, 10px, 5px; | ||
+ | margin: 0px 0px 0px 155px; | ||
+ | border: solid 2px; | ||
+ | border-radius: 15px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .medal { | ||
+ | border-radius: 5px; | ||
+ | padding: 5px; | ||
+ | margin: 20px auto; | ||
+ | } | ||
+ | |||
+ | .medal { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-align: left; | ||
+ | position: relative; | ||
+ | background-color: #F0D257; | ||
+ | border: solid 1px; | ||
+ | border-radius: 25px; | ||
+ | opacity: 10%; | ||
+ | } | ||
+ | |||
+ | .medalS { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-align: left; | ||
+ | position: relative; | ||
+ | background-color: #A7A9AC; | ||
+ | border: solid 1px; | ||
+ | border-radius: 25px; | ||
+ | opacity: 10%; | ||
+ | } | ||
+ | |||
+ | .medalB { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-align: left; | ||
+ | position: relative; | ||
+ | background-color: #AD661D; | ||
+ | border: solid 1px; | ||
+ | border-radius: 25px; | ||
+ | opacity: 10%; | ||
+ | } | ||
+ | |||
+ | /*Ach Banner*/ | ||
+ | |||
+ | #a_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #a_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/d/dd/AchIrlCork.png") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #a_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /*Notebook Banner*/ | ||
+ | |||
+ | #n_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #n_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/9/95/Notebook.png") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #n_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /*Collabs Banner*/ | ||
+ | |||
+ | #c_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #c_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/1/12/Collabs.png") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #c_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /*Interlab Banner*/ | ||
+ | |||
+ | #i_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #i_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/e/e3/InterlabCork.png") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #i_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /*Outreach Banner*/ | ||
+ | |||
+ | #o_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #o_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/8/85/OutreachCork.png") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #o_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /*Parts Banner*/ | ||
+ | |||
+ | #p_banner_wrapper { | ||
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: #444444; | ||
+ | } | ||
+ | |||
+ | #p_banner { | ||
+ | clear: both; | ||
+ | width: 980px; | ||
+ | height: 300px; | ||
+ | margin: 0 auto; | ||
+ | background: url("https://static.igem.org/mediawiki/2015/a/a2/PartsCork.png") no-repeat; | ||
+ | border-radius: 25px 25px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #p_banner #banner_content { | ||
+ | float: right; | ||
+ | width: 400px; | ||
+ | margin: 50px 50px 0 0; | ||
+ | overflow: hidden; | ||
} | } | ||
Revision as of 17:29, 15 September 2015