Team:CityU HK/lablog/project1.css

From 2014.igem.org

(Difference between revisions)

Revision as of 15:12, 5 September 2014

/* Flexible Slide-to-top Accordion Style*/ .wrapper{ width:90%; max-width:800px; margin:30px auto; } .st-accordion{

   width:100%;
   min-width:270px;
   margin: 0 auto;

} .st-accordion ul li{

   height: 100px;
   border-bottom: 1px solid #c7deef;
   border-top:1px solid #fff;
   overflow: hidden;

} .st-accordion ul li:first-child{

   border-top:none;

} .st-accordion ul li > a{

   font-family: 'Josefin Slab',Georgia, serif;
   text-shadow: 1px 1px 1px #fff;
   font-size: 46px;
   display: block;

position: relative;

   line-height: 100px;

outline:none;

   -webkit-transition:  color 0.2s ease-in-out;

-moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .st-accordion ul li > a span{ background: transparent url(../images/down.png) no-repeat center center; text-indent:-9000px; width: 26px; height: 14px; position: absolute; top: 50%; right: -26px; margin-top: -7px; opacity:0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .st-accordion ul li > a:hover{

   color: #1693eb;

} .st-accordion ul li > a:hover span{ opacity:1; right: 10px; } .st-accordion ul li.st-open > a{

   color: #1693eb;

} .st-accordion ul li.st-open > a span{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);

   transform:rotate(180deg);

right:10px; opacity:1; } .st-content{

   padding: 5px 0px 30px 0px;

} .st-content p{

   font-size:  16px;
   font-family:  Georgia, serif;
   font-style: italic;
   line-height:  28px;
   padding: 0px 4px 15px 4px;

} .st-content img{

   width:125px;
   border-right:1px solid #fff;
   border-bottom:1px solid #fff;

} @media screen and (max-width: 320px){ .st-accordion ul li > a{ font-size:36px; } }

/* CSS reset */ 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; }

@@ Line 1: / Line 1: @@
-/* CSS reset */
-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;
-}
-/* General Demo Style */
-body{
-	background:#f7f7f7 url(../images/pattern.png) repeat top left;
-	color:#000;
-	font-family: 'Arial Narrow', Arial, sans-serif;
-	font-size:13px;
-	min-height:2000px;
-}
-a{
-	color:#000;
-	text-decoration:none;
-}
-.clr{
-	clear:both;
-}
-h1{
-	padding:20px;
-	font-size:28px;
-	color:#333;
-	font-family: 'Josefin Slab',Georgia, serif;
-	font-weight:400;
-    text-align:center;
-    text-shadow:1px 1px 1px #fff;
-}
-h1 span{
-	font-size:18px;
-	color:#1693eb;
-}
-.more{
-	font-family: 'Josefin Slab',Georgia, serif;
-	margin:0 auto;
-	text-align:center;
-	color:#ddd;
-	font-size:15px;
-	color:#444;
-}
-.more p{
-	display:block;
-	margin:10px;
-}
-.more a{
-	color:#666;
-	white-space: nowrap;
-	font-weight:bold;
-	background:#fff;
-	padding:1px 6px;
-	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-}
-.more a.current,
-.more a.current:hover{
-	color:#fff;
-	background:#000;
-}
-.more a:hover{
-	background-color:#1693eb;
-	color:#fff;
-}
-/* Header Style */
-.header{
-	line-height:24px;
-	font-size:11px;
-	background:#000;
-	opacity:0.9;
-	text-transform:uppercase;
-	z-index:4;
-	-moz-box-shadow:1px 0px 2px #000;
-	-webkit-box-shadow:1px 0px 2px #000;
-	box-shadow:1px 0px 2px #000;
-}
-.header a{
-	padding:0px 10px;
-	letter-spacing:1px;
-	color:#ddd;
-	display:block;
-	float:left;
-}
-.header a:hover{
-	color:#fff;
-}
-.header span.right{
-	float:right;
-}
-.header span.right a{
-	float:none;
-	display:inline;
-}
 /* Flexible Slide-to-top Accordion Style*/
 .wrapper{
@@ Line 212: / Line 81: @@
      border-bottom:1px solid #fff;
 }
 @media screen and (max-width: 320px){
 	.st-accordion ul li > a{
 		font-size:36px;
 	}
+}
+/* CSS reset */
+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;
 }