Team:UCLA/aalhad patankar ucla2014 workspace/CSS
From 2014.igem.org
(Difference between revisions)
(2 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | + | <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | |
- | < | + | |
<style type="text/css"> | <style type="text/css"> | ||
- | . | + | <!--WIKI TEMPLATE FORMATTING--> |
- | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | |
- | top: | + | |
- | + | .firstHeading { | |
- | + | width: 975px; | |
+ | margin: 0px auto; | ||
+ | padding-top: 100px; | ||
+ | margin-bottom: 20px; | ||
+ | font-family: Georgia, Times, "Times New Roman", serif; | ||
+ | display:none; | ||
} | } | ||
- | + | ||
- | + | h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;} | |
- | + | ||
- | + | #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/ | |
- | z-index: - | + | background-color: #383838; |
+ | border: 0 none; | ||
+ | height: 14px; | ||
+ | z-index: 100; | ||
+ | top: 0; | ||
+ | position: fixed; | ||
+ | width: 975px; | ||
+ | left: 50%; | ||
+ | margin-left: -487px; | ||
} | } | ||
- | + | ||
- | + | #top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/ | |
- | + | background-color: #383838; | |
- | + | height: 14px; | |
- | z-index: | + | display: block; |
+ | z-index: 10; | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | top: 0; | ||
} | } | ||
- | + | ||
- | # | + | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/ |
- | + | color: #727272; | |
- | + | text-decoration: none; | |
- | + | background-color: transparent; | |
} | } | ||
- | + | body { | |
- | + | background-color: #fff; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #globalWrapper, #content { /*-- changes default wiki settings --*/ | |
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | border: 0px; | |
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
} | } | ||
- | |||
- | + | html, body, .wrapper { /*-- changes default wiki settings --*/ | |
- | height: | + | width: 100%; |
- | + | height: 100%; | |
- | + | background-color: transparent; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | |
- | + | #contentcontainer { /*-- creates container for all content on page --*/ | |
- | + | font-family: Arial, Helvetica, sans-serif; | |
+ | font-weight: normal; | ||
+ | font-size: 14px; | ||
+ | color: #414141; | ||
+ | width: 960px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #transparent; | ||
+ | margin-top: 0px; | ||
} | } | ||
- | . | + | |
- | + | .sidemenu, .sidemenu li { | |
- | + | list-style-type: none; | |
- | + | list-style-image: none; | |
- | + | font-family: verdana; | |
- | + | text-decoration: none; | |
+ | color:#000; | ||
+ | font-size: 14px; | ||
} | } | ||
- | . | + | |
- | + | .sidemenu li {display: block;} | |
+ | |||
+ | .sidemenu a { | ||
+ | text-decoration:none; | ||
+ | color: #000; | ||
+ | display: block; | ||
+ | width: 180px; | ||
+ | height: 100%; | ||
+ | padding: 3px 5px; | ||
+ | transition: .25s ease-in-out; | ||
+ | -moz-transition: .25s ease-in-out; | ||
+ | -webkit-transition: .25s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .sidemenu a.greyout { color: #909090; } | ||
+ | |||
+ | .sidemenu a:hover { | ||
+ | color:#666; | ||
+ | background-color: #d9f5aa; | ||
} | } | ||
- | + | ||
- | + | .sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;} | |
- | + | .sub-sidemenu a {color: #666;} | |
+ | |||
+ | div.underconst | ||
+ | { | ||
+ | padding:10px; | ||
+ | border-radius:5px; | ||
+ | background-color:pink; | ||
+ | text-align:center; | ||
} | } | ||
- | # | + | |
- | + | a.anchor{display: block; position: relative; top: -80px; visibility: hidden;} | |
- | + | ||
+ | .contentpara {margin-bottom: 30px;} | ||
+ | |||
+ | span.email{font-family: monospace; font-weight: normal;} | ||
+ | |||
+ | fieldset {border: 1px solid #337f53;} | ||
+ | |||
+ | .greyout {color: #A0A0A0;} | ||
+ | .highlightme {background-color: #FFFF00;} | ||
+ | |||
+ | #alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;} | ||
+ | #annContainer {margin-left: 8px;} | ||
+ | #newsContainer {border: 1px solid #ccc;} | ||
+ | |||
+ | .newsTitle { | ||
+ | display: block; | ||
+ | color: #414141; | ||
+ | font-size: 25px; | ||
+ | font-family: Georgia, Times, "Times New Roman", serif; | ||
+ | padding: 10px 15px 5px 10px; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | margin-bottom: 0px; | ||
} | } | ||
+ | .newsItem { | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | display: block; | ||
+ | padding: 5px 15px 0px 10px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
- | + | .newsItem h3 { | |
- | <!-- | + | width: auto; |
- | + | display: inline; | |
+ | font-size: 14px; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .newsItem img { | ||
+ | float: right; | ||
+ | clear: right; | ||
+ | width: 80px; | ||
+ | padding-left: 15px; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .newsItem .newsDate { | ||
+ | font-style: italic; | ||
+ | font-size: 14px; | ||
+ | display: inline-block; | ||
+ | color: #999; | ||
+ | float: right; | ||
+ | padding: 0px 0px 10px 15px; | ||
+ | } | ||
+ | |||
+ | .newsItem p, .newsItem ul, .newsItem li { | ||
+ | padding: 0px; | ||
+ | margin-left: 20px; | ||
+ | font-size: 12px; | ||
+ | line-height: 1.2; | ||
+ | } | ||
+ | |||
+ | .newsItem p {margin-top: 10px;} | ||
+ | |||
+ | .annItem { | ||
+ | border: 2px solid #49b677; | ||
+ | display: block; | ||
+ | padding: 0px 15px 10px 10px; | ||
+ | margin-bottom: 18px; | ||
+ | position: relative; | ||
+ | height: 160px; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .annItem .annCentered { | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | height: 160px; | ||
+ | } | ||
+ | |||
+ | .annCentered h3 { | ||
+ | padding: 0px; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .annItem ul, .annItem li {padding: 0px; margin: 0px;} | ||
+ | .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; | ||
+ | } | ||
+ | |||
+ | <!--SPLASH PAGE--> | ||
.contentBorder { | .contentBorder { | ||
border: 1px solid #AAAAAA; | border: 1px solid #AAAAAA; | ||
Line 164: | Line 308: | ||
margin-bottom:20px; | margin-bottom:20px; | ||
} | } | ||
- | . | + | </style> |
- | + | ||
+ | <!--SPIDER TOP BUTTON--> | ||
+ | <style type="text/css"> | ||
+ | .spiderbutton{ | ||
+ | position: fixed; | ||
+ | top: 80%; | ||
+ | left: 80%; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | .spiderline{ | ||
+ | position: fixed; | ||
+ | left:896px; | ||
+ | top: -95px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .spiderweb{ | ||
+ | position: fixed; | ||
+ | right: 0px; | ||
+ | top: 0px; | ||
+ | z-index:50; | ||
+ | } | ||
+ | <style> | ||
+ | <!--CONTENT DIV--> | ||
+ | <!--SUMMARY TITLES--> | ||
+ | <style type="text/css"> | ||
+ | .content_div_container{ | ||
+ | background-color:blue; | ||
+ | position: fixed; | ||
+ | display:inline-block; | ||
+ | border: 2px solid #CCCCB2; | ||
+ | border-radius: 10px; | ||
+ | margin: 20px 20px 20px 20px; | ||
+ | overflow:hidden; | ||
+ | height: 400px; | ||
+ | width: 400px; | ||
+ | } | ||
+ | .content_div_text{ | ||
+ | position: absolute; | ||
+ | padding: 10 10 10 10; | ||
+ | top: 300px; | ||
+ | left: 0; | ||
+ | background-color:black; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | .content_div_text h3 { | ||
+ | font-family: Verdana; | ||
+ | margin: 10px 10px 10px 10px; | ||
+ | color: white; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .content_div_text p { | ||
+ | font-family: Verdana; | ||
+ | margin: 10px 10px 10px 10px; | ||
+ | color: white; | ||
} | } | ||
</style> | </style> | ||
Line 242: | Line 439: | ||
position:relative; | position:relative; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
Line 283: | Line 467: | ||
overflow:hidden; | overflow:hidden; | ||
margin:0px auto; | margin:0px auto; | ||
- | background-image:url( | + | background-image:url("File:Loader.gif"); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
background-position:center; | background-position:center; | ||
+ | position: relative; | ||
+ | } | ||
+ | .slider img{ | ||
+ | width:800px; | ||
+ | height:350px; | ||
+ | display:none; | ||
+ | } | ||
+ | .slider_nav{ | ||
+ | width:800px; | ||
+ | margin:0 auto; | ||
+ | position:relative; | ||
+ | top:-200px; | ||
+ | z-index:10; | ||
} | } | ||
.shadow{ | .shadow{ | ||
- | background-image:url( | + | background-image:url("File:Slider-shadow.jpg"); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
background-position:top; | background-position:top; | ||
Line 295: | Line 492: | ||
margin:0px auto; | margin:0px auto; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #container { | |
- | + | width: 100px; | |
- | + | height: 100px; | |
- | + | position: relative; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #navi, | |
- | + | #infoi { | |
- | # | + | width: 100%; |
- | + | height: 100%; | |
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | left: 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #infoi { |
- | + | z-index: 10; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 22:15, 16 September 2014