Template:OUC-China/2012css.style.css

From 2012.igem.org

(Difference between revisions)

Revision as of 12:59, 15 July 2012

@import url('reset.css');

/* General Demo Style */ body{ background: #fff; color: #000; font-family: 'Open Sans Condensed', sans-serif; font-size: 13px; } a{ color: #555; text-decoration: none; } .wrapper{ position: relative; width: 100%; } .wrapper p{ clear: both; font-size: 24px; line-height: 40px; text-align: center; } .reference{ padding-top: 40px; } h1{ font-size: 34px; position:relative; color: #000; font-weight: 400; text-shadow: 0px 0px 1px rgba(0,0,0,0.3);

   padding: 20px;

z-index:1000; text-transform: uppercase; text-align: center; } h1 span{ font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; font-size: 20px; } .index_header_wrp {

   padding: 4px 0px 0px 0px;
   background: url("")  repeat-x scroll 0% 0% transparent;
   border-bottom: 1px solid #ffffff;

} .index_header { height: 50px;

   margin: 13px auto;
   position: relative;

}

nav{

margin:0; padding:0 0 0 1px; list-style:none; position:absolute; top:0; right:120px; background:url() no-repeat; }

nav li {

padding:0 1px 0 0; float:left; width:100px; display:inline; background:url() no-repeat 100% 0; }

nav a{

color: #000000; display:block; text-decoration: none; font-weight: bold; font-size:17px; font-family: 'Playfair Display', serif; font-style:italic; background:url() no-repeat 0 -9999px; padding:46px 5px 15px 16px; }

nav a:hover{/* 鼠标悬停的样式 */

background-position:0 0; /* 背景图被放到了看得见的地方。 */ text-decoration:none; color:#777777; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:; } abbr,acronym { border:0; } .ei-slider{ position: relative; width: 100%; max-width: 1920px; height: 400px; margin: 0 auto; } .ei-slider-loading{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index:999; background: rgba(0,0,0,0.9); color: #fff; text-align: center; line-height: 400px; } .ei-slider-large{ height: 100%; width: 100%; position:relative; overflow: hidden; } .ei-slider-large li{ position: absolute; top: 0px; left: 0px; overflow: hidden; height: 100%; width: 100%; } .ei-slider-large li img{ width: 100%; } .ei-title{ position: absolute; right: 50%; margin-right: 13%; top: 30%; } .ei-title h2, .ei-title h3{ text-align: right; } .ei-title h2{ font-size: 40px; line-height: 50px; font-family: 'Playfair Display', serif; font-style: italic; color: #b5b5b5; } .ei-title h3{ font-size: 70px; line-height: 70px; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; color: #000; } .ei-slider-thumbs{ height: 13px; margin: 0 auto; position: relative; } .ei-slider-thumbs li{ position: relative; float: left; height: 100%; } .ei-slider-thumbs li.ei-slider-element{ top: 0px; left: 0px; position: absolute; height: 100%; z-index: 10; text-indent: -9000px; background: #000; background: rgba(0,0,0,0.9); } .ei-slider-thumbs li a{ display: block; text-indent: -9000px; background: #666 ; width: 100%; height: 100%; cursor: pointer; -webkit-box-shadow:

       0px 1px 1px 0px rgba(0,0,0,0.3), 
       0px 1px 0px 1px rgba(255,255,255,0.5);

-moz-box-shadow:

       0px 1px 1px 0px rgba(0,0,0,0.3), 
       0px 1px 0px 1px rgba(255,255,255,0.5);

box-shadow:

       0px 1px 1px 0px rgba(0,0,0,0.3), 
       0px 1px 0px 1px rgba(255,255,255,0.5);

-webkit-transition: background 0.2s ease;

   -moz-transition: background 0.2s ease;
   -o-transition: background 0.2s ease;
   -ms-transition: background 0.2s ease;
   transition: background 0.2s ease;

} .ei-slider-thumbs li a:hover{ background-color: #f0f0f0; } .ei-slider-thumbs li img{ position: absolute; bottom: 50px; opacity: 0; z-index: 999; max-width: 100%; -webkit-transition: all 0.4s ease;

   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;

-webkit-box-reflect:

       below 0px -webkit-gradient(
           linear, 
           left top, 
           left bottom, 
           from(transparent), 
           color-stop(50%, transparent), 
           to(rgba(255,255,255,0.3))
           );

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ei-slider-thumbs li:hover img{ opacity: 1; bottom: 13px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } @media screen and (max-width: 830px) { .ei-title{ position: absolute; right: 0px; margin-right: 0px; width: 100%; text-align: center; top: auto; bottom: 10px; background: #fff; background: rgba(255,255,255,0.9); padding: 5px 0; } .ei-title h2, .ei-title h3{ text-align: center; } .ei-title h2{ font-size: 20px; line-height: 24px; } .ei-title h3{ font-size: 30px; line-height: 40px; } }

@@ Line 1: / Line 1: @@
+@import url('reset.css');
+/* General Demo Style */
+body{
+	background: #fff;
+	color: #000;
+	font-family: 'Open Sans Condensed', sans-serif;
+	font-size: 13px;
+}
+a{
+	color: #555;
+	text-decoration: none;
+}
+.wrapper{
+	position: relative;
+	width: 100%;
+}
+.wrapper p{
+	clear: both;
+	font-size: 24px;
+	line-height: 40px;
+	text-align: center;
+}
+.reference{
+	padding-top: 40px;
+}
+h1{
+	font-size: 34px;
+	position:relative;
+	color: #000;
+	font-weight: 400;
+	text-shadow: 0px 0px 1px rgba(0,0,0,0.3);
+    padding: 20px;
+	z-index:1000;
+	text-transform: uppercase;
+	text-align: center;
+}
+h1 span{
+	font-family: 'Playfair Display', serif;
+	font-style: italic;
+	text-transform: none;
+	font-size: 20px;
+}
+.index_header_wrp {
+    padding: 4px 0px 0px 0px;
+    background: url("https://static.igem.org/mediawiki/igem.org/1/1b/OUC-China-home_header_backgroundimg.png")  repeat-x scroll 0% 0% transparent;
+    border-bottom: 1px solid #ffffff;
+}
+.index_header {
+	height: 50px;
+    margin: 13px auto;
+    position: relative;
+}
+#nav{
+	margin:0;
+	padding:0 0 0 1px;
+	list-style:none;
+	position:absolute;
+	top:0;
+	right:120px;
+	background:url(https://static.igem.org/mediawiki/2012/b/b2/Ouc-China-home-sep.gif) no-repeat;
+	}
+#nav li {
+	padding:0 1px 0 0;
+	float:left;
+	width:100px;
+	display:inline;
+	background:url(https://static.igem.org/mediawiki/2012/b/b2/Ouc-China-home-sep.gif) no-repeat 100% 0;
+	}
+#nav a{
+	color: #000000;
+	display:block;
+	text-decoration: none;
+	font-weight: bold;
+	font-size:17px;
+	font-family: 'Playfair Display', serif;
+	font-style:italic;
+	background:url(https://static.igem.org/mediawiki/2012/2/2a/Ouc-China-home-btn-nav_.png) no-repeat 0 -9999px;
+	padding:46px 5px 15px 16px;
+}
+#nav a:hover{/* 鼠标悬停的样式 */
+background-position:0 0; /* 背景图被放到了 看得见的地方。 */
+text-decoration:none;
+color:#777777;
+}
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
+	margin:0;
+	padding:0;
+}
+html,body {
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img {
+	border:0;
+}
+input{
+	border:1px solid #b0b0b0;
+	padding:3px 5px 4px;
+	color:#979797;
+	width:190px;
+}
+address,caption,cite,code,dfn,th,var {
+	font-style:normal;
+	font-weight:normal;
+}
+ol,ul {
+	list-style:none;
+}
+caption,th {
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after {
+	content:'';
+}
+abbr,acronym { border:0;
+}
 .ei-slider{
 	position: relative;
@@ Line 6: / Line 131: @@
 	margin: 0 auto;
 }
 .ei-slider-loading{
 	width: 100%;
@@ Line 19: / Line 143: @@
 	line-height: 400px;
 }
 .ei-slider-large{
 	height: 100%;
@@ Line 26: / Line 149: @@
 	overflow: hidden;
 }
 .ei-slider-large li{
 	position: absolute;
@@ Line 38: / Line 160: @@
 	width: 100%;
 }
 .ei-title{
 	position: absolute;
@@ Line 45: / Line 166: @@
 	top: 30%;
 }
 .ei-title h2, .ei-title h3{
 	text-align: right;
 }
 .ei-title h2{
 	font-size: 40px;
@@ Line 57: / Line 176: @@
 	color: #b5b5b5;
 }
 .ei-title h3{
 	font-size: 70px;
@@ Line 65: / Line 183: @@
 	color: #000;
 }
 .ei-slider-thumbs{
 	height: 13px;
@@ Line 71: / Line 188: @@
 	position: relative;
 }
 .ei-slider-thumbs li{
 	position: relative;
@@ Line 77: / Line 193: @@
 	height: 100%;
 }
 .ei-slider-thumbs li.ei-slider-element{
 	top: 0px;
@@ Line 88: / Line 203: @@
 	background: rgba(0,0,0,0.9);
 }
 .ei-slider-thumbs li a{
 	display: block;
@@ Line 111: / Line 225: @@
      transition: background 0.2s ease;
 }
 .ei-slider-thumbs li a:hover{
 	background-color: #f0f0f0;
 }
 .ei-slider-thumbs li img{
 	position: absolute;
@@ Line 138: / Line 250: @@
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 }
 .ei-slider-thumbs li:hover img{
 	opacity: 1;
@@ Line 144: / Line 255: @@
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 }
 @media screen and (max-width: 830px) {
 	.ei-title{
@@ Line 158: / Line 268: @@
 		padding: 5px 0;
 	}
 	.ei-title h2, .ei-title h3{
 		text-align: center;