Team:SYSU-Software/tutorial.css
From 2013.igem.org
(Difference between revisions)
Line 11: | Line 11: | ||
+ | |||
+ | /*header images */ | ||
+ | #team-header{ | ||
+ | margin: 0 auto; | ||
+ | z-index: 100; | ||
+ | |||
+ | height: 200px; | ||
+ | width: 980px; | ||
+ | background-color: white; | ||
+ | |||
+ | font-family: 'Arial'; | ||
+ | } | ||
+ | #team-header-logo{ | ||
+ | position: relative; | ||
+ | left: 20px; | ||
+ | top:30px; | ||
+ | } | ||
+ | #team-header-text{ | ||
+ | position: relative; | ||
+ | left: 130px; | ||
+ | top: -67px; | ||
+ | } | ||
+ | |||
+ | #boss-header-image{ | ||
+ | position: relative; | ||
+ | left: 285px; | ||
+ | top: -85px; | ||
+ | } | ||
+ | |||
+ | /*navigation*/ | ||
+ | #navigation{ | ||
+ | float: right; | ||
+ | height: 40px; | ||
+ | |||
+ | z-index: 100; | ||
+ | |||
+ | position: relative; | ||
+ | top: -37px; | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | margin-bottom: 0px; | ||
+ | overflow: visible; | ||
+ | } | ||
+ | |||
+ | .nav{ | ||
+ | display: inline; | ||
+ | |||
+ | height: 40px; | ||
+ | background-color:#A8DBD2; | ||
+ | } | ||
+ | |||
+ | .navbar-inverse .nav > li > a{ | ||
+ | font-size: 14px; | ||
+ | border: none; | ||
+ | height: 40px; | ||
+ | padding:0px 20px; | ||
+ | |||
+ | line-height: 40px; | ||
+ | } | ||
+ | #nav-li{ | ||
+ | height: 40px; | ||
+ | } | ||
+ | |||
+ | .navbar-inverse .nav > li.active > a{ | ||
+ | background-color: #FFE14B; | ||
+ | height: 40px; | ||
+ | } | ||
+ | .navbar-inverse .nav > li.active > a{ | ||
+ | background-color: #FFE14B; | ||
+ | } | ||
+ | /*sub navs*/ | ||
+ | #sub-link1{ | ||
+ | width:90px; | ||
+ | background-color:#A8DBD2; | ||
+ | } | ||
+ | .navbar .nav > li > ul:before { | ||
+ | border-width: 0px; | ||
+ | } | ||
+ | |||
+ | #sub-link2{ | ||
+ | width:100px; | ||
+ | background-color:#A8DBD2; | ||
+ | } | ||
+ | #sub-link3{ | ||
+ | width:135px; | ||
+ | background-color:#A8DBD2; | ||
+ | |||
+ | } | ||
+ | #sub-link4{ | ||
+ | background-color:#A8DBD2; | ||
+ | width:70px; | ||
+ | } | ||
/*the tutorial content*/ | /*the tutorial content*/ | ||
Line 116: | Line 209: | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
+ | |||
+ | /*footer*/ | ||
+ | #team-footer{ | ||
+ | width: 980px; | ||
+ | margin:0 auto; | ||
+ | |||
+ | position: relative; | ||
+ | bottom: 0px; | ||
+ | overflow: hidden; | ||
+ | |||
+ | background-color: #ebdfd2; | ||
+ | } | ||
+ | /*instructions*/ | ||
+ | #team-sub{ | ||
+ | position: relative; | ||
+ | |||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | #subscribe{ | ||
+ | position: relative; | ||
+ | } | ||
+ | #subscribe-header{ | ||
+ | position: relative; | ||
+ | top: 25px; | ||
+ | left: 145px; | ||
+ | |||
+ | font-weight: bolder; | ||
+ | font-size: 25px; | ||
+ | } | ||
+ | #subscribe-content{ | ||
+ | position: relative; | ||
+ | top: 45px; | ||
+ | left: 145px; | ||
+ | |||
+ | font-weight: bold; | ||
+ | line-height: 10px; | ||
+ | } | ||
+ | #link{ | ||
+ | position: relative; | ||
+ | left: 100px; | ||
+ | } | ||
+ | #link-header{ | ||
+ | position: relative; | ||
+ | top: 20px; | ||
+ | left: 180px; | ||
+ | |||
+ | font-weight:bolder; | ||
+ | font-size: 25px; | ||
+ | } | ||
+ | #link-content{ | ||
+ | position: relative; | ||
+ | top: 34px; | ||
+ | left: 180px; | ||
+ | } | ||
+ | |||
+ | #link-content a{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | /*bottom image*/ | ||
+ | #bottom-image{ | ||
+ | position: relative; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
Revision as of 08:23, 7 September 2013
*{ padding:0px; margin: 0px; } body { height: 100%; width: 100%; background-color: #CCC; font-family: 'Arial'; }
/*header images */ #team-header{ margin: 0 auto; z-index: 100;
height: 200px; width: 980px; background-color: white;
font-family: 'Arial'; } #team-header-logo{ position: relative; left: 20px; top:30px; } #team-header-text{ position: relative; left: 130px; top: -67px; }
#boss-header-image{ position: relative; left: 285px; top: -85px; }
/*navigation*/ #navigation{ float: right; height: 40px;
z-index: 100;
position: relative; top: -37px; }
.navbar { margin-bottom: 0px; overflow: visible; }
.nav{ display: inline;
height: 40px; background-color:#A8DBD2; } .navbar-inverse .nav > li > a{ font-size: 14px; border: none; height: 40px; padding:0px 20px;
line-height: 40px; } #nav-li{ height: 40px; } .navbar-inverse .nav > li.active > a{ background-color: #FFE14B; height: 40px; } .navbar-inverse .nav > li.active > a{ background-color: #FFE14B; } /*sub navs*/ #sub-link1{ width:90px; background-color:#A8DBD2; } .navbar .nav > li > ul:before { border-width: 0px; }
#sub-link2{ width:100px; background-color:#A8DBD2; } #sub-link3{ width:135px; background-color:#A8DBD2;
} #sub-link4{ background-color:#A8DBD2; width:70px; }
/*the tutorial content*/
- tutorial-container{
width: 980px; margin: 0 auto; height: 100%;
background-color: #544444;
}
.subnav{
float: right;
padding-right: 4px; padding-top: 15px; font-size: 15px;
} .subnav a{
color: white;
}
- tutorial-header{
padding-top: 30px; padding-bottom: 30px; font-size: 39px; color: white; font-weight: 900;
text-align: center;
}
- tutorial-list{
position: relative; left: 51px;
padding-top: 10px;
}
- list-header{
font-size: 23px; color: white;
padding-bottom: 10px;
}
- tutorial-list ul{
position: relative; left: -22px; list-style: none;
padding-bottom: 70px;
} .mainnav li a{
font-size: 15px; color: white;
}
- part-header{
font-size: 23px; color: white;
padding-bottom: 7px;
}
- part-content{
width: 878px; height: 690px;
padding-top: 17px;
}
- part-text{
padding-top: 40px; padding-bottom: 220px;
width: 720px; margin: 0 auto; font-size: 18px; color: white;
}
- part1{
width: 880px; height: 100%;
margin: 0 auto;
}
- part2{
width: 880px; height: 100%;
margin: 0 auto;
}
- part3{
width: 880px; height: 100%;
margin: 0 auto;
}
- part4{
width: 880px; height: 100%;
margin: 0 auto;
}
- part5{
width: 880px; height: 100%;
margin: 0 auto;
}
/*footer*/
#team-footer{ width: 980px; margin:0 auto;
position: relative; bottom: 0px; overflow: hidden;
background-color: #ebdfd2; } /*instructions*/ #team-sub{ position: relative;
margin-bottom: 30px; } #subscribe{ position: relative; } #subscribe-header{ position: relative; top: 25px; left: 145px;
font-weight: bolder; font-size: 25px; } #subscribe-content{ position: relative; top: 45px; left: 145px;
font-weight: bold; line-height: 10px; } #link{ position: relative; left: 100px; } #link-header{ position: relative; top: 20px; left: 180px;
font-weight:bolder; font-size: 25px; } #link-content{ position: relative; top: 34px; left: 180px; }
#link-content a{ text-decoration: none; } /*bottom image*/ #bottom-image{ position: relative; bottom: 0px; }
a:focus{ outline-color:#544444; }