Template:RoyChung CSS
From 2012.igem.org
(Difference between revisions)
(64 intermediate revisions not shown) | |||
Line 6: | Line 6: | ||
@import"http://webhost1.ust.hk/~igemasia/css/reset.css";@import"http://webhost1.ust.hk/~igemasia/css/grid.css";@import"http://webhost1.ust.hk/~igemasia/css/prettyPhoto.css"; | @import"http://webhost1.ust.hk/~igemasia/css/reset.css";@import"http://webhost1.ust.hk/~igemasia/css/grid.css";@import"http://webhost1.ust.hk/~igemasia/css/prettyPhoto.css"; | ||
- | body{font: | + | body{font:12px/23px Arial, Helvetica, sans-serif;color:#626262;position:relative;min-width:960px;line-height:2;background: url(http://webhost1.ust.hk/~igemasia/images/content-main-bg.png);} |
html,body{height:100%;} | html,body{height:100%;} | ||
- | p {padding-bottom: | + | p {padding-bottom:0px;} |
.p{padding-bottom:23px !important;} | .p{padding-bottom:23px !important;} | ||
.p0{padding-bottom:0 !important} | .p0{padding-bottom:0 !important} | ||
Line 20: | Line 20: | ||
} | } | ||
/* Header styles */ | /* Header styles */ | ||
- | h1,h2,h3,h4,h5,h6{color:#1f1f1f;font-weight: normal;padding-top: | + | h1,h2,h3,h4,h5,h6{color:#1f1f1f;font-weight: normal;padding-top:0px;line-height:1.3em;} |
- | h1{font-size: | + | h1{font-size:15px;} |
h2{font-size:38px;} | h2{font-size:38px;} | ||
h3{font-size:30px; line-height:36px;} | h3{font-size:30px; line-height:36px;} | ||
Line 31: | Line 31: | ||
.hp-3 {padding:0 0 24px 0;} | .hp-3 {padding:0 0 24px 0;} | ||
.hp-4 {padding:0 0 44px 0;} | .hp-4 {padding:0 0 44px 0;} | ||
- | .relative{position:relative;z-index: | + | .relative{position:relative;z-index:14} |
/* Global Structure---------------------------------------- */ | /* Global Structure---------------------------------------- */ | ||
.main{margin:0 auto;width:960px;position:relative;} | .main{margin:0 auto;width:960px;position:relative;} | ||
Line 50: | Line 50: | ||
header { | header { | ||
position:relative; | position:relative; | ||
- | z-index: | + | z-index:20; |
- | background:url(../images/header-tail.png) repeat-x 0 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/header-tail.png) repeat-x 0 0; |
} | } | ||
- | header .main-bg {background:url(../images/ | + | header .main-bg {background:url(http://webhost1.ust.hk/~igemasia/images/body-tail.gif) repeat-x 0 0;} |
header .inner { | header .inner { | ||
padding:0px 0 0px; | padding:0px 0 0px; | ||
Line 65: | Line 65: | ||
width:170px; | width:170px; | ||
height:48px; | height:48px; | ||
- | background:url(../images/igem logo.png); | + | background:url(http://webhost1.ust.hk/~igemasia/images/igem logo.png); |
overflow:visible; | overflow:visible; | ||
text-indent:-999em; | text-indent:-999em; | ||
} | } | ||
.nav-container { | .nav-container { | ||
- | background: url(../images/nav-top-tail.gif) repeat-x 0 0; | + | background: url(http://webhost1.ust.hk/~igemasia/images/nav-top-tail.gif) repeat-x 0 0; |
- | padding:1px 0 0 | + | padding:1px 0 0 0px; |
} | } | ||
header nav { | header nav { | ||
Line 77: | Line 77: | ||
width:940px; | width:940px; | ||
margin:0 auto; | margin:0 auto; | ||
- | background: url(../images/nav-first-border.gif) no-repeat 0 0; | + | background: url(http://webhost1.ust.hk/~igemasia/images/nav-first-border.gif) no-repeat 0 0; |
} | } | ||
nav { | nav { | ||
position:relative; | position:relative; | ||
- | width: | + | width:1500px; |
margin:0 auto; | margin:0 auto; | ||
- | background: url(../images/nav-first-border.gif) no-repeat 0 0; | + | background: url(http://webhost1.ust.hk/~igemasia/images/nav-first-border.gif) no-repeat 0 0; |
} | } | ||
Line 108: | Line 108: | ||
float:left; | float:left; | ||
position:relative; | position:relative; | ||
- | padding:0; | + | padding:0 15px 0 16px; |
margin:0; | margin:0; | ||
width:157px; | width:157px; | ||
- | background:url(../images/nav-separator.gif) no-repeat right 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/nav-separator.gif) no-repeat right 0; |
} | } | ||
.sf-menu > li:first-child, .sf-menu > li:first-child+li {width:156px;} | .sf-menu > li:first-child, .sf-menu > li:first-child+li {width:156px;} | ||
Line 126: | Line 126: | ||
text-align:center; | text-align:center; | ||
} | } | ||
- | .sf-menu > li.current > a, .sf-menu > li.sfHover > a, .sf-menu > li > a:hover {background:url(../images/nav-active | + | .sf-menu > li.current > a, .sf-menu > li.sfHover > a, .sf-menu > li > a:hover {background:url(http://webhost1.ust.hk/~igemasia/images/nav-active) no-repeat -1px 0;} |
- | .sf-menu li:hover ul,.sf-menu li.sfHover ul{top:50px; left:-1px;z-index: | + | .sf-menu li:hover ul,.sf-menu li.sfHover ul{width:187px; top:50px; left:-1px;z-index:30 !important;} |
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} | .sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} | ||
.sf-menu li li a{ | .sf-menu li li a{ | ||
Line 148: | Line 148: | ||
float:none; | float:none; | ||
} | } | ||
- | .sf-menu li li a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current > a{ color:#fff; background:url(../images/sub-nav-1-tail.gif) repeat-x 0 0 #2d2d2d;} | + | .sf-menu li li a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current > a{ color:#fff; background:url(http://webhost1.ust.hk/~igemasia/images/sub-nav-1-tail.gif) repeat-x 0 0 #2d2d2d;} |
- | .sf-menu li li li a:hover, .sf-menu li li li.sfHover > a, .sf-menu li li li.current > a{ color:#fff; background:url(../images/sub-nav-2-tail.gif) repeat-x 0 0 #1f1f1f;border-bottom:1px solid #1a1a1a;} | + | .sf-menu li li li a:hover, .sf-menu li li li.sfHover > a, .sf-menu li li li.current > a{ color:#fff; background:url(http://webhost1.ust.hk/~igemasia/images/sub-nav-2-tail.gif) repeat-x 0 0 #1f1f1f;border-bottom:1px solid #1a1a1a;} |
.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:159px;top:-11px;} | .sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:159px;top:-11px;} | ||
/********************** Content ************************/ | /********************** Content ************************/ | ||
section#content { | section#content { | ||
position:relative; | position:relative; | ||
- | z-index: | + | z-index:14; |
- | background:url(../images/content-main-bg.png) repeat 0 0 #dfdfdf; | + | background:url(http://webhost1.ust.hk/~igemasia/images/content-main-bg.png) repeat 0 0 #dfdfdf; |
background-attachment:fixed; | background-attachment:fixed; | ||
} | } | ||
- | section#content .main-bg {background:url(../images/content-main-bg.png) repeat center 0;background-attachment:fixed;} | + | section#content .main-bg {background:url(http://webhost1.ust.hk/~igemasia/images/content-main-bg.png) repeat center 0;background-attachment:fixed;} |
section#content .content-inner { | section#content .content-inner { | ||
- | background:url(../images/content-main-bg.png) repeat 0 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/content-main-bg.png) repeat 0 0; |
background-attachment:fixed; | background-attachment:fixed; | ||
padding:27px 0 60px 0; | padding:27px 0 60px 0; | ||
Line 176: | Line 176: | ||
#main-search { | #main-search { | ||
float:right; | float:right; | ||
- | background:url(../images/main-search-bg.png) no-repeat 0 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/main-search-bg.png) no-repeat 0 0; |
width:279px; | width:279px; | ||
height:37px; | height:37px; | ||
Line 186: | Line 186: | ||
width:22px; | width:22px; | ||
height:32px; | height:32px; | ||
- | background:url(../images/main-search-submit.png) no-repeat 0 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/main-search-submit.png) no-repeat 0 0; |
right:7px; | right:7px; | ||
top:3px; | top:3px; | ||
} | } | ||
- | #main-search a:hover {background:url(../images/main-search-submit.png) no-repeat 0 -32px;} | + | #main-search a:hover {background:url(http://webhost1.ust.hk/~igemasia/images/main-search-submit.png) no-repeat 0 -32px;} |
#main-search input { | #main-search input { | ||
font-family: Arial, Helvetica, sans-serif;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; | font-family: Arial, Helvetica, sans-serif;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; | ||
Line 207: | Line 207: | ||
#main-newsletter-form { | #main-newsletter-form { | ||
float:right; | float:right; | ||
- | background:url(../images/main-search-bg.png) no-repeat 0 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/main-search-bg.png) no-repeat 0 0; |
width:279px; | width:279px; | ||
height:37px; | height:37px; | ||
Line 216: | Line 216: | ||
width:23px; | width:23px; | ||
height:33px; | height:33px; | ||
- | background: url(../images/newsletter-submit.png) no-repeat 0 0; | + | background: url(http://webhost1.ust.hk/~igemasia/images/newsletter-submit.png) no-repeat 0 0; |
right:6px; | right:6px; | ||
top:2px; | top:2px; | ||
} | } | ||
- | #main-newsletter-form a:hover {background: url(../images/newsletter-submit.png) no-repeat 0 -33px;} | + | #main-newsletter-form a:hover {background: url(http://webhost1.ust.hk/~igemasia/images/newsletter-submit.png) no-repeat 0 -33px;} |
#main-newsletter-form input { | #main-newsletter-form input { | ||
font-family: Arial, Helvetica, sans-serif;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; | font-family: Arial, Helvetica, sans-serif;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; | ||
Line 246: | Line 246: | ||
.slider { | .slider { | ||
overflow:hidden; | overflow:hidden; | ||
- | background:url(../images/loader.gif) 50% 50% no-repeat; | + | background:url(http://webhost1.ust.hk/~igemasia/images/loader.gif) 50% 50% no-repeat; |
width:931px; | width:931px; | ||
height:383px; | height:383px; | ||
Line 270: | Line 270: | ||
width:16px; | width:16px; | ||
height:16px; | height:16px; | ||
- | background: url(../images/slider-pagination.png) no-repeat right 0; | + | background: url(http://webhost1.ust.hk/~igemasia/images/slider-pagination.png) no-repeat right 0; |
} | } | ||
.pagination li a:hover,.pagination li.current a { | .pagination li a:hover,.pagination li.current a { | ||
Line 280: | Line 280: | ||
.lightbox-image-1{display:inline-block;position:relative;} | .lightbox-image-1{display:inline-block;position:relative;} | ||
a.border{padding:6px;background:#dededa;display:inline-block;} | a.border{padding:6px;background:#dededa;display:inline-block;} | ||
- | .lightbox-image-1 img{position:relative;z-index: | + | .lightbox-image-1 img{position:relative;z-index:12;} |
- | .lightbox-image-1 span{position:absolute;width:100%;height:100%;left:0;top:0;background:url(../images/magnify.png) 50% 50% #fff no-repeat; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;} | + | .lightbox-image-1 span{position:absolute;width:100%;height:100%;left:0;top:0;background:url(http://webhost1.ust.hk/~igemasia/images/magnify.png) 50% 50% #fff no-repeat; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;} |
.img-indent-bot{margin:0 0 29px !important} | .img-indent-bot{margin:0 0 29px !important} | ||
Line 301: | Line 301: | ||
display:inline-block; | display:inline-block; | ||
position:relative; | position:relative; | ||
- | z-index: | + | z-index:16; |
} | } | ||
Line 309: | Line 309: | ||
line-height:17px; | line-height:17px; | ||
padding:7px 20px 7px 20px; | padding:7px 20px 7px 20px; | ||
- | background:url(../images/button-tail.gif) repeat-x 0 0 #e9e9e9; | + | background:url(http://webhost1.ust.hk/~igemasia/images/button-tail.gif) repeat-x 0 0 #e9e9e9; |
font-weight:bold; | font-weight:bold; | ||
text-decoration:none; | text-decoration:none; | ||
Line 338: | Line 338: | ||
.list-1 {padding:0 0 28px 0;} | .list-1 {padding:0 0 28px 0;} | ||
.list-1 li { | .list-1 li { | ||
- | background:url(../images/list-1-marker.png) no-repeat 0 10px; | + | background:url(http://webhost1.ust.hk/~igemasia/images/list-1-marker.png) no-repeat 0 10px; |
padding:0 0 10px 15px; | padding:0 0 10px 15px; | ||
line-height:23px; | line-height:23px; | ||
Line 376: | Line 376: | ||
padding:2px 0 7px 48px; | padding:2px 0 7px 48px; | ||
} | } | ||
- | .social-links li.item-1 a {background:url(../images/soc-icon-1.png) no-repeat 0 0;} | + | .social-links li.item-1 a {background:url(http://webhost1.ust.hk/~igemasia/images/soc-icon-1.png) no-repeat 0 0;} |
- | .social-links li.item-2 a {background:url(../images/soc-icon-2.png) no-repeat 0 0;} | + | .social-links li.item-2 a {background:url(http://webhost1.ust.hk/~igemasia/images/soc-icon-2.png) no-repeat 0 0;} |
- | .social-links li.item-3 a {background:url(../images/soc-icon-3.png) no-repeat 0 0;} | + | .social-links li.item-3 a {background:url(http://webhost1.ust.hk/~igemasia/images/soc-icon-3.png) no-repeat 0 0;} |
- | .social-links li.item-4 a {background:url(../images/soc-icon-4.png) no-repeat 0 0;} | + | .social-links li.item-4 a {background:url(http://webhost1.ust.hk/~igemasia/images/soc-icon-4.png) no-repeat 0 0;} |
- | .social-links li.item-5 a {background:url(../images/soc-icon-5.png) no-repeat 0 0;} | + | .social-links li.item-5 a {background:url(http://webhost1.ust.hk/~igemasia/images/soc-icon-5.png) no-repeat 0 0;} |
.social-links li a:hover {text-decoration:underline;} | .social-links li a:hover {text-decoration:underline;} | ||
.social-links li.item-4 {padding:0 0 5px 0;} | .social-links li.item-4 {padding:0 0 5px 0;} | ||
Line 389: | Line 389: | ||
padding:0; | padding:0; | ||
margin:0; | margin:0; | ||
- | background:url(../images/hr-border-large.png) no-repeat center 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/hr-border-large.png) no-repeat center 0; |
position:relative; | position:relative; | ||
overflow:hidden; | overflow:hidden; | ||
Line 402: | Line 402: | ||
bottom:-15px; | bottom:-15px; | ||
height:15px; | height:15px; | ||
- | background:url(../images/img-shadow.png) no-repeat center 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/img-shadow.png) no-repeat center 0; |
} | } | ||
footer { | footer { | ||
padding:43px 0; | padding:43px 0; | ||
- | background:url(../images/footer-top-tail.gif) repeat-x 0 0; | + | background:url(http://webhost1.ust.hk/~igemasia/images/footer-top-tail.gif) repeat-x 0 0; |
overflow:hidden; | overflow:hidden; | ||
} | } | ||
Line 451: | Line 451: | ||
line-height:23px; | line-height:23px; | ||
padding:0 0 0 24px; | padding:0 0 0 24px; | ||
- | background:url(../images/def-list-1-marker.png) no-repeat 0 5px; | + | background:url(http://webhost1.ust.hk/~igemasia/images/def-list-1-marker.png) no-repeat 0 5px; |
} | } | ||
.def-list-1 dt a { | .def-list-1 dt a { | ||
Line 467: | Line 467: | ||
line-height:23px; | line-height:23px; | ||
padding:0 0 0 23px; | padding:0 0 0 23px; | ||
- | background:url(../images/def-list-2-marker.png) no-repeat 0 7px; | + | background:url(http://webhost1.ust.hk/~igemasia/images/def-list-2-marker.png) no-repeat 0 7px; |
} | } | ||
.def-list-2 dt a { | .def-list-2 dt a { | ||
Line 491: | Line 491: | ||
.link-1:hover {text-decoration:underline;} | .link-1:hover {text-decoration:underline;} | ||
- | .service-block.item-1 {background:url(../images/service-icon-1.png) no-repeat 0 6px;} | + | .service-block.item-1 {background:url(http://webhost1.ust.hk/~igemasia/images/service-icon-1.png) no-repeat 0 6px;} |
- | .service-block.item-2 {background:url(../images/service-icon-2.png) no-repeat 0 6px;} | + | .service-block.item-2 {background:url(http://webhost1.ust.hk/~igemasia/images/service-icon-2.png) no-repeat 0 6px;} |
- | .service-block.item-3 {background:url(../images/service-icon-3.png) no-repeat 0 6px;} | + | .service-block.item-3 {background:url(http://webhost1.ust.hk/~igemasia/images/service-icon-3.png) no-repeat 0 6px;} |
- | .service-block.item-4 {background:url(../images/service-icon-4.png) no-repeat 0 6px;} | + | .service-block.item-4 {background:url(http://webhost1.ust.hk/~igemasia/images/service-icon-4.png) no-repeat 0 6px;} |
- | .service-block.item-5 {background:url(../images/service-icon-5.png) no-repeat 0 6px;} | + | .service-block.item-5 {background:url(http://webhost1.ust.hk/~igemasia/images/service-icon-5.png) no-repeat 0 6px;} |
- | .service-block.item-6 {background:url(../images/service-icon-6.png) no-repeat 0 6px;} | + | .service-block.item-6 {background:url(http://webhost1.ust.hk/~igemasia/images/service-icon-6.png) no-repeat 0 6px;} |
.service-block {padding:0 0 0 70px;} | .service-block {padding:0 0 0 70px;} | ||
- | .hr-border-small {background: url(../images/hr-border-small.png) no-repeat center bottom;} | + | .hr-border-small {background: url(http://webhost1.ust.hk/~igemasia/images/hr-border-small.png) no-repeat center bottom;} |
- | .hr-border-medium {background: url(../images/hr-border-medium.png) no-repeat center bottom;} | + | .hr-border-medium {background: url(http://webhost1.ust.hk/~igemasia/images/hr-border-medium.png) no-repeat center bottom;} |
.project-box { | .project-box { | ||
- | background: url(../images/project-box-tail.gif) repeat-x 0 0 #e8e8e8; | + | background: url(http://webhost1.ust.hk/~igemasia/images/project-box-tail.gif) repeat-x 0 0 #e8e8e8; |
border-radius:6px; | border-radius:6px; | ||
-moz-border-radius:6px; | -moz-border-radius:6px; | ||
Line 561: | Line 561: | ||
font-size:13px; | font-size:13px; | ||
padding:9px 14px 10px 14px; | padding:9px 14px 10px 14px; | ||
- | background: url(../images/contact-form-tail1.gif) repeat-x 0 0 #e9e9e9; | + | background: url(http://webhost1.ust.hk/~igemasia/images/contact-form-tail1.gif) repeat-x 0 0 #e9e9e9; |
outline:none; | outline:none; | ||
font-family:Arial, Helvetica, sans-serif; | font-family:Arial, Helvetica, sans-serif; | ||
Line 581: | Line 581: | ||
font-size:13px; | font-size:13px; | ||
padding:9px 14px 10px 14px; | padding:9px 14px 10px 14px; | ||
- | background: url(../images/contact-form-tail2.gif) repeat-x 0 0 #e9e9e9; | + | background: url(http://webhost1.ust.hk/~igemasia/images/contact-form-tail2.gif) repeat-x 0 0 #e9e9e9; |
outline:none; | outline:none; | ||
font-family:Arial, Helvetica, sans-serif; | font-family:Arial, Helvetica, sans-serif; | ||
Line 631: | Line 631: | ||
display:inline-block; | display:inline-block; | ||
position:relative; | position:relative; | ||
- | z-index: | + | z-index:16; |
width:358px; | width:358px; | ||
} | } |
Latest revision as of 19:59, 19 August 2012