陳沛鴻 Human practices photoartwork-795289567 style

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
 +
 +
@font-face {  
@font-face {  
   font-family: Yanone Kaffeesatz;  
   font-family: Yanone Kaffeesatz;  

Revision as of 13:48, 12 May 2014


@font-face {

 font-family: Yanone Kaffeesatz; 
   src: url('../fonts/YanoneKaffeesatz-Regular.eot'); 
   src: local(Yanone Kaffeesatz), url('../fonts/YanoneKaffeesatz-Regular.ttf'); 

}

@font-face {

 font-family: News Cycle; 
   src: url('../fonts/NewsCycle-Regular.eot'); 
   src: local(News Cycle), url('../fonts/NewsCycle-Regular.ttf'); 

}

html {

 height: 100%;}
  • {
 margin: 0; 
 padding: 0;}

/* tell the browser to render HTML 5 elements as block */ article, aside, figure, footer, header, hgroup, nav, section {

 display:block;}

body {

 font: normal .80em arial, sans-serif;}

p {

 padding: 0 0 25px 0;
 line-height: 1.7em;}

img {

 border: 0;}

h1, h2, h3, h4, h5, h6 {

 font: normal 200% 'Yanone Kaffeesatz', arial, sans-serif;
 margin: 0 0 15px 0;
 padding: 0 0 5px 0;}

h2 {

 font: normal 170% 'Yanone Kaffeesatz', arial, sans-serif;
 margin: 0;
 padding: 0 0 8px 0;}

h3 {

 font: normal 150% arial, sans-serif;}

h4, h5, h6 {

 margin: 0;
 padding: 0 0 5px 0;
 font: normal 110% arial, sans-serif;
 line-height: 1.5em;}

h5, h6 {

 font: italic 95% arial, sans-serif;
 padding-bottom: 15px;}

a, a:hover {

 outline: none;
 text-decoration: none;}

a:hover {

 text-decoration: none;}

ul {

 margin: 2px 0 22px 17px;}

ul li {

 list-style-type: circle;
 margin: 0 0 0 0; 
 padding: 0 0 4px 5px;}

ol {

 margin: 8px 0 22px 20px;}

ol li {

 margin: 0 0 11px 0;}
  1. main, #header, #logo, #menubar, #site_content, #footer {
 margin-left: auto; 
 margin-right: auto;}
  1. main {
 width: 950px;
 margin: 20px auto;}

header {

 width: 950px;
 height: 105px;}
  1. logo {
 width: 250px;
 float: left;
 height: 100px;
 background: transparent;
 padding: 0 0 10px 10px;}
  1. logo h1 {
 font: normal 350% 'Yanone Kaffeesatz', arial, sans-serif;
 padding: 45px 0 0 17px;}
  1. logo h1 a:hover {
 text-decoration: none;}
  1. site_content {
 width: 950px;
 overflow: hidden;
 margin: 4px auto 0 auto;
 padding: 0;}
  1. left_content {
 float: left;
 text-align: justify;
 width: 444px;
 padding: 20px 0 5px 25px;
 margin: 0;}
  1. left_content ul {
 margin: 2px 0 22px 0px;}
  1. left_content ul li {
 list-style-type: none;
 margin: 0 0 0 0; 
 padding: 2px 0 2px 28px;
 line-height: 1.5em;}
  1. right_content {
 float: right;
 width: 450px;
 padding: 0;
 min-height: 450px;}
  1. right_content img {
 float: left;}

footer {

 width: 930px;
 font: normal 100% arial, sans-serif;
 padding: 50px 20px 5px 0;
 text-align: right; 
 background: transparent;}

footer p {

 padding: 0 0 10px 0;}

footer a, footer a:hover {

 text-decoration: none;}

/* styling for the slideshow on the homepage */ ul.slideshow {

 list-style: none;
 width: 950px;
 height: 450px;
 overflow: hidden;
 position: relative;
 margin: 0;
 padding: 0;}
 

ul.slideshow li {

 position: absolute;
 margin: 0;
 padding: 0;
 left: 0;
 right: 0;}

ul.slideshow li.show {

 z-index: 500;}

ul img {

 border: none;}

  1. slideshow-caption {
 width: 950px;
 height: 90px;
 position: absolute;
 bottom: 0;
 left: 0; 
 z-index: 500;}

  1. slideshow-caption .slideshow-caption-container {
 padding: 20px 25px 0 25px;   
 z-index: 1000;}

  1. slideshow-caption p {
 padding: 0;
 font: normal 130% arial, sans-serif;}

/* form styling */ .form_settings {

 margin: 0;}

.form_settings p {

 padding: 0 0 10px 0;}

.form_settings span {

 padding: 5px 0; 
 float: left; 
 width: 170px; 
 text-align: left;}
 

.form_settings input, .form_settings textarea {

 padding: 4px; 
 width: 252px; 
 font: 100% 'trebuchet ms', arial, sans-serif;
 border: 0;
 border-bottom: 1px solid; 
 background: transparent;}
 

.form_settings .submit {

 font: 170% 'Yanone Kaffeesatz', arial, sans-serif; 
 border: 0; 
 width: 100px; 
 margin: 0 0 0 162px; 
 height: 33px;
 padding: 2px 0 3px 0;
 cursor: pointer; 
 border-radius: 6px 6px 6px 6px;
 -webkit-border-radius: 6px 6px 6px 6px;
 -moz-border-radius: 6px 6px 6px 6px;}

.form_settings textarea, .form_settings select {

 font: 100% 'trebuchet ms', arial, sans-serif; 
 border: 1px solid; 
 border-radius: 6px 6px 6px 6px;
 -webkit-border-radius: 6px 6px 6px 6px;
 -moz-border-radius: 6px 6px 6px 6px;
 width: 250px;
 overflow: auto;}

.form_settings select {

 width: 304px;}

.form_settings .checkbox {

 margin: 4px 0; 
 padding: 0; 
 width: 14px;
 border: 0;
 background: none;}

/* styling for the blog page */

  1. blog_container h4 {
 font: normal 200% 'Yanone Kaffeesatz', arial, sans-serif;
 margin: 0 0 15px 0;
 padding: 5px 0;}
  1. blog_container h4.select {
 width: 475px;}

.blog {

 background: url(../images/calendar.png) no-repeat;
 width: 54px;
 height: 46px;
 float: left;
 margin: 0 15px 0 0;}

.blog h2 {

 font: bold 90% arial, sans-serif;
 text-shadow: none;
 text-align: center;
 margin: 0;
 padding: 4px 0 0 0;}
 

.blog h3 {

 font: 140% arial, sans-serif;
 text-shadow: none;
 margin: 0;
 text-align: center;
 padding: -10px 0 0 0;}
 
  1. blog_text {
 padding: 20px;
 overflow: auto;
 height: 100%;}
  1. blog_text h1 {
 font: normal 190% 'Yanone Kaffeesatz', arial, sans-serif;;
 margin: 0 0 15px 0;
 padding: 5px 0;}

/* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */ html body ul.sf-menu ul,html body ul.sf-menu ul li {

 width: 180px;}

html body ul.sf-menu ul ul {

 margin: 0 0 0 180px;}

ul.sf-menu,ul.sf-menu * {

 margin: 0;
 padding: 0;}

ul.sf-menu {

 display: block;
 position: relative;}
 

ul.sf-menu li {

 display: block;
 list-style: none;
 float: left;
 position: relative;}
 

ul.sf-menu li:hover {

 visibility: inherit; /* fixes IE7 'sticky bug' */ }

ul.sf-menu a {

 display: block;
 position: relative;}
 

ul.sf-menu ul {

 position: absolute;
 left: 0;
 width: 150px; 
 top: auto;
 left: -999999px;}
 

ul.sf-menu ul a {

 zoom: 1; /* IE6/7 fix */ }

ul.sf-menu ul li {

 float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
 width: 150px;}
 

ul.sf-menu ul ul {

 top: 0;
 margin: 0 0 0 150px;}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul, ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul, ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {

 left: auto;}
 

ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul, ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul, ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul, ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {

 left: -999999px;}

/* theming the menu */ nav {

 width: 650px;
 margin: 1px auto 0 auto;
 float: right;
 padding: 35px 0 0 0;} 
 

ul#nav {

 float: right;
 margin: 25px 10px 0 0;}

ul#nav li a {

 font: normal 150% 'News Cycle', sans-serif;
 text-decoration: none;
 outline: none;
 text-align: center;
 z-index: 10;
 display: block;
 float: left;
 height: 30px;
 padding:5px 14px 6px 15px;
 position: relative;
 overflow: hidden;}

ul#nav ul {

 margin-top: 40px;
 padding-bottom: 10px;}