Template:Team:Aachen/Stylesheet

From 2014.igem.org

(Difference between revisions)
 
(25 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
 +
/****/
 +
 +
.menusmall-grid {
 +
    margin: 0px 0 0 0;
 +
    padding: 0;
 +
    list-style: none;
 +
    display: inline-block;
 +
    text-align: center;
 +
    z-index:1000;
 +
}
 +
.menusmall-grid:after,
 +
.menusmall-item:before {
 +
    content: '';
 +
    display: table;
 +
}
 +
.menusmall-grid:after {
 +
    clear: both;
 +
}
 +
.menusmall-grid li {
 +
    width: 150px;
 +
    display: inline-block;
 +
    margin-bottom:20px;
 +
    position:relative;
 +
    float: left;
 +
    margin-left: 20px ;
 +
    margin-right: auto ; /*75px*/
 +
    display: table-cell;
 +
}
 +
.menusmall-grid ul {
 +
    display: table;
 +
}
 +
.menusmall-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;
 +
}
 +
 +
.menusmall-img {
 +
    background-size:100% 100%;
 +
    border-radius: 10%;
 +
    height: 150px;
 +
    width: 150px;
 +
}
 +
.menusmall-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 */
 +
}
 +
.menusmall-info p{
 +
    padding-top:25%;
 +
}
 +
.menusmall-img:hover {
 +
opacity: 0.2;
 +
cursor: pointer;
 +
}
 +
 +
.menusmall-info-item
 +
{
 +
height:280px;
 +
width:225px;
 +
position: relative;
 +
float: left;
 +
margin: 10px;
 +
}
 +
 +
.menusmall-info-item img
 +
{
 +
max-width:100%;
 +
max-height:100%;
 +
margin:left;
 +
display:inline-block;
 +
}
/*************************************************************************/
/*************************************************************************/
/* custom team style */
/* custom team style */
/*************************************************************************/
/*************************************************************************/
.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 24: Line 290:
}
}
.team-grid li {
.team-grid li {
-
     width: 220px;
+
     width: 248px;
     display: inline-block;
     display: inline-block;
     margin-bottom:20px;
     margin-bottom:20px;
Line 38: Line 304:
.team-item {
.team-item {
     border-radius: 10%;
     border-radius: 10%;
-
     border: solid #0069B3;  /* #1B4046; */
+
     border: 3px solid #0069B3;  /* #1B4046; */
     position: relative;
     position: relative;
     cursor: default;
     cursor: default;
Line 51: Line 317:
.team-img {
.team-img {
     background-size:100% 100%;
     background-size:100% 100%;
-
     border-radius:10%;
+
     border-radius: 10%;
-
     height: 215px;
+
     height: 248px;
-
     width: 215px;
+
     width: 248px;
}
}
.team-info {
.team-info {
     position: absolute;
     position: absolute;
-
     width: 215px;
+
     width: 248px;
-
     height: 215px;
+
     height: 248px;
     border-radius: 10%;
     border-radius: 10%;
     opacity: 1;
     opacity: 1;
     text-align: center;
     text-align: center;
     font-size: medium;
     font-size: medium;
-
 
+
     background-color: #cfe2f4;
-
     background-color: #dc6e00;
+
-
 
+
     -webkit-backface-visibility: hidden; /*for a smooth font */
     -webkit-backface-visibility: hidden; /*for a smooth font */
}
}
Line 96: Line 360:
/*--Slideshow Begins Here--*/
/*--Slideshow Begins Here--*/
-
#slideshow {
+
.slideshow {
display: block;
display: block;
vertical-align: middle;
vertical-align: middle;
Line 106: Line 370:
margin-right:auto;
margin-right:auto;
position: relative;
position: relative;
-
height:300px; width: 780px;
+
height:590px; width: 780px;
}
}
.window {
.window {
-
height:280px; width: 760px;
+
height:570px; width: 760px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: absolute;
position: absolute;
Line 115: Line 379:
top:50%;
top:50%;
left:50%;
left:50%;
-
margin: -140px 0 0 -380px;
+
margin: -285px 0 0 -380px;
}
}
.image_reel {
.image_reel {
Line 169: Line 433:
/*--Slideshow Ends Here--*/
/*--Slideshow Ends Here--*/
-
 
+
.textboxes {
 +
display: block;
 +
position: relative;
 +
border: 1px solid #f0f0f0;
 +
background: #f0f0f0;
 +
border-bottom: 2px solid #ccc; 
 +
-webkit-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
margin-top: 10px; margin-bottom: 10px;
 +
}
</style>
</style>
</style>
</style>
</html>
</html>

Latest revision as of 14:56, 16 October 2014

Retrieved from "http://2014.igem.org/Template:Team:Aachen/Stylesheet"