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;
-
    width: 100%;
 
     z-index:1000;
     z-index:1000;
}
}
Line 64: Line 242:
     text-align: center;
     text-align: center;
     font-size: medium;
     font-size: medium;
-
     background-color: #E8E8E8;
+
     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: 0px 0 0 0;
+
     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: 100%;
+
     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: #E8E8E8;
+
     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