Template:RoyChung CSS

From 2012.igem.org

Revision as of 09:21, 18 August 2012 by RoyChung (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

@import"reset.css";@import"grid.css";@import"prettyPhoto.css"; body{font:18px/23px Arial, Helvetica, sans-serif;color:#626262;position:relative;min-width:960px;line-height:2;background: url(../images/body-tail.gif);} html,body{height:100%;} p {padding-bottom:23px;} .p{padding-bottom:23px !important;} .p0{padding-bottom:0 !important} .p1{padding-bottom:29px !important} .p2{padding-bottom:38px !important} .p4 {padding-bottom:7px !important} a{color:#14829e;outline:none;cursor:pointer;text-decoration:none;} a:hover{ text-decoration: underline; color: #30b0d0; } /* Header styles */ h1,h2,h3,h4,h5,h6{color:#1f1f1f;font-weight: normal;padding-top:37px;line-height:1.3em;} h1{font-size:40px;} h2{font-size:38px;} h3{font-size:30px; line-height:36px;} h4{font-size:25px;} h5{font-size:21px;} h6{font-size:18px;} .hp-1 {padding:0 0 32px 0;} .hp-2 {padding:0 0 35px 0;} .hp-3 {padding:0 0 24px 0;} .hp-4 {padding:0 0 44px 0;} .relative{position:relative;z-index:4} /* Global Structure---------------------------------------- */ .main{margin:0 auto;width:960px;position:relative;} .container_12 {position:relative;} .wrapper{width:100%;overflow:hidden; position:relative;} /*----- txt,links,lines,titles -----*/ .extra-wrap{overflow:hidden;display:block;} .fleft{float:left} .fright{float:right} .alignright{text-align:right} .aligncenter{text-align:center} .alignmiddle *{vertical-align:middle} .it{font-style:italic} .impact {word-spacing:-1px;white-space:nowrap;} .color1{color:#ff2100;} .color-1 {color:#2e2e2e;} /*********************************header*************************************/ header { position:relative; z-index:10; background:url(../images/header-tail.png) repeat-x 0 0; } header .main-bg {background:url(../images/header-tail.png) repeat-x 0 0;} header .inner { padding:0px 0 0px; width:940px; margin:0 auto; overflow:hidden; }

.logo { float:left; width:170px; height:48px; background:url(../images/igem logo.png); overflow:visible; text-indent:-999em; } .nav-container { background: url(../images/nav-top-tail.gif) repeat-x 0 0; padding:1px 0 0 0; } header nav { position:relative; width:940px; margin:0 auto; background: url(../images/nav-first-border.gif) no-repeat 0 0; }

nav { position:relative; width:940px; margin:0 auto; background: url(../images/nav-first-border.gif) no-repeat 0 0; }

.sf-menu{ font-size:0; line-height:0; height:50px; padding:0; margin:0; } .sf-menu ul{ position:absolute; top:-999em; width:158px; left:0; display:none; margin:0; padding:11px 0; background:#1f1f1f; } .sf-menu ul ul {background:#2d2d2d;} .sf-menu > li{ float:left; position:relative; padding:0; margin:0; width:157px; background:url(../images/nav-separator.gif) no-repeat right 0; } .sf-menu > li:first-child, .sf-menu > li:first-child+li {width:156px;} .sf-menu > li > a { text-decoration:none; display:block; font-size:14px; line-height:18px; color:#fff; text-shadow:0 1px #171717; position:relative; white-space:nowrap; padding:15px 0 17px; text-align:center; } .sf-menu > li.current > a, .sf-menu > li.sfHover > a, .sf-menu > li > a:hover {background:url(../images/nav-active.png) no-repeat -1px 0;}

.sf-menu li:hover ul,.sf-menu li.sfHover ul{top:50px; left:-1px;z-index:20 !important;} .sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} .sf-menu li li a{ display:block; margin:0; position:relative; text-decoration:none; font-size:13px; line-height:18px; color:#6c6c6c; padding:11px 0 11px 20px; overflow:hidden; text-transform: capitalize; border-bottom:1px solid #1f1f1f; } .sf-menu li li li a {border-bottom:1px solid #2d2d2d;} .sf-menu li li { position:relative; 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 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:hover ul,ul.sf-menu li li.sfHover ul{left:159px;top:-11px;} /********************** Content ************************/ section#content { position:relative; z-index:4; background:url(../images/content-main-bg.png) repeat 0 0 #dfdfdf; background-attachment:fixed; } section#content .main-bg {background:url(../images/content-main-bg.png) repeat center 0;background-attachment:fixed;} section#content .content-inner { background:url(../images/content-main-bg.png) repeat 0 0; background-attachment:fixed; padding:27px 0 60px 0; } article.a1 {margin: 0 10px;} .spacing {padding:51px 0 61px 0;} .spacing-2 {padding:0 0 36px 0;} .spacing-3 {padding-bottom:21px;} .spacing-4 {padding-bottom:35px;} .spacing-5 {padding-bottom:62px;} .pad-bot {padding-bottom:24px;} .pad-top {padding-top:42px;}


  1. main-search {

float:right; background:url(../images/main-search-bg.png) no-repeat 0 0; width:279px; height:37px; position:relative; margin:7px 0 0 0; } #main-search a { position:absolute; width:22px; height:32px; background:url(../images/main-search-submit.png) no-repeat 0 0; right:7px; top:3px; } #main-search a:hover {background:url(../images/main-search-submit.png) no-repeat 0 -32px;} #main-search input { font-family: Arial, Helvetica, sans-serif;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; background:none; outline:none; display:block; position:absolute; left:3px; top:3px; height:18px; color:#6d6d6d; font-size:14px; padding:6px 9px; width:220px; }

  1. main-newsletter-form {

float:right; background:url(../images/main-search-bg.png) no-repeat 0 0; width:279px; height:37px; position:relative; } #main-newsletter-form a { position:absolute; width:23px; height:33px; background: url(../images/newsletter-submit.png) no-repeat 0 0; right:6px; top:2px; } #main-newsletter-form a:hover {background: url(../images/newsletter-submit.png) no-repeat 0 -33px;} #main-newsletter-form input { font-family: Arial, Helvetica, sans-serif;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; background:none; outline:none; display:block; position:absolute; left:2px; top:2px; height:18px; color:#6f6f6f; font-size:14px; padding:6px 9px; width:220px; } .slider_bg { width:939px; margin:0 auto; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; padding:5px 0 1px 0; position:relative; } .slider { overflow:hidden; background:url(../images/loader.gif) 50% 50% no-repeat; width:931px; height:383px; margin:0 auto; position:relative; } .slider .items { display:none; } .pagination { overflow:hidden; padding:30px 0 0; position:relative; left:50%; margin-left:-42px; } .pagination li { float:left; margin-left:4px } .pagination li a { display:block; width:16px; height:16px; background: url(../images/slider-pagination.png) no-repeat right 0; } .pagination li a:hover,.pagination li.current a { background-position:0 0; } .pgination li:first-child { margin-left:0; } .lightbox-image-1{display:inline-block;position:relative;} a.border{padding:6px;background:#dededa;display:inline-block;} .lightbox-image-1 img{position:relative;z-index:2;} .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;}

.img-indent-bot{margin:0 0 29px !important} .img-indent-bot2{margin:7px 0 23px !important} .img-indent{float:left;margin:6px 20px 0 0;} .img-indent-ext{float:left;margin:6px 12px 0 0;} .img-indent-2{float:left;margin:6px 11px 0 0;} .img-indent-3{float:left;margin:6px 0 0 0;} .img-indent-r{float:right;margin:2px 0 10px 15px;}

.figure-1 { border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border:1px solid #b1b1b1; box-shadow:0 2px 3px #7d7d7d; -moz-box-shadow:0 2px 3px #7d7d7d; -webkit-box-shadow:0 2px 3px #7d7d7d; display:inline-block; position:relative; z-index:6; }

.button { display:inline-block; font-size:17px; line-height:17px; padding:7px 20px 7px 20px; background:url(../images/button-tail.gif) repeat-x 0 0 #e9e9e9; font-weight:bold; text-decoration:none; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border:1px solid #b1b1b1; box-shadow:0 -3px 0 #d3d3d3 inset, 0 2px 2px rgba(0,0,0,.4); -moz-box-shadow:0 -3px 0 #d3d3d3 inset, 0 2px 2px rgba(0,0,0,.4); -webkit-box-shadow:0 -3px 0 #d3d3d3 inset, 0 2px 2px rgba(0,0,0,.4); } .button:hover { background:#1f1f1f; color:#ececec; border:1px solid #000; box-shadow:0 -3px 0 #444 inset, 0 0 1px #656565 inset, 0 2px 2px rgba(0,0,0,.4); -moz-box-shadow:0 -3px 0 #444 inset, 0 0 1px #656565 inset, 0 2px 2px rgba(0,0,0,.4); -webkit-box-shadow:0 -3px 0 #444 inset, 0 0 1px #656565 inset, 0 2px 2px rgba(0,0,0,.4); text-decoration:none; }

em {color:#068eb5;} strong {color:#322e30;} strong.str1 { color:#1f1f1f; font-weight:bold; } .list-1 {padding:0 0 28px 0;} .list-1 li { background:url(../images/list-1-marker.png) no-repeat 0 10px; padding:0 0 10px 15px; line-height:23px; } .list-1 li a { color:#848484; text-decoration:none; } .list-1 li a:hover {text-decoration:underline;}

.news-block {padding:0 0 15px 0;} .news-block dt { display:block; font-size:13px; line-height:23px; color:#1f1f1f; font-weight:bold; padding:0 0 7px 0; } .news-block dd {padding:0 0 23px 0;} .news-block dd a { color:#848484; text-decoration:none; } .news-block dd a:hover {text-decoration:underline;} .social-links li { display:block; padding:0 0 18px 0; } .social-links li a { display: inline-block; font-size:13px; line-height:23px; color:#1f1f1f; font-weight:bold; text-decoration:none; 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-2 a {background:url(../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-4 a {background:url(../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 a:hover {text-decoration:underline;} .social-links li.item-4 {padding:0 0 5px 0;} .hr-border-large { height:2px; font-size:0; line-height:0; padding:0; margin:0; background:url(../images/hr-border-large.png) no-repeat center 0; position:relative; overflow:hidden; } .spacing-1 {padding:43px 0 0 0;}

.img-shadow { display:block; position:absolute; left:0; right:0; bottom:-15px; height:15px; background:url(../images/img-shadow.png) no-repeat center 0; } footer { padding:43px 0; background:url(../images/footer-top-tail.gif) repeat-x 0 0; overflow:hidden; } footer .inner { width:940px; margin:0 auto; overflow:hidden; } .footer-site-info { float:left; color:#5f5f5f; font-size:14px; line-height:19px; padding:7px 0 0 3px;

} .footer-site-info b { display:inline-block; font-size:30px; line-height:36px; color:#fff; margin:-10px 0 0 0; } .footer-site-info a { color:#5f5f5f; text-decoration:none;

} .footer-site-info a:hover {text-decoration:underline;} .history-block li { overflow:hidden; padding:0 0 20px 0; } .history-block li .date { float:left; width:40px; font-weight:bold; color:#1f1f1f; } .def-list-1 dt { display:block; color:#1f1f1f; font-size:13px; line-height:23px; padding:0 0 0 24px; background:url(../images/def-list-1-marker.png) no-repeat 0 5px; } .def-list-1 dt a { text-decoration:none; color:#1f1f1f; } .def-list-1 dt a:hover {text-decoration:underline;} .def-list-1 dd { padding:0 0 20px 24px; } .def-list-2 dt { display:block; color:#1f1f1f; font-size:13px; line-height:23px; padding:0 0 0 23px; background:url(../images/def-list-2-marker.png) no-repeat 0 7px; } .def-list-2 dt a { text-decoration:none; color:#1f1f1f; } .def-list-2 dt a:hover {text-decoration:underline;} .def-list-2 dd { padding:0 0 20px 23px; } .testimonials-block {padding:0 0 36px 0;overflow:hidden;width:100%;} .testimonials-block p {padding:12px 0 7px;} .testimonials-block blockquote { background:none; padding:0; font-size:13px; line-height:23px; } .link {color:#1f1f1f; text-decoration:none; font-weight:bold;} .link2 {color:#06C; text-decoration:none; font-weight:regular;} .link:hover{text-decoration: underline;} .link-1 {color:#848484;text-decoration:none;} .link-1:hover {text-decoration:underline;}

.service-block.item-1 {background:url(../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-3 {background:url(../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-5 {background:url(../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 {padding:0 0 0 70px;} .hr-border-small {background: url(../images/hr-border-small.png) no-repeat center bottom;} .hr-border-medium {background: url(../images/hr-border-medium.png) no-repeat center bottom;}

.project-box { background: url(../images/project-box-tail.gif) repeat-x 0 0 #e8e8e8; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0 0 2px #f5f5f5 inset, 0 -2px 0 #d3d3d3, 0 2px 3px #949393; -moz-box-shadow:0 0 2px #f5f5f5 inset, 0 -3px 0 #d3d3d3 inset, 0 2px 3px #949393; -webkit-box-shadow:0 0 2px #f5f5f5 inset, 0 -2px 0 #d3d3d3, 0 2px 3px #949393; padding:8px 11px 26px 11px; border:1px solid #aaa; } .project-box .project-name {display:block;padding:18px 0 7px 10px;} .project-box p {padding:0 0 0 10px !important;}

/* Contact form */

  1. contact-form input,#contact-form textarea {

font-family: Arial, Helvetica, sans-serif;font-size:13px;vertical-align:middle;font-weight:normal;margin:0;border:none;outline:none; }

  1. contact-form {

display:block; height:467px; width:540px; position:relative; }

  1. contact-form label {

display:block; height:49px; position:relative; } #contact-form label.message { height:auto; position:relative; }

  1. contact-form span {

display:none; color:#f00; margin:0 0 0 5px; font-size:11px; line-height:14px; }

  1. contact-form label span.errors {

display:block; margin:0; position:absolute; right:0; top:0; width:155px; } #contact-form label.message span.errors { display:block; position: relative; overflow:hidden; clear:both; width:auto; padding:3px 0 0 0; }

  1. contact-form input {

width:348px; font-size:13px; padding:9px 14px 10px 14px; background: url(../images/contact-form-tail1.gif) repeat-x 0 0 #e9e9e9; outline:none; font-family:Arial, Helvetica, sans-serif; display:block; color:#848484; margin:0; box-shadow:0 -3px 0 #d3d3d3 inset, 0 0 #f2f2f2 inset, 0 2px 3px #adadad; -moz-box-shadow:0 -3px 0 #d3d3d3 inset, 0 0 #f2f2f2 inset, 0 2px 3px #adadad; -webkit-box-shadow:0 -3px 0 #d3d3d3 inset, 0 0 #f2f2f2 inset, 0 2px 3px #adadad; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border:1px solid #a5a5a5; height:16px !important; }

  1. contact-form textarea {

height:236px; width:498px; font-size:13px; padding:9px 14px 10px 14px; background: url(../images/contact-form-tail2.gif) repeat-x 0 0 #e9e9e9; outline:none; font-family:Arial, Helvetica, sans-serif; display:block; color:#848484; margin:0; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0 -3px 0 #d3d3d3 inset, 0 0 #f2f2f2 inset, 0 2px 3px #9b9a9a; -moz-box-shadow:0 -3px 0 #d3d3d3 inset, 0 0 #f2f2f2 inset, 0 2px 3px #9b9a9a; -webkit-box-shadow:0 -3px 0 #d3d3d3 inset, 0 0 #f2f2f2 inset, 0 2px 3px #9b9a9a; border:1px solid #a5a5a5; overflow:auto; resize:none; }

  1. contact-form .btns {

padding:0; position:absolute; bottom:0; right:0; height:auto; width:auto; overflow:hidden; left:auto; padding:5px 10px 6px 5px; } #contact-form .btns a { float:right; margin:0 0 0 10px; } .success { display:none; font-size:13px; line-height:18px; padding:0; top:-18px; left:5px; position:absolute; word-spacing:-1px; color:#848484; } .map-container { display:inline-block; border:1px solid #b1b1b1; box-shadow:0 2px 3px #7d7d7d; -moz-box-shadow:0 2px 3px #7d7d7d; -webkit-box-shadow:0 2px 3px #7d7d7d; display:inline-block; position:relative; z-index:6; width:358px; } .map-container iframe { width:358px; height:264px; margin:0; border: none; }

.adress {padding:23px 0 0 0;} .adress dt { display:block; font-size:13px; line-height:23px; font-weight: bold; font-style:normal; color:#1f1f1f; text-transform:none; padding:0; width:400px; } .adress dt a {color:#181818; text-decoration:none;} .adress dt a:hover {text-decoration:underline;} .adress dd { font-size:13px; line-height:23px; padding:1; color:#848484; overflow:hidden; } .adress dd span { float:left; width:400px; } .adress dd a {color:#848484; text-decoration: none;} .adress dd a:hover {text-decoration: underline;} .try { color: #99FF66; } .try2 { color: #0066CC; } .try1 { color: #0033CC; } .try { color: #0033CC; } .words { color: #0066CC; }