Team:Goettingen/stylesheet
From 2014.igem.org
(Difference between revisions)
Gwen Eleven (Talk | contribs) (Created page with "<html> /* CSS Document */ - →reset padding, margin and list style: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding:...") |
Gwen Eleven (Talk | contribs) m |
||
(827 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | + | <style> | |
/* CSS Document */ | /* CSS Document */ | ||
Line 9: | Line 9: | ||
margin:0; | margin:0; | ||
list-style-type:none; | list-style-type:none; | ||
+ | list-style-image:url(''); | ||
+ | background-image:url(''); | ||
+ | border-bottom:none; | ||
} | } | ||
a{ | a{ | ||
+ | color:#6699FF; | ||
+ | } | ||
+ | |||
+ | a:link { | ||
text-decoration:none; | text-decoration:none; | ||
+ | color: #e98f00; | ||
} | } | ||
+ | |||
+ | a:visited { | ||
+ | text-decoration: none; | ||
+ | color: #e98f00; | ||
+ | } | ||
+ | |||
+ | |||
+ | a:hover { | ||
+ | color: #6699FF; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
h1,h2,h3,h4,h5,h6{ | h1,h2,h3,h4,h5,h6{ | ||
font-weight:normal; | font-weight:normal; | ||
Line 18: | Line 38: | ||
} | } | ||
p{ | p{ | ||
- | + | line-height:150%; | |
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
} | } | ||
body{ | body{ | ||
- | background- | + | background-color:#F7F7F7; |
- | + | ||
} | } | ||
+ | |||
+ | td{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #top-section{ | ||
+ | display:block; | ||
+ | position:relative; | ||
+ | margin-top:10px; | ||
+ | background:none; | ||
+ | |||
+ | } | ||
+ | |||
/*end of the reset*/ | /*end of the reset*/ | ||
+ | |||
+ | |||
+ | #supportBox{ | ||
+ | position: absolute; | ||
+ | top:80%; | ||
+ | right:-18%; | ||
+ | z-index: 5; | ||
+ | overflow: visible | ||
+ | } | ||
#globalWrapper{ | #globalWrapper{ | ||
Line 30: | Line 72: | ||
width:1002px; | width:1002px; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
/*header part*/ | /*header part*/ | ||
#header{ | #header{ | ||
Line 59: | Line 84: | ||
height:230px; | height:230px; | ||
width:1002px; | width:1002px; | ||
- | background-image:url( | + | background-image:url("https://static.igem.org/mediawiki/2014/7/75/Goettingen_header_Pic.png"); |
background-size:contain; | background-size:contain; | ||
} | } | ||
Line 67: | Line 92: | ||
padding-left:25px; | padding-left:25px; | ||
} | } | ||
- | # | + | #uniLogo{ |
float:right; | float:right; | ||
margin:160px 0px 20px 20px; | margin:160px 0px 20px 20px; | ||
+ | } | ||
+ | |||
+ | #igemLogo{ | ||
+ | float:right; | ||
+ | margin:170px 0px 20px 20px; | ||
+ | } | ||
+ | |||
+ | #headerNavi{ | ||
+ | float:left; | ||
+ | width:1002px; | ||
+ | background-color:#e98f00; | ||
+ | border-radius:5px; | ||
+ | |||
} | } | ||
#menuBar{ | #menuBar{ | ||
float:left; | float:left; | ||
height:38px; | height:38px; | ||
+ | width:826px; | ||
text-align:center; | text-align:center; | ||
- | font: | + | font:18px Calibri,sans-serif; |
- | + | ||
- | + | ||
} | } | ||
#menuBar ul li{ | #menuBar ul li{ | ||
- | width: | + | width:118px; |
line-height:38px; | line-height:38px; | ||
float:left; | float:left; | ||
+ | } | ||
+ | #menuBar ul li a{ | ||
+ | color:#FFF; | ||
} | } | ||
#menuBar ul li:hover{ | #menuBar ul li:hover{ | ||
background-color:#DFDFDF; | background-color:#DFDFDF; | ||
+ | border-radius:4px; | ||
} | } | ||
#menuBar ul li:hover .wrap{ | #menuBar ul li:hover .wrap{ | ||
display:block; | display:block; | ||
z-index:99; | z-index:99; | ||
+ | } | ||
+ | #menuBar ul li:hover a{ | ||
+ | color:#e98f00; | ||
+ | } | ||
+ | #menuBar ul li:hover li a{ | ||
+ | color:white; | ||
} | } | ||
#menuBar ul li .wrap{ | #menuBar ul li .wrap{ | ||
position:absolute; | position:absolute; | ||
- | + | width:210px; | |
- | width: | + | |
text-align:left; | text-align:left; | ||
display:none; | display:none; | ||
Line 100: | Line 146: | ||
#menuBar ul li ul li{ | #menuBar ul li ul li{ | ||
line-height:20px; | line-height:20px; | ||
- | border:# | + | border-left:solid 5px #ccc; |
+ | border-bottom:solid 1px #fff; | ||
padding:10px 20px; | padding:10px 20px; | ||
font-size:15px; | font-size:15px; | ||
- | background-color:# | + | background-color:#FFB573; |
} | } | ||
- | #menuBar ul li ul li:hover{ | + | #menuBar ul li ul li:hover a{ |
- | + | color:#e98f00; | |
} | } | ||
#contact{ | #contact{ | ||
float:right; | float:right; | ||
- | height:38px; | + | height:38px; |
- | + | width:176px; | |
- | + | padding:0; | |
} | } | ||
#contact a{ | #contact a{ | ||
display:block; | display:block; | ||
- | float: | + | float:left; |
- | + | width:38px; | |
+ | height:38px; | ||
+ | |||
} | } | ||
#go2top{ | #go2top{ | ||
z-index:199; | z-index:199; | ||
position:fixed; | position:fixed; | ||
- | bottom: | + | bottom:2%; |
- | right: | + | right:2%; |
overflow:visible; | overflow:visible; | ||
+ | /*background: url("https://static.igem.org/mediawiki/2014/5/5b/Goettingen_go2top.png");*/ | ||
+ | } | ||
+ | /* | ||
+ | #go2top img{ | ||
+ | display:none; | ||
+ | } | ||
+ | */ | ||
+ | #go2top a:hover img{ | ||
+ | display:inline; | ||
} | } | ||
/*main part*/ | /*main part*/ | ||
Line 144: | Line 202: | ||
} | } | ||
#container #prev{ | #container #prev{ | ||
- | background-image: url( | + | background-image: url("https://static.igem.org/mediawiki/2014/8/84/Goettingen_prev_icon.png"); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center center; | background-position: center center; | ||
Line 156: | Line 214: | ||
} | } | ||
#container #next { | #container #next { | ||
- | background-image: url( | + | background-image: url("https://static.igem.org/mediawiki/2014/b/b5/Goettingen_next_icon.png"); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center center; | background-position: center center; | ||
Line 176: | Line 234: | ||
} | } | ||
/*For the four main parts*/ | /*For the four main parts*/ | ||
+ | |||
#fourParts{ | #fourParts{ | ||
float:left; | float:left; | ||
margin:10px 0; | margin:10px 0; | ||
- | height: | + | height:650px; |
width:1002px; | width:1002px; | ||
+ | border:solid 1px #CCCCCC; | ||
+ | border-radius:4px; | ||
} | } | ||
.four{ | .four{ | ||
margin:5px 15px; | margin:5px 15px; | ||
- | padding:20px | + | padding:20px 10px 10px 10px; |
height:260px; | height:260px; | ||
width:440px; | width:440px; | ||
- | |||
float:left; | float:left; | ||
} | } | ||
#fourParts h1{ | #fourParts h1{ | ||
+ | display:block; | ||
font:20px Helvetica,sans-serif; | font:20px Helvetica,sans-serif; | ||
color:#BF2F15; | color:#BF2F15; | ||
+ | border-bottom:solid thin #D3D3D3; | ||
} | } | ||
.pictures{ | .pictures{ | ||
Line 199: | Line 261: | ||
width:180px; | width:180px; | ||
float:left; | float:left; | ||
+ | } | ||
+ | #Pic1{ | ||
+ | padding-top:25px; | ||
+ | } | ||
+ | #Pic3{ | ||
+ | padding-top:45px; | ||
} | } | ||
.paragraph{ | .paragraph{ | ||
Line 209: | Line 277: | ||
text-align:justify; | text-align:justify; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
.button{ | .button{ | ||
width:80px; | width:80px; | ||
height:30px; | height:30px; | ||
float:right; | float:right; | ||
- | background:# | + | background:#FFB573; |
font:14px Candara,sans-serif; | font:14px Candara,sans-serif; | ||
text-align:center; | text-align:center; | ||
Line 224: | Line 290: | ||
} | } | ||
.button a:hover{ | .button a:hover{ | ||
- | color:# | + | color:#FFFFFF; |
} | } | ||
+ | .buttonGreen{ | ||
+ | |||
+ | float:right; | ||
+ | |||
+ | font:14px Candara,sans-serif; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .buttonGreen a{ | ||
+ | line-height:30px; | ||
+ | } | ||
+ | .buttonGreen a:hover{ | ||
+ | color:#FFFFFF; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*For the pre & next buttons*/ | ||
+ | .button_pre{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:20px 0; | ||
+ | padding:5px; | ||
+ | border:solid 1px #e98f00; | ||
+ | border-radius:2px; | ||
+ | } | ||
+ | .button_pre:hover{ | ||
+ | color:white; | ||
+ | background-color:#FFB573; | ||
+ | } | ||
+ | .button_next{ | ||
+ | display:block; | ||
+ | float:right; | ||
+ | margin:20px 0; | ||
+ | padding:5px; | ||
+ | border:solid 1px #e98f00; | ||
+ | border-radius:2px; | ||
+ | } | ||
+ | .button_next:hover{ | ||
+ | color:white; | ||
+ | background-color:#FFB573; | ||
+ | } | ||
+ | .trans_zh{ | ||
+ | display:block; | ||
+ | float:right; | ||
+ | padding:5px; | ||
+ | border:solid 1px #e98f00; | ||
+ | border-radius:2px; | ||
+ | } | ||
+ | |||
/*For the footer*/ | /*For the footer*/ | ||
#footer{ | #footer{ | ||
float:left; | float:left; | ||
- | margin: | + | margin:40px auto; |
height:31px; | height:31px; | ||
width:1002px; | width:1002px; | ||
- | + | border:solid 1px #CCC; | |
} | } | ||
#copyrightIco{ | #copyrightIco{ | ||
Line 239: | Line 353: | ||
height:31px; | height:31px; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
#list1 ul li{ | #list1 ul li{ | ||
display:block; | display:block; | ||
float:left; | float:left; | ||
- | width: | + | width:130px; |
+ | height:15px; | ||
text-align:center; | text-align:center; | ||
- | font-size: | + | font-size:10px; |
- | + | margin:0 15px; | |
- | + | ||
- | + | ||
} | } | ||
+ | |||
#list2 ul li{ | #list2 ul li{ | ||
display:block; | display:block; | ||
float:left; | float:left; | ||
width:140px; | width:140px; | ||
+ | height:15px; | ||
text-align:center; | text-align:center; | ||
- | font-size: | + | font-size:10px; |
+ | margin:0 22px; | ||
} | } | ||
#poweredByIco{ | #poweredByIco{ | ||
float:right; | float:right; | ||
+ | } | ||
+ | #footerbanner{ | ||
+ | float:left; | ||
+ | margin:30px 0; | ||
} | } | ||
/*For the subpage*/ | /*For the subpage*/ | ||
- | /* | + | |
- | + | /*next and previous buttons*/ | |
- | + | #goenext { | |
- | + | float:right; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
/* For team part*/ | /* For team part*/ | ||
- | . | + | .teamM{ |
float:left; | float:left; | ||
- | width: | + | width:690px; |
- | + | ||
margin-top:10px; | margin-top:10px; | ||
border-bottom-style:solid; | border-bottom-style:solid; | ||
Line 338: | Line 397: | ||
border-color:#CCC; | border-color:#CCC; | ||
} | } | ||
+ | .teamM img{ | ||
+ | width:200px; | ||
+ | height:250px; | ||
+ | margin-top:36px; | ||
+ | border-radius:8%; | ||
+ | } | ||
+ | |||
+ | .titleLeft{ | ||
+ | float:left; | ||
+ | width:200px; | ||
+ | } | ||
+ | .titleRight{ | ||
+ | float:right; | ||
+ | width:200px; | ||
+ | } | ||
+ | .content{ | ||
+ | float:left; | ||
+ | width:410px; | ||
+ | margin-left:30px; | ||
+ | margin-bottom:25px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
.instructors{ | .instructors{ | ||
float:left; | float:left; | ||
- | width: | + | width:690px; |
- | + | ||
margin-top:10px; | margin-top:10px; | ||
border-bottom-style:solid; | border-bottom-style:solid; | ||
border-width:2px; | border-width:2px; | ||
border-color:#CCC; | border-color:#CCC; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.instructors img{ | .instructors img{ | ||
Line 371: | Line 434: | ||
float:left; | float:left; | ||
width:200px; | width:200px; | ||
- | |||
margin-top:36px; | margin-top:36px; | ||
+ | border-radius:8%; | ||
} | } | ||
.instructors h2{ | .instructors h2{ | ||
Line 379: | Line 442: | ||
width:410px; | width:410px; | ||
height:36px; | height:36px; | ||
- | margin-left: | + | margin-left:25px; |
} | } | ||
.instructors h3{ | .instructors h3{ | ||
Line 392: | Line 455: | ||
width:410px; | width:410px; | ||
margin-left:40px; | margin-left:40px; | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | #instr2 img{ | ||
+ | float: right; | ||
+ | } | ||
+ | #instr2 h2{ | ||
+ | margin-left:0; | ||
+ | } | ||
+ | #instr2 p{ | ||
+ | margin-left:20px; | ||
} | } | ||
/*For sponsor part*/ | /*For sponsor part*/ | ||
#sponsorWrap{ | #sponsorWrap{ | ||
float:left; | float:left; | ||
- | width: | + | width:1000px; |
border-style:solid; | border-style:solid; | ||
border-color:#CCC; | border-color:#CCC; | ||
Line 413: | Line 486: | ||
border-bottom:solid #CCC 2px; | border-bottom:solid #CCC 2px; | ||
} | } | ||
+ | |||
#sponsorPic{ | #sponsorPic{ | ||
float:left; | float:left; | ||
width:952px; | width:952px; | ||
- | height: | + | height:500px; |
padding:25px; | padding:25px; | ||
border-bottom:solid #CCC 2px; | border-bottom:solid #CCC 2px; | ||
Line 422: | Line 496: | ||
.spPic{ | .spPic{ | ||
float:left; | float:left; | ||
- | |||
height:120px; | height:120px; | ||
text-align:center; | text-align:center; | ||
margin:6px; | margin:6px; | ||
+ | padding-left:25px; | ||
} | } | ||
.sponsors{ | .sponsors{ | ||
Line 443: | Line 517: | ||
text-align:center; | text-align:center; | ||
} | } | ||
- | |||
.sponsors h3{ | .sponsors h3{ | ||
display:block; | display:block; | ||
Line 468: | Line 541: | ||
display:none; | display:none; | ||
} | } | ||
+ | /*For the acknowledge part*/ | ||
+ | .ackn{ | ||
+ | float:left; | ||
+ | width:688px; | ||
+ | } | ||
+ | .ackn img{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | width:120px; | ||
+ | margin-bottom:30px; | ||
+ | padding:0 20px 0 20px; | ||
+ | border-radius:6%; | ||
+ | } | ||
+ | .ackn h3{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | width:520px; | ||
+ | height:36px; | ||
+ | } | ||
+ | .ackn p{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | width:520px; | ||
+ | } | ||
+ | #ackn2 img{ | ||
+ | float:right; | ||
+ | } | ||
+ | #ackn3 p{ | ||
+ | width:688px; | ||
+ | } | ||
+ | #ackn5 img{ | ||
+ | float:right; | ||
+ | } | ||
+ | #ackn7 img{ | ||
+ | float:right; | ||
+ | } | ||
+ | #ackn9 img{ | ||
+ | float:right; | ||
+ | } | ||
+ | #ackn14 img{ | ||
+ | float:right; | ||
+ | } | ||
+ | #ackn10 p{ | ||
+ | width:688px; | ||
+ | } | ||
+ | #ackn11 p{ | ||
+ | width:688px; | ||
+ | } | ||
+ | #ackn15 p{ | ||
+ | width:688px; | ||
+ | } | ||
+ | /*For protocol part*/ | ||
+ | /*For the overview page*/ | ||
+ | #OverviewTitle{ | ||
+ | text-align:center; | ||
+ | font-size:36px; | ||
+ | padding:30px 0 0 0; | ||
+ | } | ||
+ | .linkButton{ | ||
+ | display:block; | ||
+ | float:right; | ||
+ | position:relative; | ||
+ | bottom:10px; | ||
+ | } | ||
+ | #empty{ | ||
+ | background-color:#F7F7F7; | ||
+ | } | ||
+ | #protocolOverview{ | ||
+ | float:left; | ||
+ | width:1002px; | ||
+ | } | ||
+ | .pro_sub{ | ||
+ | float:left; | ||
+ | width:280px; | ||
+ | height:250px; | ||
+ | margin:12px; | ||
+ | padding:15px; | ||
+ | background-color:#e7e7e7; | ||
+ | border-radius:10px; | ||
+ | |||
+ | } | ||
+ | .pro_sub h4 a{ | ||
+ | display:block; | ||
+ | font-family:Verdana, Geneva, sans-serif; | ||
+ | font-size:22px; | ||
+ | line-height:26px; | ||
+ | color:#F90; | ||
+ | text-align:center; | ||
+ | padding:10px; | ||
+ | } | ||
+ | .pro_sub ul li a{ | ||
+ | display:block; | ||
+ | font-family:Arial, Helvetica, sans-serif; | ||
+ | font-size:16px; | ||
+ | font-size:16px; | ||
+ | color:#000; | ||
+ | padding:5px 15px 5px 5px; | ||
+ | } | ||
+ | .pro_sub a:hover{ | ||
+ | color:#F90; | ||
+ | } | ||
+ | .figure{ | ||
+ | font-size:14px; | ||
+ | color:#5b686a; | ||
+ | line-height:110%; | ||
+ | padding:0 30px; | ||
+ | } | ||
+ | #pic img{ | ||
+ | vertical-align: top; | ||
+ | |||
+ | } | ||
+ | /*end of the Overview page*/ | ||
+ | |||
+ | .proLP{ | ||
+ | float:left; | ||
+ | width:218px; | ||
+ | margin:15px 15px; | ||
+ | background-color:transparent; | ||
+ | border-right-style:solid; | ||
+ | border-width:2px; | ||
+ | border-color:#CCC; | ||
+ | |||
+ | } | ||
+ | .proLP h3{ | ||
+ | font:"Trebuchet MS", Arial, Helvetica, sans-serif; | ||
+ | font-size:24px; | ||
+ | color:#000; | ||
+ | padding:10px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .proLP h4 a{ | ||
+ | display:block; | ||
+ | font:Geneva, Arial, Helvetica, sans-serif; | ||
+ | font-size:18px; | ||
+ | color:#000; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | #protocol ul li a{ | ||
+ | display:block; | ||
+ | font:Geneva, Arial, Helvetica, sans-serif; | ||
+ | font-size:15px; | ||
+ | color:#f88005; | ||
+ | } | ||
+ | .proLP ul li{ | ||
+ | display:block; | ||
+ | padding:5px 25px 5px 0px; | ||
+ | font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:16px; | ||
+ | line-height:28px; | ||
+ | } | ||
+ | |||
+ | .proLP ul li a{ | ||
+ | color:#F88005; | ||
+ | } | ||
+ | .proLP ul li ul li{ | ||
+ | display:block; | ||
+ | font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:14px; | ||
+ | padding-left:20px; | ||
+ | line-height:24px; | ||
+ | } | ||
+ | .proLP ul li ul li a{ | ||
+ | color:black; | ||
+ | } | ||
+ | |||
+ | .proLP ul li ul li ul li{ | ||
+ | display:block; | ||
+ | font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:13px; | ||
+ | line-height:24px; | ||
+ | } | ||
+ | |||
+ | .proRP{ | ||
+ | float:left; | ||
+ | width:690px; | ||
+ | margin:15px 0 30px 0; | ||
+ | padding:30px; | ||
+ | background-color:transparent; | ||
+ | border-style:solid; | ||
+ | border-color:#CCC; | ||
+ | border-width:1px; | ||
+ | border-radius:4px; | ||
+ | } | ||
+ | .proRP h1{ | ||
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
+ | font-size:30px; | ||
+ | font-weight:bold; | ||
+ | color:#F88005; | ||
+ | line-height:40px; | ||
+ | text-align:left; | ||
+ | padding:10px; | ||
+ | } | ||
+ | .proRP h2{ | ||
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
+ | font-size:20px; | ||
+ | line-height:36px; | ||
+ | padding:0; | ||
+ | color:#039648; | ||
+ | text-align:left; | ||
+ | } | ||
+ | .proRP h3{ | ||
+ | font-family:"Charter Black", sans-serif; | ||
+ | font-size:18px; | ||
+ | padding:5px 0; | ||
+ | color:#BF2F15; | ||
+ | text-align:left; | ||
+ | } | ||
+ | .proRP h4{ | ||
+ | font-family:"Charter Black", sans-serif; | ||
+ | font-size:18px; | ||
+ | line-height:24px; | ||
+ | padding:10px 0; | ||
+ | color:black; | ||
+ | text-align:justify; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | .proRP p{ | ||
+ | font-size:16px; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | #humanPractice img{ | ||
+ | border-radius:8%; | ||
+ | } | ||
+ | #protocol ul li:hover{ | ||
+ | background-color:#DFDFDF; | ||
+ | border-radius:4px; | ||
+ | } | ||
+ | |||
+ | /*For the achievement part */ | ||
+ | #achv{ | ||
+ | float:left; | ||
+ | margin:10px 0; | ||
+ | padding:40px; | ||
+ | width:922px; | ||
+ | border:solid 1px #CCCCCC; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | #achv h1{ | ||
+ | font:30px Helvetica,sans-serif; | ||
+ | color:#BF2F15; | ||
+ | } | ||
+ | #achv h2{ | ||
+ | font:30px; | ||
+ | } | ||
+ | #achv p{ | ||
+ | text-align:justify; | ||
+ | padding-left:25px; | ||
+ | } | ||
+ | #achv_img1{ | ||
+ | float: left; | ||
+ | height:400px; | ||
+ | width:200px; | ||
+ | } | ||
+ | #achv_p1{ | ||
+ | float: left; | ||
+ | width:690px; | ||
+ | border-bottom-style:solid; | ||
+ | border-bottom-color:#CCC; | ||
+ | border-bottom-width:1px; | ||
+ | } | ||
+ | #achv_img2{ | ||
+ | float: right; | ||
+ | height:400px; | ||
+ | width:200px; | ||
+ | } | ||
+ | #achv_p2{ | ||
+ | float: left; | ||
+ | height:360px; | ||
+ | width:690px; | ||
+ | border-bottom-style:solid; | ||
+ | border-bottom-color:#CCC; | ||
+ | border-bottom-width:1px; | ||
+ | } | ||
+ | #achv_img3{ | ||
+ | float: left; | ||
+ | height:400px; | ||
+ | width:200px; | ||
+ | } | ||
+ | #achv_p3{ | ||
+ | float: left; | ||
+ | height:399px; | ||
+ | width:690px; | ||
+ | border-bottom-style:solid; | ||
+ | border-bottom-color:#CCC; | ||
+ | border-bottom-width:1px; | ||
+ | } | ||
+ | #Achieve a{ | ||
+ | color:black; | ||
+ | } | ||
+ | /*For the gallery*/ | ||
+ | .gallery_single_part{ | ||
+ | float:left; | ||
+ | width:650px; | ||
+ | } | ||
+ | .gallery li{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | width:120px; | ||
+ | margin:15px; | ||
+ | border:5px solid #eee; | ||
+ | } | ||
+ | |||
+ | /*For each overview part*/ | ||
+ | #overview{ | ||
+ | float:left; | ||
+ | width:1002px; | ||
+ | } | ||
+ | #overview h1{ | ||
+ | font:25px Lucida Sans Unicode, Lucida Grande, sans-serif; | ||
+ | padding:20px 0; | ||
+ | } | ||
+ | /*For notebook part*/ | ||
+ | .note_three{ | ||
+ | float:left; | ||
+ | width:334px; | ||
+ | height:500px; | ||
+ | } | ||
+ | .note_three h2{ | ||
+ | font:20px Lucida Sans Unicode, Lucida Grande, sans-serif; | ||
+ | padding:10px 0; | ||
+ | color:#f88005; | ||
+ | } | ||
+ | .note_three a{ | ||
+ | color:#f88005; | ||
+ | |||
+ | } | ||
+ | #note_nav li{ | ||
+ | padding-left:30px; | ||
+ | } | ||
+ | |||
+ | #note_safety{ | ||
+ | height:250px; | ||
+ | } | ||
+ | .note_three p{ | ||
+ | padding:0 20px 10px 20px; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | .collapsibleListTitle { | ||
+ | cursor: pointer; | ||
+ | position: relative; | ||
+ | } | ||
+ | .collapsibleListBody img{ | ||
+ | display:block; | ||
+ | margin:15px auto; | ||
+ | } | ||
+ | #notebookWrap h4{ | ||
+ | font-family:"Charter Black", sans-serif; | ||
+ | font-size:18px; | ||
+ | padding:5px 0px 5px 30px; | ||
+ | border-bottom: solid 2px #ccc; | ||
+ | } | ||
+ | #notebookWrap p{ | ||
+ | background-color: #f4f4f8; | ||
+ | } | ||
+ | #notebookWrap h2{ | ||
+ | color:#000; | ||
+ | } | ||
+ | #BBWrap p img{ | ||
+ | display:block; | ||
+ | margin:15px auto; | ||
+ | } | ||
+ | #lab_team1{ | ||
+ | background-color:#fcebeb; | ||
+ | border-left:solid 10px #fcc; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | #lab_team2{ | ||
+ | background-color:#fcedd6; | ||
+ | border-left:solid 10px #fdd7a0; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | #lab_team3{ | ||
+ | background-color:#daf1dc; | ||
+ | border-left:solid 10px #b0dfb3; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | #lab_team4{ | ||
+ | background-color:#dff4fa; | ||
+ | border-left:solid 10px #9be3f8; | ||
+ | border-radius:5px; | ||
+ | } | ||
+ | /*edit for the search box*/ | ||
+ | /* project overview */ | ||
+ | |||
+ | .note_sthree{ | ||
+ | float:left; | ||
+ | width:280px; | ||
+ | height:290px; | ||
+ | margin:12px; | ||
+ | padding:15px; | ||
+ | background-color:#e7e7e7; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | .note_sthree h2{ | ||
+ | font:20px Lucida Sans Unicode, Lucida Grande, sans-serif; | ||
+ | padding:10px 0; | ||
+ | color:#f88005; | ||
+ | } | ||
+ | .note_sthree a{ | ||
+ | color:#f88005; | ||
+ | |||
+ | } | ||
+ | |||
+ | .note_sthree p{ | ||
+ | padding:0 20px 10px 20px; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | .news{ | ||
+ | float:left; | ||
+ | width:230px; | ||
+ | margin-top:20px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .news img{ | ||
+ | border-radius:50%; | ||
+ | } | ||
+ | |||
+ | /*This is for the presentation part*/ | ||
+ | #Presentation{ | ||
+ | float:left; | ||
+ | width:690px; | ||
+ | } | ||
+ | .pres{ | ||
+ | float:left; | ||
+ | width:220px; | ||
+ | text-align:center; | ||
+ | margin:20px 5px 0 5px; | ||
+ | padding:20px 0; | ||
+ | background-color:#faedda; | ||
+ | border-radius:4px; | ||
+ | } | ||
+ | .pres img{ | ||
+ | border-radius:8%; | ||
+ | |||
+ | } | ||
+ | .pres h3{ | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | /*Modify the table*/ | ||
+ | .table1 { | ||
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
+ | width:100%; | ||
+ | border-collapse:collapse; | ||
+ | } | ||
+ | .table1 th, .table1 td{ | ||
+ | font-size:1em; | ||
+ | border:1px solid #98bf21; | ||
+ | padding:3px 7px 2px 7px; | ||
+ | } | ||
+ | |||
+ | .table1 th{ | ||
+ | font-size:1.1em; | ||
+ | padding-top:5px; | ||
+ | padding-bottom:4px; | ||
+ | background-color:#A7C942; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | .table1 tr:nth-child(odd){ | ||
+ | background-color:#EAF2D3; | ||
+ | } | ||
+ | .table2{ | ||
+ | background-color:#F7F7F7; | ||
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
+ | |||
+ | } | ||
+ | .table2 td{ | ||
+ | padding:5px 15px; | ||
+ | text-align:left; | ||
+ | |||
+ | } | ||
+ | /* social media boxes */ | ||
+ | .fblike iframe { | ||
+ | width: 100px ; | ||
+ | } | ||
+ | /* YouTube player */ | ||
+ | #player { | ||
+ | width: 348px; | ||
+ | height: 240px; | ||
+ | overflow: hidden; | ||
+ | background: gray; | ||
+ | position: absolute; | ||
+ | border: solid 2px gray; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 01:17, 18 October 2014