Template:Team:BAU-Indonesia/css

From 2012.igem.org

(Difference between revisions)
(Created page with "assss")
 
(72 intermediate revisions not shown)
Line 1: Line 1:
-
assss
+
<html>
 +
<style>
 +
 
 +
/*
 +
Design by Metamorphosis Design
 +
http://www.metamorphozis.com
 +
Released for free under a Creative Commons Attribution 2.5 License
 +
*/
 +
 
 +
*{
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 
 +
img{
 +
    padding: 0px;
 +
    border: none;
 +
}
 +
 
 +
a{
 +
    color: #000;
 +
    text-decoration: none;
 +
    font-weight: bold;
 +
}
 +
 
 +
a:hover {
 +
    text-decoration: none;
 +
    color: #c70000;
 +
}
 +
 
 +
h2{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 24px;
 +
color: #000;
 +
font-weight: normal;
 +
background: url(images/title_bg.png) repeat-x bottom;
 +
padding-bottom: 3px;
 +
}
 +
 
 +
h3{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 20px;
 +
color: #000;
 +
font-weight: normal;
 +
padding-bottom: 3px;
 +
margin-bottom: 5px;
 +
}
 +
 
 +
h4{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 18px;
 +
color: #000;
 +
font-weight: normal;
 +
padding-bottom: 6px;
 +
background: url(images/title_bg.png) repeat-x bottom;
 +
}
 +
 
 +
p{
 +
color:#000;}
 +
 
 +
body {
 +
    font-family: Arial, Helvetica, sans-serif;
 +
    font-size: 12px;
 +
    line-height: 22px;
 +
    color: #ffffff;
 +
    background: #000000 url(https://static.igem.org/mediawiki/2012/archive/9/98/20120923184816%21Bg.jpg);
 +
}
 +
 
 +
.clear{
 +
clear: both;
 +
}
 +
 
 +
#bg_top{
 +
background: url(images/bg_top.jpg) no-repeat center top;
 +
min-height: 100%;
 +
}
 +
 
 +
#wrap{
 +
width: 1016px;
 +
margin: 0 auto;
 +
padding: 9px 0px 0px 0px;
 +
}
 +
 
 +
#wrap_bg{
 +
width: 1216px;
 +
margin: 0 auto;
 +
 +
}
 +
 
 +
/*menu*/
 +
 
 +
#menu{
 +
float: right;
 +
width: 573px;
 +
height: 39px;
 +
}
 +
 
 +
#menu ul {
 +
    padding-left: 10px;
 +
    padding-top: 7px;
 +
    margin: 0px;
 +
}
 +
 
 +
#menu li {
 +
    display: inline;
 +
}
 +
 
 +
#menu a {
 +
    font-family: Arial, Helvetica, sans-serif;
 +
    font-size: 14px;
 +
    font-weight: normal;
 +
    display: block;
 +
    float: left;
 +
    width: 108px;
 +
    height: 26px;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    color: #AFAFAF;
 +
padding-right: 2px;
 +
padding-top: 3px;
 +
}
 +
 
 +
#menu .but1_menu a:hover, #menu .but1_menu .active {
 +
    height: 26px;
 +
    background: url(images/menu_active1.png) no-repeat center top;
 +
color: #ffffff;
 +
}
 +
 
 +
#menu .but2_menu a:hover, #menu .but2_menu .active {
 +
    height: 26px;
 +
    background: url(images/menu_active1.png) no-repeat center top;
 +
color: #ffffff;
 +
}
 +
 
 +
#menu .but3_menu a:hover, #menu .but3_menu .active {
 +
    height: 26px;
 +
    background: url(images/menu_active1.png) no-repeat center top;
 +
color: #ffffff;
 +
}
 +
 
 +
#menu .but4_menu a:hover, #menu .but4_menu .active {
 +
    height: 26px;
 +
    background: url(images/menu_active1.png) no-repeat center top;
 +
color: #ffffff;
 +
}
 +
 
 +
#menu .but5_menu a:hover, #menu .but5_menu .active {
 +
    height: 26px;
 +
    background: url(images/menu_active1.png) no-repeat center top;
 +
color: #ffffff;
 +
}
 +
/*logo*/
 +
 
 +
#logo{
 +
height: 110px;
 +
padding-top: 70px;
 +
margin-top:-70px;
 +
margin-bottom:30px;
 +
margin-left:10px;
 +
}
 +
 
 +
#logo h1 a{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 16px;
 +
color: #ffffff;
 +
font-style: italic;
 +
font-weight: normal;
 +
}
 +
 
 +
#logo a small{
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 12px;
 +
color: #ffffff;
 +
font-style: italic;
 +
font-weight: normal;
 +
}
 +
 
 +
/*prew_box*/
 +
 
 +
#prew_box{
 +
background: url(https://static.igem.org/mediawiki/2012/3/36/Prew_bg.png) no-repeat top left;
 +
height: 329px;
 +
padding: 11px;
 +
}
 +
 
 +
#prew_but_box{
 +
width: 76px;
 +
margin: 0 auto;
 +
height: 20px;
 +
padding-top: 20px;
 +
}
 +
 
 +
#prew_but_left{
 +
float: left;
 +
}
 +
 
 +
#prew_but_right{
 +
float: right;
 +
}
 +
 
 +
/*content*/
 +
 
 +
#content{
 +
color: #ffffff;
 +
 +
margin-top: 10px;
 +
padding: 10px;
 +
}
 +
 
 +
.text{
 +
padding: 10px 0px 0px 0px;
 +
}
 +
 
 +
.italic_style{
 +
font-style: italic;
 +
}
 +
 
 +
.read{
 +
float: right;
 +
padding: 0px 10px 0px 0px;
 +
}
 +
 
 +
.read a{
 +
color: #c70000;
 +
font-weight: normal;
 +
}
 +
 
 +
.read a:hover{
 +
color: #000000;
 +
}
 +
 
 +
#left_column{
 +
width: 633px;
 +
float: left;
 +
}
 +
 
 +
.left_news_top{
 +
height: 22px;
 +
padding-top: 13px;
 +
}
 +
 
 +
.left_news_bg{
 +
padding: 0px 20px 0px 20px;
 +
}
 +
 
 +
.left_news_bot{
 +
height: 22px;
 +
}
 +
 
 +
#right_column{
 +
width: 360px;
 +
float: right;
 +
}
 +
 
 +
.right_news_top{
 +
height: 22px;
 +
padding-top: 13px;
 +
}
 +
 
 +
.right_news_bg{
 +
padding: 0px 20px 0px 20px;
 +
}
 +
 
 +
.right_news_bot{
 +
height: 22px;
 +
}
 +
 
 +
/*footer*/
 +
 
 +
#footer{
 +
padding: 10px 0px 20px 0px;
 +
color: #ffffff
 +
}
 +
 
 +
#footer a{
 +
color: #ffffff;
 +
}
 +
 
 +
#footer a:hover{
 +
color: #c70000;
 +
}
 +
 
 +
 
 +
#footer_bottom
 +
{
 +
padding-top: 10px;
 +
font-size: 10px;
 +
padding-left: 60px;
 +
}
 +
 
 +
#footer_bottom a{
 +
font-weight: normal;
 +
}
 +
 
 +
 
 +
.row-top {width:100%;padding:33px 0 42px;}
 +
.row-padding {padding:0 62px}
 +
.col-1, .col-2, .col-3, .col-4  {float:left}
 +
.list-services li {line-height:24px;padding-left:28px; list-style:none}
 +
.list-services li a {color:#9d9d9d;text-decoration:none}
 +
.list-services li a:hover {text-decoration:underline}
 +
.list-services li.item-1 {background:url(images/facebook.png) 0 3px no-repeat}
 +
.list-services li.item-2 {background:url(https://static.igem.org/mediawiki/2012/3/35/Twitterads.png) no-repeat}
 +
.list-services li.item-3 {background:url(images/linkedin.png) 0 3px no-repeat}
 +
.menu li a, .list-1 li a,  {text-decoration:none}
 +
.list-1 li {line-height:24px;padding-left:10px;background:url(images/marker.gif) 0 10px no-repeat;  list-style:none}
 +
.list-1 li a {display:inline-block;color:#9d9d9d}
 +
.list-1 li a:hover {text-decoration:underline}
 +
 
 +
.indent3 {padding-top:28px}
 +
.footer-logo {display:block;color:#666666;font-size:30px;line-height:1em;text-transform:uppercase;letter-spacing:-3px;font-weight:400;margin-bottom:5px}
 +
.footer-logo strong {color:#666666;text-transform:none;display:inline-block}
 +
.phone {display:inline-block;font-size: 24px;line-height:1.2em;color:#666666;letter-spacing:-1px;padding-left:5px}
 +
.phone strong {color:#666666}
 +
.col-1 {width:190px;margin-right:55px}
 +
.col-2 {width:110px;margin-right:55px}
 +
.col-3 {width:140px;margin-right:65px}
 +
.col-4 {width:235px}
 +
 
 +
 
 +
.ls{
 +
    list-style: none;
 +
    padding-left: 0px;
 +
}
 +
 
 +
.ls li{
 +
    background: url(images/ls.gif) no-repeat 0px 7px;
 +
    margin-bottom: 4px;
 +
    padding-left: 15px;
 +
}
 +
 
 +
.ls2{
 +
    list-style: none;
 +
    padding-left: 0px;
 +
padding-top: 5px;
 +
}
 +
 
 +
.ls2 li{
 +
    background: url(images/ls2.gif) no-repeat 0px 7px;
 +
    padding-bottom: 4px;
 +
    padding-left: 15px;
 +
}
 +
 
 +
.button_box{
 +
padding-top: 5px;
 +
}
 +
 
 +
.button_box a{
 +
padding-right: 20px;
 +
}
 +
 
 +
/*blog*/
 +
 
 +
.news_top{
 +
    clear: both;
 +
}
 +
 
 +
.layer_border{
 +
background: url(images/title_bg.jpg) repeat-x bottom;
 +
padding-bottom: 3px;
 +
}
 +
 
 +
.news_top_left{
 +
    background: url(images/date_bg.jpg) no-repeat right;
 +
    width: 45px;
 +
    height: 42px;
 +
    float: left;
 +
    text-align: center;
 +
margin: 5px 0px 0px 0px;
 +
}
 +
 
 +
.news_top_left .date_day{
 +
    color: #ffffff;
 +
    font-family: Arial, Helvetica, sans-serif;
 +
    font-size: 12px;
 +
    font-weight: normal;
 +
    padding-top: 8px;
 +
line-height: 12px;
 +
}
 +
 
 +
.news_top_left .date_month{
 +
    color: #ffffff;
 +
    font-family: Arial, Helvetica, sans-serif;
 +
    font-size: 12px;
 +
    font-weight: normal;
 +
}
 +
 
 +
.news_top_right{
 +
    float: left;
 +
    padding-left: 15px;
 +
    width: 529px;
 +
}
 +
 
 +
.title_post_left{
 +
float: left;
 +
}
 +
 
 +
.title_post_right{
 +
float: right;
 +
}
 +
 
 +
/*gallery*/
 +
 
 +
.gallery_top{
 +
background: url(images/gallery_top.jpg) no-repeat;
 +
height: 21px;
 +
}
 +
 +
.gallery_bg{
 +
background: url(images/gallery_bg.jpg) repeat-y left;
 +
padding: 0px 11px 0px 11px;
 +
}
 +
 +
  .gallery_bot{
 +
background: url(images/gallery_bot.jpg) no-repeat;
 +
height: 21px;
 +
}
 +
 +
.gal{
 +
background: url(images/gal_bg.jpg) no-repeat 0px 0px;
 +
width: 457px;
 +
height: 250px;
 +
padding: 10px 10px 10px 10px;
 +
float: left;
 +
margin: 0px 10px 0px 10px;
 +
}
 +
 +
.gal h3{
 +
background: none;
 +
margin-bottom: 0px;
 +
}
 +
 +
.gal_img{
 +
border: 1px solid #ffffff;
 +
}
 +
 +
.gal p{
 +
color: #000000;
 +
}
 +
 +
.razd{
 +
height: 10px;
 +
clear: both;
 +
}
 +
 
 +
.pagenav{
 +
padding-left: 10px;
 +
}
 +
 +
.pagenav ul{
 +
list-style: none;
 +
padding: 0px;
 +
}
 +
 +
.pagenav ul li a{
 +
display: block;
 +
float: left;
 +
background: url(images/pagenav_bg.jpg) no-repeat;
 +
width: 20px;
 +
height: 21px;
 +
line-height: 21px;
 +
text-align: center;
 +
color: #ffffff;
 +
margin-right: 5px;
 +
font-weight: normal;
 +
}
 +
 +
.pagenav ul li a:hover{
 +
color: #ffffff;
 +
background: url(images/pagenav_select.jpg) no-repeat;
 +
}
 +
 
 +
.pagenav ul li .select{
 +
color: #ffffff;
 +
background: url(images/pagenav_select.jpg) no-repeat;
 +
}
 +
 
 +
/*about*/
 +
 
 +
.date_news{
 +
text-decoration: underline;
 +
}
 +
 
 +
.news{
 +
padding: 10px 0px 20px 0px;
 +
}
 +
 
 +
/*contact*/
 +
 
 +
#contact_form fieldset {
 +
    border: none;
 +
padding-top: 20px;
 +
}
 +
 
 +
#contact_form input {
 +
    margin-bottom: 5px;
 +
}
 +
 
 +
#contact-submit, #contact-clear{
 +
    width: 74px;
 +
    height: 19px;
 +
    color: #efefef;
 +
    background: url(images/contact_but.jpg);
 +
    background-repeat: no-repeat;
 +
    background-position: left bottom;
 +
    border: none;
 +
    font-family: Arial, Helvetica, sans-serif;
 +
    font-size: 12px;
 +
    font-weight: normal;
 +
font-style: italic;
 +
margin-right: 40px;
 +
}
 +
 
 +
#con_name, #con_email, #con_website {
 +
    width: 571px;
 +
    height: 29px;
 +
    padding-top: 0px;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    border: none;
 +
    background: url(images/contact_input.jpg);
 +
    background-repeat: no-repeat;
 +
    background-position: left top;
 +
    color: #373636;
 +
line-height: 29px;
 +
}
 +
 
 +
#con_mess {
 +
    width: 571px;
 +
    height: 103px;
 +
    padding-top: 4px;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    padding-bottom: 15px;
 +
    border: none;
 +
    background: url(images/contact_mess.jpg);
 +
    background-repeat: no-repeat;
 +
    background-position: left top;
 +
    color: #373636;
 +
    margin-bottom: 15px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
    font-size: 12px;
 +
}
 +
 
 +
.pad_left{
 +
    padding-left: 30px;
 +
}
 +
 
 +
.contact_news{
 +
padding-top: 15px;
 +
}
 +
 
 +
 
 +
 
 +
/*=================================*/
 +
/* Nivo Slider Demo
 +
/* November 2010
 +
/* By: Gilbert Pellegrom
 +
/* http://dev7studios.com
 +
/*=================================*/
 +
 
 +
 
 +
#slider-wrapper {
 +
    background:url(images/top.jpg) no-repeat;
 +
    width:994px;
 +
    height: 299px;
 +
    margin:0 auto;
 +
}
 +
 
 +
#slider {
 +
position:relative;
 +
    width: 994px;
 +
    height: 299px;
 +
background:url(https://static.igem.org/mediawiki/2012/c/cf/Syu6.gif) no-repeat 50% 50%;
 +
}
 +
#slider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
display:none;
 +
}
 +
#slider a {
 +
border:0;
 +
display:block;
 +
}
 +
 
 +
.nivo-controlNav {
 +
position:absolute;
 +
left: 440px;
 +
bottom:-42px;
 +
 
 +
}
 +
.nivo-controlNav a {
 +
display:block;
 +
width:22px;
 +
height:22px;
 +
background:url(https://static.igem.org/mediawiki/2012/7/72/Loadingggs.gif) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
margin-right:3px;
 +
float:left;
 +
}
 +
.nivo-controlNav a.active {
 +
background-position:0 -22px;
 +
}
 +
 
 +
.nivo-directionNav a {
 +
display:block;
 +
width:30px;
 +
height:30px;
 +
background:url(https://static.igem.org/mediawiki/2012/2/2c/Tahu.png) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
}
 +
a.nivo-nextNav {
 +
background-position:-30px 0;
 +
right:15px;
 +
}
 +
a.nivo-prevNav {
 +
left:15px;
 +
}
 +
 
 +
.nivo-caption {
 +
    text-shadow:none;
 +
    font-family: Helvetica, Arial, sans-serif;
 +
}
 +
.nivo-caption a {
 +
    color:#efe9d1;
 +
    text-decoration:underline;
 +
}
 +
 
 +
/*-----------------*/
 +
#floatMenu {
 +
position:absolute;
 +
top:10px;
 +
left:65%;
 +
margin-left:-870px;
 +
width:100px;}
 +
#floatMenu ul {list-style-type: none;}
 +
#floatMenu ul li a {
 +
display:block;
 +
background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
 +
background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
 +
border:0px solid #99;
 +
border-left:3px solid #fff;
 +
text-decoration:none;
 +
color:#fff;
 +
padding:5px 5px 5px 25px;
 +
width:100px;
 +
-moz-border-radius-topleft: 5px;
 +
-moz-border-radius-bottomright: 5px;
 +
-moz-border-radius-bottomleft: 15px;
 +
-moz-border-radius-topright: 15px;
 +
-webkit-border-top-right-radius: 15px;
 +
-webkit-border-bottom-left-radius: 15px;
 +
-webkit-transition: all 0.6s ease-out;
 +
box-shadow: #333 0px 0px 10px;
 +
-moz-box-shadow: #333 0px 0px 10px;
 +
-webkit-box-shadow: #333 0px 0px 10px;
 +
}
 +
#floatMenu ul li a:hover {
 +
color:#AD3D29;
 +
background-color: #000;
 +
border-right:3px solid #999;
 +
width:100px;
 +
-moz-border-radius-topleft: 15px;
 +
-moz-border-radius-topright: 5px;
 +
-moz-border-radius-bottomright: 15px;
 +
-moz-border-radius-bottomleft: 5px;
 +
-webkit-border-top-left-radius: 15px;
 +
-webkit-border-top-right-radius: 0px;
 +
-webkit-border-bottom-right-radius: 15px;
 +
-webkit-border-bottom-left-radius: 0px;
 +
}
 +
#floatMenu ul.menu1 li a:hover {border-color:#bdbdbd;}
 +
#s {
 +
background:#AD3D29;
 +
color:#00ff00;
 +
width:230px;
 +
padding-left:15px;
 +
font-weight:bold;
 +
font-size:10px;
 +
padding:1px;
 +
border-bottom:1px solid #F0F0F0;
 +
border-right:1px solid #F0F0F0;
 +
border-top:1px solid #F0F0F0;
 +
border-left:0;
 +
font-family: Verdana;
 +
}
 +
 
 +
 
 +
 
 +
/*accordion menu tutorial for you
 +
**************************************/
 +
 
 +
#isinya{
 +
color:#000;
 +
}
 +
 +
 +
.verticalaccordion>ul {
 +
    margin: 0;
 +
margin-left:0px;
 +
margin-top:0px;
 +
    padding: 0;
 +
    list-style:none;
 +
  width: 300px;
 +
 +
}
 +
 
 +
.verticalaccordion>ul>li {
 +
    display:block;
 +
    overflow: hidden;
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style:none;
 +
    height:40px;
 +
    width: 300px;
 +
 
 +
    /* Decorative CSS */
 +
    background-color:#f0f0f0;
 +
 
 +
    /* CSS3 Transition Effect */
 +
    transition: height 0.3s ease-in-out;
 +
    -moz-transition: height 0.3s ease-in-out;
 +
    -webkit-transition: height 0.3s ease-in-out;
 +
    -o-transition: height 0.3s ease-in-out;
 +
 
 +
}
 +
 
 +
.verticalaccordion>ul>li>h3 {
 +
    font-weight:normal;
 +
    margin: 0;
 +
    padding:10px;
 +
    height:19px;
 +
 +
 
 +
    /* Decorative CSS */
 +
    border-top:#f0f0f0 1px solid;
 +
    font-family: Flavors, Helvetica, sans-serif;
 +
    text-decoration:none;
 +
    color: #000;
 +
    background: #cccccc;
 +
 
 +
    /* CSS3 Gradient Effect */
 +
    background: -moz-linear-gradient( top, #999999, #cccccc);
 +
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";  /* IE 8 */
 +
}
 +
 
 +
.verticalaccordion>ul>li>div {
 +
    margin:0;
 +
    overflow: auto;
 +
    padding:10px;
 +
    height:600px;
 +
}
 +
 
 +
.verticalaccordion>ul>li:hover {
 +
    height: 600px;
 +
}
 +
 
 +
.verticalaccordion:hover>ul>li:hover>h3 {
 +
    /* Decorative CSS */
 +
    color:#FFF;
 +
    background: #000000;
 +
 
 +
    /* CSS3 Gradient Effect */
 +
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
 +
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";  /* IE 8 */
 +
}
 +
 
 +
.verticalaccordion>ul>li>h3:hover {
 +
    cursor:pointer;}
 +
 +
 +
 +
</style>
 +
</html>

Latest revision as of 22:34, 26 September 2012

Retrieved from "http://2012.igem.org/Template:Team:BAU-Indonesia/css"