Template:Team:Aachen/Stylesheet

From 2014.igem.org

(Difference between revisions)
 
(30 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;
     -webkit-backface-visibility: hidden; /*for a smooth font */
     -webkit-backface-visibility: hidden; /*for a smooth font */
}
}
Line 89: Line 355:
margin:left;
margin:left;
display:inline-block;
display:inline-block;
 +
}
 +
 +
 +
 +
/*--Slideshow Begins Here--*/
 +
.slideshow {
 +
display: block;
 +
vertical-align: middle;
 +
position: relative;
 +
}
 +
/*--Main Container--*/
 +
#main_view {
 +
margin-left:auto;
 +
margin-right:auto;
 +
position: relative;
 +
height:590px; width: 780px;
 +
}
 +
.window {
 +
height:570px; width: 760px;
 +
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 +
position: absolute;
 +
display: block;
 +
top:50%;
 +
left:50%;
 +
margin: -285px 0 0 -380px;
 +
}
 +
.image_reel {
 +
position: absolute;
 +
top: 0; left: 0;
 +
}
 +
.image_reel img {float: left;}
 +
.paging {
 +
position: absolute;
 +
bottom: 10px; right: 50px;
 +
width: 300px; height:47px;
 +
z-index: 100; /*--Assures the paging stays on the top layer--*/
 +
text-align: right;
 +
line-height: 40px;
 +
font-weight: bold;
 +
background: url(paging_bg2.png) no-repeat;
 +
display: none; /*--Hidden by default, will be later shown with jQuery--*/
 +
}
 +
.paging a {
 +
padding: 5px;
 +
text-decoration: none;
 +
color: #fff; text-shadow: #333 1px 1px 1px;
 +
}
 +
.pause {
 +
position: absolute;
 +
bottom: 10px; right: 20px;
 +
width: 25px; height:47px;
 +
z-index: 200; /*--Assures the paging stays on the top layer--*/
 +
text-align: center;
 +
line-height: 40px;
 +
font-weight: bold;
 +
display: block; /*--Hidden by default, will be later shown with jQuery--*/
 +
}
 +
.pause a {
 +
padding: 5px;
 +
text-decoration: none;
 +
letter-spacing:1px;
 +
font-weight: thick;
 +
color: #f0f0f0; text-shadow: #333 1px 1px 1px;
 +
border: 2px solid #ccc;
 +
-moz-border-radius: 3px;
 +
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
.paging a.active {
 +
font-weight: bold;
 +
border: 2px solid #fff;
 +
-moz-border-radius: 3px;
 +
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
.paging a:hover {font-weight: bold;}
 +
/*--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;
}
}

Latest revision as of 14:56, 16 October 2014

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