Team:UCLA/Template/CSS
From 2014.igem.org
(Difference between revisions)
Anuvedverma (Talk | contribs) |
Anuvedverma (Talk | contribs) |
||
(286 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | < | + | <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> |
+ | <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'> | ||
+ | |||
+ | <!--WIKI TEMPLATE FORMATTING--> | ||
+ | <style type="text/css"> | ||
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | ||
Line 9: | Line 14: | ||
padding-top: 100px; | padding-top: 100px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
- | font-family: Georgia, Times, "Times New Roman", serif; | + | font-family: Georgia, Times, "Times New Roman", serif; |
+ | display:none; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5 { | ||
+ | /*font-family: Helvetica, Georgia, Times, "Times New Roman", serif;*/ | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | border-bottom: 0px solid #aaa; | ||
} | } | ||
- | |||
+ | #centercontainer { margin: auto; text-align: center; width: 100%}/* CENTERING CONTAINER: Used for centering three content boxes */ | ||
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | ||
background-color: #383838; | background-color: #383838; | ||
Line 58: | Line 70: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
- | background- | + | background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Debut_light.png'); |
+ | /*background-size: cover;*/ | ||
} | } | ||
+ | |||
+ | |||
#contentcontainer { /*-- creates container for all content on page --*/ | #contentcontainer { /*-- creates container for all content on page --*/ | ||
- | font-family: Arial, Helvetica, sans-serif; | + | font-family: Arial, Helvetica, sans-serif; |
+ | font-family: 'Roboto', sans-serif; | ||
font-weight: normal; | font-weight: normal; | ||
font-size: 14px; | font-size: 14px; | ||
Line 133: | Line 149: | ||
color: #414141; | color: #414141; | ||
font-size: 25px; | font-size: 25px; | ||
- | font-family: Georgia, Times, "Times New Roman", serif; | + | /*font-family: Georgia, Times, "Times New Roman", serif;*/ |
+ | font-family: 'Roboto', sans-serif; | ||
padding: 10px 15px 5px 10px; | padding: 10px 15px 5px 10px; | ||
- | border-bottom: 1px solid #ccc; | + | border-bottom: 1px solid #ccc; |
margin-bottom: 0px; | margin-bottom: 0px; | ||
} | } | ||
Line 208: | Line 225: | ||
.annItem li {list-style: none; margin: 5px} | .annItem li {list-style: none; margin: 5px} | ||
+ | <!--TEXT STYLING--> | ||
+ | hr.style-one { | ||
+ | border: 0; | ||
+ | height: 1px; | ||
+ | background: #333; | ||
+ | background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); | ||
+ | background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); | ||
+ | background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); | ||
+ | background-image: -o-linear-gradient(left, #ccc, #333, #ccc); | ||
+ | } | ||
+ | .style { | ||
+ | font-size: 30px; | ||
+ | /*font-family: 'Pacifico', cursive;*/ | ||
+ | /*font-family: "Times New Roman", Times, serif;*/ | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | } | ||
+ | |||
+ | <!--SPLASH PAGE--> | ||
+ | .contentBorder { | ||
+ | border: 1px solid #AAAAAA; | ||
+ | -webkit-border-radius: 7px; | ||
+ | -moz-border-radius: 7px; | ||
+ | border-radius: 7px; | ||
+ | -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | } | ||
+ | .content { | ||
+ | /*font-family: Tahoma;*/ | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 12px; | ||
+ | color: #3D3D3D; | ||
+ | margin-bottom:60px; | ||
+ | background-color: white; | ||
+ | padding: 15px 60px; | ||
+ | |||
+ | border: 1px solid #cccccc; | ||
+ | -webkit-border-radius: 10px; | ||
+ | -moz-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | } | ||
+ | #box5 { | ||
+ | text-align: left; | ||
+ | } | ||
+ | #box6 { text-align: left;} | ||
+ | #box7 {text-align: left;} | ||
+ | .boxgridMedium { | ||
+ | width: 298px; | ||
+ | height: 435px; | ||
+ | margin: 0px auto; | ||
+ | } | ||
+ | .boxgrid { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .boxgrid img{ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | border: 0; | ||
+ | } | ||
+ | .boxcaption{ | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | background: #000; | ||
+ | width: 100%; | ||
+ | opacity: .65; | ||
+ | padding: 8px; | ||
+ | /* For IE 5-7 */ | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); | ||
+ | /* For IE 8 */ | ||
+ | -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; | ||
+ | } | ||
+ | .boxcaption:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | h2.onBlack { | ||
+ | font-family: Verdana; | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | color:white; | ||
+ | margin-top: -5px; | ||
+ | border: none; | ||
+ | Font-size: 23px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height:1em; | ||
+ | } | ||
+ | p.onBlack { | ||
+ | color:white; | ||
+ | margin-right:18px; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | p.onBlackIntro { | ||
+ | font-size:14px; | ||
+ | font-style: italic; | ||
+ | color:white; | ||
+ | margin-right:20px; | ||
+ | margin-bottom:20px; | ||
+ | } | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!--SPIDER TOP BUTTON--> | ||
+ | <style type="text/css"> | ||
+ | .spider{ | ||
+ | position: fixed; | ||
+ | top: 50px; | ||
+ | right: 0px; | ||
+ | width: 200px; | ||
+ | height: 95%; | ||
+ | z-index: 10; | ||
+ | |||
+ | overflow: hidden; | ||
+ | } | ||
+ | .spiderline{ | ||
+ | position: relative; | ||
+ | left: 75%; | ||
+ | top: 0%; | ||
+ | background-color: #A8A8A8; | ||
+ | width: 2px; | ||
+ | height: 80%; | ||
+ | z-index: 100; | ||
+ | } | ||
+ | .spiderbutton{ | ||
+ | position: relative; | ||
+ | left: 50%; | ||
+ | width: 110px; | ||
+ | height: 56px; | ||
+ | z-index: 10; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/a/ac/Spiderbutton2.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .backtotop{ | ||
+ | position: relative; | ||
+ | left: 65%; | ||
+ | width: 45px; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | .spiderweb{ | ||
+ | position: fixed; | ||
+ | right: 0px; | ||
+ | top: 70px; | ||
+ | pointer-events:none; | ||
+ | z-index:19; | ||
+ | } | ||
</style> | </style> | ||
- | <style> | + | |
+ | |||
+ | <!--SIDE MENU BAR--> | ||
+ | <style type="text/css"> | ||
+ | #side_menu{ | ||
+ | position:fixed; | ||
+ | background-image: url('http://inspirationhut.net/wp-content/uploads/2012/11/Old-Paper-Texture-2.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: -540px -10px; | ||
+ | top:-50px; | ||
+ | left:-170px; | ||
+ | width:150px; | ||
+ | height:1070px; | ||
+ | padding: 80px 50px 0 0; | ||
+ | /*border: 2px solid #D46A6A;*/ | ||
+ | /*border-radius: 25px;*/ | ||
+ | margin-bottom: 20px; | ||
+ | margin-top: 10px; | ||
+ | z-index:21; | ||
+ | } | ||
+ | #side_menu #side_menu_title{ | ||
+ | text-align:center; | ||
+ | font-family:Papyrus; | ||
+ | /*text-decoration:none;*/ | ||
+ | } | ||
+ | #side_menu .sidebar_link{ | ||
+ | position: absolute; | ||
+ | background-size: cover; | ||
+ | |||
+ | |||
+ | /*text-decoration:none;*/ | ||
+ | } | ||
+ | #side_menu #link1{ | ||
+ | top: 17%; | ||
+ | left: 5%; | ||
+ | } | ||
+ | #side_menu #link2{ | ||
+ | top: 27%; | ||
+ | left: 24%; | ||
+ | } | ||
+ | #side_menu #link3{ | ||
+ | top: 37%; | ||
+ | left: 12%; | ||
+ | } | ||
+ | #side_menu #link4{ | ||
+ | top: 47%; | ||
+ | left: 26%; | ||
+ | } | ||
+ | #side_menu #link5{ | ||
+ | top: 57%; | ||
+ | left: 8%; | ||
+ | } | ||
+ | #side_menu #link6{ | ||
+ | top: 65%; | ||
+ | left: 25%; | ||
+ | background-image: url('http://www.clker.com/cliparts/5/u/w/z/E/3/x-marks-the-spot-th.png'); | ||
+ | width: 100px; | ||
+ | height: 68px; | ||
+ | } | ||
+ | #side_menu a{ | ||
+ | color: black; | ||
+ | font-family: 'Bad Script', cursive; | ||
+ | padding:18px 5px 15px 5px; | ||
+ | text-decoration:none; | ||
+ | width:98px; | ||
+ | display:block; | ||
+ | text-align:center; | ||
+ | font-size:18px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!--TOP MENU BAR--> | ||
+ | <style type="text/css"> | ||
+ | #top_menu{ | ||
+ | position:fixed; | ||
+ | padding: 12px 0 0 0; | ||
+ | width:100%; | ||
+ | left:0; | ||
+ | top:0; | ||
+ | /*background:#550D00;*/ | ||
+ | background: #006699; | ||
+ | z-index:20; | ||
+ | } | ||
#menu li{ | #menu li{ | ||
- | position:relative; | + | position:relative; |
- | float:left; | + | float:left; |
- | list-style:none; | + | list-style:none; |
+ | padding: 0 10px 0 10px; | ||
} | } | ||
#menu a{ | #menu a{ | ||
- | color:white; | + | color:white; |
- | + | font-family: Helvetica; | |
- | padding:5px; | + | font-family: 'Roboto', sans-serif; |
- | text-decoration:none; | + | padding:18px 5px 15px 5px; |
- | width:98px; | + | text-decoration:none; |
- | display:block; | + | width:98px; |
- | text-align:center; | + | display:block; |
+ | text-align:center; | ||
+ | font-size:16px; | ||
+ | border-bottom:thin solid #0099CC; | ||
} | } | ||
#menu{ | #menu{ | ||
- | margin-left:auto; | + | margin-left:auto; |
- | margin-right:auto; | + | margin-right:auto; |
- | width: | + | width:1100px; |
} | } | ||
#menu a:hover{ | #menu a:hover{ | ||
- | background: | + | background:#0099CC; |
} | } | ||
- | |||
#menu li ul{ | #menu li ul{ | ||
- | + | background:#006699; | |
/* display:none; */ | /* display:none; */ | ||
position:absolute; | position:absolute; | ||
text-align:center; | text-align:center; | ||
- | top: | + | top:50px; |
right:0px; | right:0px; | ||
} | } | ||
Line 252: | Line 504: | ||
} | } | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!--SLIDER--> | ||
+ | <style type="text/css"> | ||
+ | .slider{ | ||
+ | position: relative; | ||
+ | width: 1150px; | ||
+ | height: 350px; | ||
+ | margin: auto; | ||
+ | overflow: hidden; | ||
+ | z-index: 13; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | ||
+ | } | ||
+ | .slider .slider_left{ | ||
+ | position: absolute; | ||
+ | background-color:black; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .slider .slider_left img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 25%; | ||
+ | left: 10px; | ||
+ | } | ||
+ | .slider .slider_right{ | ||
+ | position: absolute; | ||
+ | background-color:black; | ||
+ | top: 0px; | ||
+ | left: 1100px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .slider .slider_right img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 25%; | ||
+ | left: -10px; | ||
+ | } | ||
+ | .slider .slider_imgs{ | ||
+ | position: absolute; | ||
+ | } | ||
+ | .slider .slider_imgs div{ | ||
+ | float: left; | ||
+ | width: 1150px; | ||
+ | height: 350px; | ||
+ | } | ||
+ | .slider .slider_imgs #slide1{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/d/d1/Silkworms.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 25% 50%; | ||
+ | } | ||
+ | .slider .slider_imgs #slide2{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/8/81/Classroom.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 50%; | ||
+ | } | ||
+ | .slider .slider_imgs #slide3{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .slider .slider_imgs #slide4{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fd/Uclateam.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!--HP SLIDER--> | ||
+ | <style type="text/css"> | ||
+ | .hpslider{ | ||
+ | position: relative; | ||
+ | width: 1150px; | ||
+ | height: 400px; | ||
+ | margin: auto; | ||
+ | overflow: hidden; | ||
+ | z-index: 13; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | ||
+ | } | ||
+ | .hpslider .hpslider_left{ | ||
+ | position: absolute; | ||
+ | background-color:black; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .hpslider .hpslider_left img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 27%; | ||
+ | left: 10px; | ||
+ | } | ||
+ | .hpslider .hpslider_right{ | ||
+ | position: absolute; | ||
+ | background-color:black; | ||
+ | top: 0px; | ||
+ | left: 1100px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .hpslider .hpslider_right img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 27%; | ||
+ | left: -10px; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs{ | ||
+ | position: absolute; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs div{ | ||
+ | float: left; | ||
+ | width: 1150px; | ||
+ | height: 400px; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide1{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/d/d1/Silkworms.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 25% 50%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide2{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide3{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/2/28/Fahrion_UCLA_iGEM_statement.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide4{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/9/96/Fahrion_Non_Fluoresce.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide5{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/b/b3/Fahrion_Blue_Fluoresce_side.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide6{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/4/4c/Fahrion_process_Anuved_Dewal.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 40%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide7{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/9/95/Fahrion_Process_full.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 10% 50%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide8{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/f4/Fahrion_full_nonfluoresce.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 30%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide9{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/5/58/Fahrion_Group.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 45%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide10{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/b/be/Fahrion_David_Discussion.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 40%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide11{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/5/59/Fahrion_Process_Aal.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 40%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide12{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide13{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/e/ef/Fahrion_Blue_Straight.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide14{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/6/62/Fahrion_Process_Observers.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 50%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide15{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/5/57/Fahrion_Historical_Wall.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 45%; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!--PAGE HEADERS--> | ||
+ | <style type="text/css"> | ||
+ | .page_header{ | ||
+ | position: absolute; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png'); | ||
+ | width: 100%; | ||
+ | height: 450px; | ||
+ | z-index: 0; | ||
+ | margin-bottom: 200px; | ||
+ | } | ||
+ | .page_header .page_header_box{ | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | #box1{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); | ||
+ | background-size:1500px; | ||
+ | width:21%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:10%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | #box2{ | ||
+ | background-image:url('http://www.visualphotos.com/photo/1x7581974/silk_fibres_coloured_sem_H1200410.jpg'); | ||
+ | background-position:50% 50%; | ||
+ | width:21%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:30%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | #box3{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/3/31/Pcrgel.jpg'); | ||
+ | background-size:750px; | ||
+ | background-position:70% 70%; | ||
+ | width:21%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:50%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | #box4{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/a/a2/Spiderweb.jpg'); | ||
+ | |||
+ | width:21%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:70%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!--HP PAGE HEADERS--> | ||
+ | <style type="text/css"> | ||
+ | .hppage_header{ | ||
+ | position: absolute; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png'); | ||
+ | width: 100%; | ||
+ | height: 475px; | ||
+ | z-index: 0; | ||
+ | margin-bottom: 200px; | ||
+ | } | ||
+ | .hppage_header .hppage_header_box{ | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!--EDITING--> | ||
+ | <!--CONTENT SECTIONS--> | ||
+ | <style type="text/css"> | ||
+ | .content_container{ | ||
+ | position: absolute; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | top: 550px; | ||
+ | width: 100%; | ||
+ | padding: 0 0 0 0; | ||
+ | margin: auto; | ||
+ | margin-bottom: 50px; | ||
+ | margin-left: 0px; | ||
+ | border-radius: 0px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .page_content{ | ||
+ | position: relative; | ||
+ | background-color: #FFEE80; | ||
+ | width: 99%; | ||
+ | padding: 0 0 0 0; | ||
+ | margin: auto; | ||
+ | margin-bottom: 20px; | ||
+ | /*border-radius: 25px;*/ | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .content_subsection{ | ||
+ | position: relative; | ||
+ | width: 85%; | ||
+ | padding: 10px 10px 10px 10px; | ||
+ | margin: auto; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <!--STYLING FOR TABLES--> | ||
+ | <style> | ||
+ | table{ | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Debut_light.png'); | ||
+ | } | ||
+ | |||
+ | ulJ | ||
+ | { | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | ulN | ||
+ | { | ||
+ | list-style-type:none; | ||
+ | margin:10; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</html> | </html> |
Latest revision as of 02:41, 18 October 2014