Difference between revisions of "Team:British Columbia/Test/Custom CSS"
(174 intermediate revisions by 3 users not shown) | |||
Line 32: | Line 32: | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | html, body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: "Helvetica", sans-serif; | ||
+ | font-weight: lighter; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | html, body, head, #content{ | ||
+ | background-color:#e1d1b4; | ||
+ | } | ||
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | ||
display:none;} | display:none;} | ||
Line 47: | Line 62: | ||
} | } | ||
− | . | + | .bod{ |
− | + | ||
− | margin: 0; | + | width:100%; |
− | + | height:100%; | |
− | + | margin-bottom:80px; | |
− | + | } | |
− | width: | + | |
+ | body#ubc{ | ||
+ | width:100%; | ||
+ | /*min-width:1200px;*/ | ||
+ | height:100%; | ||
+ | margin: 0 auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | /* | ||
+ | #text{ | ||
+ | width:1500px; | ||
+ | margin:0 auto; | ||
+ | height:100%; | ||
+ | text-align:center; | ||
+ | }*/ | ||
+ | |||
+ | .UBCbod{ | ||
+ | margin: 0 auto; | ||
+ | height:100%; | ||
+ | width:1200px; | ||
+ | } | ||
+ | |||
+ | #corners{ | ||
+ | width:100%; | ||
+ | min-width:1200px; | ||
+ | margin: 0 auto; | ||
+ | height:285px; | ||
+ | z-index:0; | ||
+ | position:absolute; | ||
+ | margin-top:-50px; | ||
+ | } | ||
+ | |||
+ | #cornerleft{ | ||
+ | background: url('https://static.igem.org/mediawiki/2015/a/ad/Corner_actual_left_goods.png') no-repeat; | ||
+ | float:Left; | ||
+ | width:400px; | ||
+ | height:285px; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | |||
+ | #cornerright{ | ||
+ | background: url('https://static.igem.org/mediawiki/2015/4/44/Corner_left_good2.png') no-repeat; | ||
+ | float:right; | ||
+ | width:400px; | ||
+ | height:285px; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | |||
+ | .UBCheader{ | ||
+ | z-index:100; | ||
+ | width:100%; | ||
+ | min-width:1200px; | ||
height: 70px; | height: 70px; | ||
− | + | background-color:#bbd0bf; | |
− | + | border:#738d83 10px solid; | |
− | + | border-right: none; | |
− | + | border-left:none; | |
− | + | position:absolute; | |
+ | margin-top:50px; | ||
} | } | ||
− | + | #UBCheader{ | |
− | + | width: 1200px; | |
+ | height: 100px; | ||
+ | float:left; | ||
+ | margin:0 auto; | ||
+ | z-index:100; | ||
} | } | ||
− | / | + | #UBClogo{ |
− | --- | + | width: 377px; |
− | + | height:150px; | |
+ | float:left; | ||
+ | position: relative; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2015/c/c1/UBC_logo.png'); | ||
+ | margin-left:50px; | ||
+ | margin-top:-45px; | ||
+ | } | ||
− | + | #UBCmenu{ | |
− | + | width: 700px; | |
− | + | height: 125px; | |
− | + | float:left; | |
+ | position: relative; | ||
+ | margin-left:50px; | ||
+ | margin-top:-15px; | ||
+ | display:block; | ||
+ | font-family: "Times New Roman", serif; | ||
} | } | ||
− | + | #UBCmenu a h4:hover{ | |
− | + | color:#804315; | |
+ | } | ||
− | + | #UBCmenu ul li a:hover{ | |
− | + | color:#804315; | |
− | + | ||
} | } | ||
− | + | #UBCmenu h4{ | |
− | ----- | + | text-align: center; |
+ | padding-top:40px; | ||
+ | padding-left:5px; | ||
+ | margin:0; | ||
+ | color:white; | ||
+ | font-size:18px; | ||
+ | font-weight:100; | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | } | ||
− | + | #UBCmenu ul{ | |
− | + | list-style:none; | |
− | + | color:white; | |
− | + | position:relative; | |
− | + | display:none; | |
} | } | ||
− | + | ||
− | + | #UBCmenu a{ | |
− | + | color:white; | |
+ | font-size:12px; | ||
} | } | ||
− | + | #UBCmenu #proj:hover ul{ | |
− | + | display:block; | |
− | + | position:absolute; | |
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
+ | #UBCmenu #parts:hover ul{ | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | } | ||
− | + | #UBCmenu #model:hover ul{ | |
− | + | display:block; | |
− | + | position:absolute; | |
− | + | ||
} | } | ||
− | + | #UBCmenu #hp:hover ul{ | |
− | + | display:block; | |
+ | position:absolute; | ||
+ | } | ||
− | + | #UBCmenu #ach:hover ul{ | |
− | + | display:block; | |
− | + | position:absolute; | |
− | + | ||
} | } | ||
− | + | ||
− | + | #UBCmenu #team:hover ul{ | |
+ | display:block; | ||
+ | position:absolute; | ||
} | } | ||
− | + | ||
− | + | #UBCmenu #note:hover ul{ | |
− | + | display:block; | |
+ | position:absolute; | ||
} | } | ||
+ | #UBCmenu ul{ | ||
+ | margin-top:30px; | ||
+ | margin-left:27px; | ||
+ | z-index:100; | ||
+ | } | ||
− | + | #UBCmenu ul li{ | |
− | ---- | + | width:60px; |
+ | background-color:#e7b76d; | ||
+ | margin:0; | ||
+ | padding:5px; | ||
+ | text-align:center; | ||
+ | border-bottom:solid 1px #e1d1b4; | ||
+ | opacity:0.99; | ||
+ | line-height:100%; | ||
+ | } | ||
− | + | #UBCmenu ul li ul{ | |
− | + | width:60px; | |
+ | background-color:#e7b76d; | ||
+ | margin:0; | ||
+ | padding:5px; | ||
+ | text-align:center; | ||
+ | border-bottom:solid 1px #e1d1b4; | ||
+ | opacity:0.99; | ||
+ | line-height:100%; | ||
+ | float:left; | ||
+ | margin-left:60px; | ||
+ | margin-top:-40px; | ||
+ | display:none; | ||
} | } | ||
− | + | ul li:hover ul{ | |
− | + | display:block; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | #UBCmenu ul li ul li{ | ||
+ | float:left; | ||
+ | } | ||
− | + | a:hover{ | |
− | - | + | text-decoration:none; |
+ | } | ||
− | + | #UBCmenu #proj{ | |
− | + | width:114px; | |
− | + | height: 100px; | |
− | + | float:left; | |
− | + | position: relative; | |
− | + | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | |
− | + | background-repeat:no-repeat; | |
− | + | background-position:center; | |
− | + | margin-top: 30px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | + | #UBCmenu #parts{ | |
− | + | width:114px; | |
− | + | height: 100px; | |
− | + | float:left; | |
− | + | position: relative; | |
− | + | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | |
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-left:-30px; | ||
+ | margin-top:-40px; | ||
+ | } | ||
+ | #UBCmenu #model{ | ||
+ | width:114px; | ||
+ | height: 100px; | ||
+ | float:left; | ||
+ | position: relative; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-top: 30px; | ||
+ | margin-left:-30px; | ||
+ | } | ||
+ | #UBCmenu #hp h4{ | ||
+ | line-height:15px; | ||
+ | padding-top:33px;} | ||
− | + | #UBCmenu #hp{ | |
− | + | width:114px; | |
− | + | height: 100px; | |
+ | float:left; | ||
+ | position: relative; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-left:-30px; | ||
+ | margin-top:-40px; | ||
} | } | ||
− | + | #UBCmenu #hp ul{ | |
− | + | margin-top:40px; | |
− | + | } | |
− | + | ||
− | + | #UBCmenu #team{ | |
− | . | + | width:114px; |
− | width: | + | height: 100px; |
− | height: | + | float:left; |
+ | position: relative; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-top: 30px; | ||
+ | margin-left:-30px; | ||
+ | } | ||
+ | |||
+ | #UBCmenu #note{ | ||
+ | width:114px; | ||
+ | height: 100px; | ||
+ | float:left; | ||
+ | position: relative; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-left:-30px; | ||
+ | margin-top:-40px; | ||
+ | } | ||
+ | |||
+ | #UBCmenu #ach{ | ||
+ | width:114px; | ||
+ | height: 100px; | ||
+ | float:left; | ||
+ | position: relative; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2015/8/8f/UBC_buttonartefact.png'); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-top: 30px; | ||
+ | margin-left:-30px; | ||
+ | } | ||
+ | |||
+ | .UBCt{ | ||
+ | width:100%; | ||
+ | height: 100px; | ||
+ | margin: 0 auto; | ||
+ | text-align:center; | ||
+ | padding-top:220px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #UBCt{ | ||
+ | width:1200px; | ||
margin:0 auto; | margin:0 auto; | ||
} | } | ||
− | + | ||
− | width: | + | #UBCtitle{ |
− | height: | + | width:1200px; |
− | text-align: center; | + | height: 100px; |
+ | float:left; | ||
+ | margin: 0 auto; | ||
+ | text-align:center; | ||
} | } | ||
− | + | #UBCtitle #two{ | |
− | width: | + | width: 500px; |
+ | float:left; | ||
+ | position: relative; | ||
height:50px; | height:50px; | ||
+ | background-color: #f3dfba; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(left, #f3dfba 0%, #e1d1b4 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f3dfba), color-stop(100%,#e1d1b4)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(left, #f3dfba 0%,#e1d1b4 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(left, #f3dfba 0%,#e1d1b4 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(left, #f3dfba 0%,#e1d1b4 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to right, #f3dfba 0%,#e1d1b4 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3dfba', endColorstr='#e1d1b4',GradientType=1 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | #UBCtitle #one{ | ||
+ | width: 500px; | ||
float:left; | float:left; | ||
− | background-color: | + | position: relative; |
− | + | height: 50px; | |
− | + | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1d1b4+1,f3dfba+100 */ | |
+ | |||
+ | background: #e1d1b4; /* Old browsers */ | ||
+ | |||
+ | background: -moz-linear-gradient(left, #e1d1b4 1%, #f3dfba 100%); /* FF3.6+ */ | ||
+ | |||
+ | background: -webkit-gradient(linear, left top, right top, color-stop(1%,#e1d1b4), color-stop(100%,#f3dfba)); /* Chrome,Safari4+ */ | ||
+ | |||
+ | background: -webkit-linear-gradient(left, #e1d1b4 1%,#f3dfba 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | |||
+ | background: -o-linear-gradient(left, #e1d1b4 1%,#f3dfba 100%); /* Opera 11.10+ */ | ||
+ | |||
+ | background: -ms-linear-gradient(left, #e1d1b4 1%,#f3dfba 100%); /* IE10+ */ | ||
+ | |||
+ | background: linear-gradient(to right, #e1d1b4 1%,#f3dfba 100%); /* W3C */ | ||
+ | |||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1d1b4', endColorstr='#f3dfba',GradientType=1 ); /* IE6-9 */ | ||
+ | |||
+ | |||
} | } | ||
− | + | ||
− | + | #UBCtitle #three{ | |
− | width: | + | margin:0 auto; |
+ | width:200px; | ||
height:50px; | height:50px; | ||
+ | text-decoration:none; | ||
+ | font-style: normal; | ||
+ | text-align: center; | ||
+ | font-size:20px; | ||
+ | color:white; | ||
+ | text-shadow: -2px 0 #5e2d20, 0 2px #5e2d20, 2px 0 #5e2d20, 0 -2px #5e2d20; | ||
float:left; | float:left; | ||
− | + | position: relative; | |
+ | margin-top:-20px; | ||
} | } | ||
− | + | ||
− | width: | + | #homepageimg{ |
− | + | width: 1200px; | |
− | + | height: 1200px; | |
− | background- | + | margin: 0 auto; |
− | position: | + | background-image: url('https://static.igem.org/mediawiki/2015/8/8e/UBChoverme.png'); |
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | } | ||
+ | |||
+ | |||
+ | #homepageimg:hover{ | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/c/cb/Hovered.png'); | ||
} | } | ||
+ | |||
+ | #UBCbody{ | ||
+ | padding:20px; | ||
+ | width:1100px; | ||
+ | background-color:white; | ||
+ | border-radius:20px; | ||
+ | margin:0 auto; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | #UBCbody { | ||
+ | text-indent:20px; | ||
+ | } | ||
+ | |||
+ | #footer{ | ||
+ | width:100%; | ||
+ | min-width:1200px; | ||
+ | height:50px; | ||
+ | background-color:#748e83; | ||
+ | margin-top:30px; | ||
+ | } | ||
+ | |||
+ | #footer h6{ | ||
+ | float:right; | ||
+ | padding-right:50px; | ||
+ | } | ||
+ | |||
+ | .CSSTableGenerator { | ||
+ | margin:0px;padding:0px; | ||
+ | width:100%; | ||
+ | box-shadow: 10px 10px 5px #888888; | ||
+ | border:1px solid #000000; | ||
+ | |||
+ | -moz-border-radius-bottomleft:0px; | ||
+ | -webkit-border-bottom-left-radius:0px; | ||
+ | border-bottom-left-radius:0px; | ||
+ | |||
+ | -moz-border-radius-bottomright:0px; | ||
+ | -webkit-border-bottom-right-radius:0px; | ||
+ | border-bottom-right-radius:0px; | ||
+ | |||
+ | -moz-border-radius-topright:0px; | ||
+ | -webkit-border-top-right-radius:0px; | ||
+ | border-top-right-radius:0px; | ||
+ | |||
+ | -moz-border-radius-topleft:0px; | ||
+ | -webkit-border-top-left-radius:0px; | ||
+ | border-top-left-radius:0px; | ||
+ | }.CSSTableGenerator table{ | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | margin:0px;padding:0px; | ||
+ | }.CSSTableGenerator tr:last-child td:last-child { | ||
+ | -moz-border-radius-bottomright:0px; | ||
+ | -webkit-border-bottom-right-radius:0px; | ||
+ | border-bottom-right-radius:0px; | ||
+ | } | ||
+ | .CSSTableGenerator table tr:first-child td:first-child { | ||
+ | -moz-border-radius-topleft:0px; | ||
+ | -webkit-border-top-left-radius:0px; | ||
+ | border-top-left-radius:0px; | ||
+ | } | ||
+ | .CSSTableGenerator table tr:first-child td:last-child { | ||
+ | -moz-border-radius-topright:0px; | ||
+ | -webkit-border-top-right-radius:0px; | ||
+ | border-top-right-radius:0px; | ||
+ | }.CSSTableGenerator tr:last-child td:first-child{ | ||
+ | -moz-border-radius-bottomleft:0px; | ||
+ | -webkit-border-bottom-left-radius:0px; | ||
+ | border-bottom-left-radius:0px; | ||
+ | }.CSSTableGenerator tr:hover td{ | ||
+ | |||
+ | } | ||
+ | .CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; } | ||
+ | .CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{ | ||
+ | vertical-align:middle; | ||
+ | |||
+ | |||
+ | border:1px solid #000000; | ||
+ | border-width:0px 1px 1px 0px; | ||
+ | text-align:center; | ||
+ | padding:7px; | ||
+ | font-size:10px; | ||
+ | font-family:Helvetica; | ||
+ | font-weight:bold; | ||
+ | color:#000000; | ||
+ | }.CSSTableGenerator tr:last-child td{ | ||
+ | border-width:0px 1px 0px 0px; | ||
+ | }.CSSTableGenerator tr td:last-child{ | ||
+ | border-width:0px 0px 1px 0px; | ||
+ | }.CSSTableGenerator tr:last-child td:last-child{ | ||
+ | border-width:0px 0px 0px 0px; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child td{ | ||
+ | background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) ); | ||
+ | background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% ); | ||
+ | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00); | ||
+ | |||
+ | background-color:#ff7f00; | ||
+ | border:0px solid #000000; | ||
+ | text-align:center; | ||
+ | border-width:0px 0px 1px 1px; | ||
+ | font-size:18px; | ||
+ | font-family:Helvetica; | ||
+ | font-weight:bold; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child:hover td{ | ||
+ | background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) ); | ||
+ | background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% ); | ||
+ | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00); | ||
+ | |||
+ | background-color:#ff7f00; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child td:first-child{ | ||
+ | border-width:0px 0px 1px 0px; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child td:last-child{ | ||
+ | border-width:0px 0px 1px 1px; | ||
+ | } | ||
+ | |||
</style> | </style> |
Latest revision as of 23:10, 17 October 2015