Template:Team:Aachen/Stylesheet
From 2014.igem.org
(Difference between revisions)
(8 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | /**** | + | /****/ |
+ | /* Menu RIGHT | ||
+ | /****/ | ||
+ | |||
+ | .menuright-grid { | ||
+ | margin: 0px 0 0 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | float: right; | ||
+ | width: 200px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .menuright-grid:after, | ||
+ | .menuright-item:before { | ||
+ | content: ''; | ||
+ | display: table; | ||
+ | } | ||
+ | .menuright-grid:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .menuright-grid li { | ||
+ | width: 150px; | ||
+ | display: inline-block; | ||
+ | margin-bottom:20px; | ||
+ | position:relative; | ||
+ | float: left; | ||
+ | margin-left: 20px ; | ||
+ | margin-right: auto ; /*75px*/ | ||
+ | display: table-cell; | ||
+ | } | ||
+ | .menuright-grid ul { | ||
+ | display: table; | ||
+ | } | ||
+ | .menuright-item { | ||
+ | border-radius: 10%; | ||
+ | border: 3px solid #0069B3; /* #1B4046; */ | ||
+ | position: relative; | ||
+ | cursor: default; | ||
+ | |||
+ | -webkit-transition: all 0.4s ease-in-out; | ||
+ | -moz-transition: all 0.4s ease-in-out; | ||
+ | -o-transition: all 0.4s ease-in-out; | ||
+ | -ms-transition: all 0.4s ease-in-out; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .menuright-img { | ||
+ | background-size:100% 100%; | ||
+ | border-radius: 10%; | ||
+ | height: 150px; | ||
+ | width: 150px; | ||
+ | } | ||
+ | .menuright-info { | ||
+ | position: absolute; | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | border-radius: 10%; | ||
+ | opacity: 1; | ||
+ | text-align: center; | ||
+ | font-size: medium; | ||
+ | background-color: #cfe2f4; | ||
+ | -webkit-backface-visibility: hidden; /*for a smooth font */ | ||
+ | } | ||
+ | .menuright-info p{ | ||
+ | padding-top:25%; | ||
+ | } | ||
+ | .menuright-img:hover { | ||
+ | opacity: 0.2; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .menuright-info-item | ||
+ | { | ||
+ | height:280px; | ||
+ | width:225px; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | margin: 10px; | ||
+ | } | ||
+ | |||
+ | .menuright-info-item img | ||
+ | { | ||
+ | max-width:100%; | ||
+ | max-height:100%; | ||
+ | margin:left; | ||
+ | display:inline-block; | ||
+ | } | ||
+ | /****/ | ||
+ | /* Menu Left | ||
+ | /****/ | ||
+ | |||
+ | .menuleft-grid { | ||
+ | margin: 0px 0 0 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | float: left; | ||
+ | width: 300px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .menuleft-grid:after, | ||
+ | .menuleft-item:before { | ||
+ | content: ''; | ||
+ | display: table; | ||
+ | } | ||
+ | .menuleft-grid:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .menuleft-grid li { | ||
+ | width: 150px; | ||
+ | display: inline-block; | ||
+ | margin-bottom:20px; | ||
+ | position:relative; | ||
+ | float: left; | ||
+ | margin-left: 20px ; | ||
+ | margin-right: auto ; /*75px*/ | ||
+ | display: table-cell; | ||
+ | } | ||
+ | .menuleft-grid ul { | ||
+ | display: table; | ||
+ | } | ||
+ | .menuleft-item { | ||
+ | border-radius: 10%; | ||
+ | border: 3px solid #0069B3; /* #1B4046; */ | ||
+ | position: relative; | ||
+ | cursor: default; | ||
+ | |||
+ | -webkit-transition: all 0.4s ease-in-out; | ||
+ | -moz-transition: all 0.4s ease-in-out; | ||
+ | -o-transition: all 0.4s ease-in-out; | ||
+ | -ms-transition: all 0.4s ease-in-out; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .menuleft-img { | ||
+ | background-size:100% 100%; | ||
+ | border-radius: 10%; | ||
+ | height: 150px; | ||
+ | width: 150px; | ||
+ | } | ||
+ | .menuleft-info { | ||
+ | position: absolute; | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | border-radius: 10%; | ||
+ | opacity: 1; | ||
+ | text-align: center; | ||
+ | font-size: medium; | ||
+ | background-color: #cfe2f4; | ||
+ | -webkit-backface-visibility: hidden; /*for a smooth font */ | ||
+ | } | ||
+ | .menuleft-info p{ | ||
+ | padding-top:25%; | ||
+ | } | ||
+ | .menuleft-img:hover { | ||
+ | opacity: 0.2; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .menusmall-info-item | ||
+ | { | ||
+ | height:280px; | ||
+ | width:225px; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | margin: 10px; | ||
+ | } | ||
+ | |||
+ | .menuleft-info-item img | ||
+ | { | ||
+ | max-width:100%; | ||
+ | max-height:100%; | ||
+ | margin:left; | ||
+ | display:inline-block; | ||
+ | } | ||
+ | |||
+ | /****/ | ||
/* Menu Small | /* Menu Small | ||
- | /**** | + | /****/ |
.menusmall-grid { | .menusmall-grid { | ||
Line 13: | Line 192: | ||
display: inline-block; | display: inline-block; | ||
text-align: center; | text-align: center; | ||
- | |||
z-index:1000; | z-index:1000; | ||
} | } | ||
Line 64: | Line 242: | ||
text-align: center; | text-align: center; | ||
font-size: medium; | font-size: medium; | ||
- | background-color: # | + | background-color: #cfe2f4; |
-webkit-backface-visibility: hidden; /*for a smooth font */ | -webkit-backface-visibility: hidden; /*for a smooth font */ | ||
} | } | ||
Line 95: | Line 273: | ||
/*************************************************************************/ | /*************************************************************************/ | ||
.team-grid { | .team-grid { | ||
- | margin: | + | margin: auto 0 auto 0; |
padding: 0; | padding: 0; | ||
list-style: none; | list-style: none; | ||
display: inline-block; | display: inline-block; | ||
text-align: center; | text-align: center; | ||
- | width: | + | width: 992px; |
z-index:1000; | z-index:1000; | ||
} | } | ||
Line 151: | Line 329: | ||
text-align: center; | text-align: center; | ||
font-size: medium; | font-size: medium; | ||
- | background-color: # | + | background-color: #cfe2f4; |
-webkit-backface-visibility: hidden; /*for a smooth font */ | -webkit-backface-visibility: hidden; /*for a smooth font */ | ||
} | } |
Latest revision as of 14:56, 16 October 2014