Team:UniSalento Lecce/css/common.css
From 2013.igem.org
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, meter, nav, output, progress, section, source, video {
display: block;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
html {
min-width: 1351px;
}
body{
background-image: url();
background-repeat: repeat;
}
/****************************** IGEM pre ********************************/
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;
}
- globalWrapper {
width: 100%; margin: 0px; padding: 0px; border: none; font-size: 100%;
}
- content {
width: 100%; margin: 0px; padding: 0px; border: none;
}
- bodyContent {
width: 100%; margin: 0px; padding: 0px; border: none; background-image: url(); background-repeat: repeat;
}
- bodyContent p {
margin: 0px; padding: 0px;
}
- bodyContent h1, h2, h3, h4, h5, h6 {
font-family: 'BebasNeueRegular',Arial, Helvetica, sans-serif; padding: 0px; margin: 40px auto 30px auto; color: #cbcaca;
border: none;
}
- bodyContent h1, h2 {
font-size:20pt; }
- bodyContent h3, h4 {
font-size:14pt; }
- top-section {
width: 965px; height: 0px; margin: 0px auto; padding: 0px; border: none;
} header { height:282px; }
- banner{
width: 100%; height: 230px; text-align: center; overflow: hidden; /*background-color: #171716;*/ background-color: rgba(1, 1, 1, 0.9); }
- banner_p{
background: url(../images/img/home.jpg) 50% 0 no-repeat fixed; height: 230px; margin: 0 auto;
width: 100%; max-width: 1920px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
- banner_p article { background: url("../images/img/logo.png") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; }
/********************************** Header ***********************************/
header{
width: 100%;
height: 230px;
overflow: hidden;
background-image: url();
}
/******************************* Social Links *********************************/
- social_facebook{
top: -4px; right: 142px; position: absolute; background: transparent; border: none; }
- social_twitter{
top: -4px; right: 91px; position: absolute; background: transparent; border: none; }
- social_gmail{
top: -4px; right: 38px; position: absolute; background: transparent; border: none; }
- social_facebook:hover{
top: 0px; }
- social_twitter:hover{
top: 0px; }
- social_gmail:hover{
top: 0px; }
- social_facebook a{
background: none;
}
- social_twitter a{
background: none;
}
/******************************** Navigation bar *********************************/
nav{ position: absolute; top: 230px; width: 100%; height: 52px; text-align: center; z-index: 3000; background-color: rgba(1, 1, 1, 0.9); box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6); -moz-box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6);
} ul#css3menu1,ul#css3menu1 ul{ margin: 0; padding: 0; list-style: none; } ul#css3menu1,ul#css3menu1 .submenu{ background-color: transparent; } ul#css3menu1 .submenu{ visibility:hidden; position:absolute; left:0; top:100%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s; float:left; background-color:#0A0A0A; border-radius:0 5px 5px 5px; -moz-border-radius:0 5px 5px 5px; -webkit-border-radius:0; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px; -webkit-border-bottom-left-radius:5px; padding:0 3px 3px; filter:alpha(opacity=80) } ul#css3menu1 li:hover>.submenu{ visibility:visible; opacity:1; } ul#css3menu1 li{ position:relative; display:block; white-space:nowrap; font-size:0px; float:left; } ul#css3menu1 li:hover{ z-index:1; } ul#css3menu1 ul .submenu{ position:absolute; left:100%; top:0; border-width:0px; border-style:solid; border-color:#101010; } ul#css3menu1>li:hover>.submenu{ opacity:0.8; } ul#css3menu1{ font-size:0px; z-index:999; position:relative; display:inline-block; zoom:1; padding:6px 6px 6px 6px; *display:inline; } ul#css3menu1 .column{ float:left; }
- html ul#css3menu1 li a{
display:inline-block;
}
ul#css3menu1>li{
margin:0 0 0 6px;
}
ul#css3menu1 ul>li{
margin:6px 0 0;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}
ul#css3menu1 a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:14px Lucida Sans Unicode, sans-serif;
color:#C0C0BA;
cursor:pointer;
padding:7px 14px;
background-color:transparent;
background-repeat:repeat;
border-width:0px;
border-style:none;
}
ul#css3menu1 ul li{
float:none;
margin:3px 0 0;
}
ul#css3menu1 ul a{
text-align:left;
padding:5px;
background-color:#0A0A0A;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
font:14px Lucida Sans Unicode,
sans-serif;color:#C0C0BA;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#0A0A0A;
border-style:none;
color:#FFFFFF;
text-decoration:none;
}
ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:7px;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 ul span{
background-image: url();
padding-right:9px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#525252;
color:#FFFFFF;
text-decoration:none;
}
ul#css3menu1 li.topmenu>a{
border-width:1px;
border-style:solid;
border-color:transparent;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity:0.8;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
border-style:solid;
border-color:#434343;
}
ul#css3menu1 li.toproot>a{
border-width:1px 1px 0 1px;
border-style:solid;
border-color:transparent;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0;
opacity:0.8;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}
ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{
border-style:solid;
border-color:#434343;
}
/******************************** Main Content *********************************/
- main{
width: 100%; text-align: center; margin-top: 72px; margin-bottom: 42px; }
- main_wrap{
width: 1000px; margin: 0px auto 0px auto; }
- container{
margin: 0px auto 40px auto; background-color: white; border: 1px solid #d5d5d5; float: left; text-align: left; padding-top: 40px; padding-left: 65px; padding-right: 65px; padding-bottom: 50px; border-radius: 7px; }
- by {
font-size:12px; float:left; background-color:#d4d4d4; color:#fff; padding:0 5px 0 4px; margin:0 0 0 3px; border-radius:4px; float: none; }
/**************** Columns ***************/
.nosplit{ width:100%; float:left; text-align:left; color:#999; /*padding:10px 0px;*/ } .split1_3l{ width:30%; /*padding:10px 2% 10px 1%;*/ float:left; text-align:left; color:#999; }
.split2_3r{ width:63%; /*padding:10px 3% 10px 2%;*/ float:right; text-align:left; color:#999; } .split1_3r{ width:30%; /*padding:10px 2% 10px 1%;*/ float:right; text-align:left; color:#999; }
.split2_3l{ width:63%; /*padding:10px 3% 10px 2%;*/ float:left; text-align:left; color:#999; } .clear{ clear:both !important; } .teaml{ margin: 0px 12px 12px 12px; border-radius: 8px; } .teaml:hover{ -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-o-transform:rotate(10deg); -ms-transform:rotate(10deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
} .teamr{ margin: 0px 12px 12px 12px; border-radius: 8px; } .teamr:hover{ -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
}
/*************** Back-to-top Button *********************/
- back-top {
position: fixed; bottom: 20px; right: 110px; }
- back-top a {
width: 50px; display: block; text-align: center; font: 7px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
- back-top a:hover {
color: #000; }
- back-top span {
width: 50px;
height: 50px;
display: block;
margin-bottom: 7px;
background: #ddd url() no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
- back-top a:hover span {
background-color: #777; }
/******************************** Footer *********************************/
footer{ height: 300px; background-color: rgba(1, 1, 1, 0.9); box-shadow: 0 -18px 14px -14px rgba(0,0,0,0.6); -moz-box-shadow: 0 -18px 14px -14px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 -18px 14px -14px rgba(0,0,0,0.6);
}