Team:Tokyo Tech/main.css

From 2014.igem.org

Revision as of 12:10, 9 September 2014 by Cerburus (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, div.paragraph, blockquote, fieldset, input { margin: 0; padding: 0; }
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
a img { border: 0; }
a { text-decoration: none; }
::-webkit-input-placeholder { color: #797570; }
:-moz-placeholder { color: #797570; }
::-moz-placeholder { color: #797570; }
:-ms-input-placeholder { color: #797570; }
body { font-family: Arial, sans-serif; font-size: 18px; line-height: 1.5; color: #797570; font-weight: normal; background-image: url("theme/body-bg.jpg?1410264296"); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-attachment: fixed; height: 100%; box-sizing: border-box; }
.tall-header-page:before, .short-header-page:before, .title-page:before, .landing-page:before, .splash-page:before, .no-header-page:before { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 507px; z-index: -1; background: transparent url("theme/Menu-Shadow.png?1410264296") top left repeat; }
html { height: 100%; }
.container { margin: 0 auto; width: 970px; }
#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap { width:100%; }
a { color: #3b8cdd; }
a:hover { color: #86bcf3; }
h2 { font-size: 30px; padding: .5em 0 16px 0; line-height: 1.25; color: #494442; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; }
#banner-wrap h2, #footer-wrap h2, #splash-wrap h2 { color: #fff; border-bottom-color: rgba(0,0,0,0.2); }
div.paragraph { font-size: 18px; line-height: 1.5; padding: .5em 0; }
p { font-size: 18px; line-height: 1.5; padding: .5em 0; }
blockquote { background: #fff; font-family: 'Arvo', serif; font-size: 18px; line-height: 1.5; color: #494442; padding: 1em; margin: 2em 0; border: 2px solid #c8c6c4; border-left: 2px solid #c8c6c4 !important; font-style: normal !important; }
#splash-wrap blockquote { background: transparent; color: #fff; border-width: 2px 0 !important; border-color: rgba(0,0,0,0.2); font-size: 24px; line-height: 1.2; }
div#content {min-height:400px;}
.wsite-image-border-thin img { border:2px solid rgba (0,0,0,0.1) !important; }
.styled-hr { background-color: #eeecea; box-shadow: none; height: 2px; }
#banner-wrap .styled-hr, #footer-wrap .styled-hr, #splash-wrap .styled-hr { background-color: rgba(0,0,0,0.2); box-shadow: none; height: 2px; }
#logo, #logo a { color: #fff; font-size: 30px; text-transform: uppercase; font-family: 'Ubuntu', serif; font-weight: 700; }
#header { border-collapse: collapse; border-spacing: 0; width:100%; }
#header td { vertical-align: middle; text-align: left; }
#header table { float: right; width: 1px; }
#header td { padding: 0; }
.wsite-social { vertical-align: middle; }
.wsite-social-item { width: 24px; height: 24px; margin: 0 0 0 8px !important; background-image: url(theme/social-icons-black.png?1410264296); }
.wsite-social-rss { background-position: -220px -13px; }
.wsite-social-rss:hover { background-position: -220px -53px; }
.wsite-social-rss:active { background-position: -220px -95px; }
.wsite-social-linkedin { background-position: -127px -13px; }
.wsite-social-linkedin:hover { background-position: -127px -53px; }
.wsite-social-linkedin:active { background-position: -127px -95px; }
.wsite-social-facebook { background-position: -35px -13px; }
.wsite-social-facebook:hover { background-position: -35px -53px; }
.wsite-social-facebook:active { background-position: -35px -95px; }
.wsite-social-twitter { background-position: -82px -13px; }
.wsite-social-twitter:hover { background-position: -82px -53px; }
.wsite-social-twitter:active { background-position: -82px -95px; }
.wsite-social-mail { background-position: -173px -13px; }
.wsite-social-mail:hover { background-position: -173px -53px; }
.wsite-social-mail:active { background-position: -173px -95px; }
.wsite-social-pinterest { background-position: -357px -13px; }
.wsite-social-pinterest:hover { background-position: -357px -53px; }
.wsite-social-pinterest:active { background-position: -357px -95px; }
.wsite-social-youtube { background-position: -495px -13px; }
.wsite-social-youtube:hover { background-position: -495px -53px; }
.wsite-social-youtube:active { background-position: -495px -95px; }
.wsite-social-plus { background-position: -312px -13px; }
.wsite-social-plus:hover { background-position: -312px -53px; }
.wsite-social-plus:active { background-position: -312px -95px; }
.wsite-social-flickr { background-position: -265px -13px; }
.wsite-social-flickr:hover { background-position: -265px -53px; }
.wsite-social-flickr:active { background-position: -265px -95px; }
.wsite-social-vimeo { background-position: -404px -13px; }
.wsite-social-vimeo:hover { background-position: -404px -53px; }
.wsite-social-vimeo:active { background-position: -404px -95px; }
.wsite-social-yahoo { background-position: -448px -13px; }
.wsite-social-yahoo:hover { background-position: -448px -53px; }
.wsite-social-yahoo:active { background-position: -448px -95px; }
#banner-wrap .wsite-social-item, #footer-wrap .wsite-social-item, #splash-wrap .wsite-social-item { background-image: url(theme/social-icons-white.png?1410264296); }
#header .search { float: right; margin-left: 20px; }
#header .wsite-search { vertical-align: middle; overflow: hidden; position:relative; background: #fff; }
#header .wsite-search-input { width: 158px; height: 18px; border: 0; padding: 14px 5px !important; color: rgba(41,41,41,0.4); font-size: 16px; font-weight: bold; font-style: italic; float: right; background: none; border-left: 1px soild #292929 !important; }
#header .wsite-search-button { position: relative; width: 55px; height: 46px; border: 0; margin: 0; padding: 0; background: url("theme/submit-bg.png?1410264296") no-repeat left center; cursor: pointer; }
#header .wsite-search-cover { position:absolute; width:54px; height:42px; right:0px; top: 0px; z-index:1; cursor: pointer; }
#nav-wrap { padding: 34px 0; line-height: 1; position: relative; }
#nav-wrap .container { clear: both; overflow: hidden; position: relative; }
#nav-wrap .container ul { list-style: none; overflow: hidden; float: right; }
#nav-wrap .container ul li { list-style: none; float: left; padding-left: 50px; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; font-weight: 700; }
#nav-wrap .container ul span:last-child li, #nav-wrap .container ul > li:last-child { background: none; }
#nav-wrap .container ul li a { float: left; display: block; color: rgba(255,255,255,0.5); border: 0; outline: 0; list-style-type: none; font-size: 16px; font-weight: bold; -webkit-font-smoothing: antialiased; }
#nav-wrap .container ul li#active a, #nav-wrap .container ul li a:hover { color: #fff; border: 0; }
.splash-page #nav-wrap { position: absolute; top: 0; left: 0; }
#wsite-menus .wsite-menu { border: solid 2px rgba(0,0,0,0.2); }
#wsite-menus .wsite-menu li a { padding: 8px 0; color: #494442; background: #fff; border: 0; border-bottom: 1px solid #eeecea; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); margin: 0px 1px; }
#wsite-menus .wsite-menu li:last-child a { border-bottom-width: 0; }
#wsite-menus .wsite-menu li a:hover { color: #797570; background: #eeecea; }
#wsite-menus .wsite-menu li a:active { color: #fff; background: #797570; }
#banner { background-color: rgba(29,29,23,0.75); margin-bottom: 25px; text-align: center; }
#banner table { width: 100%; border-spacing: 0; border-collapse: collapse }
#banner td { vertical-align: middle !important; text-align: center; }
#bannerright { padding: 50px 70px; text-align: center; line-height: 1; }
#bannerright h2, #banner h2 { color: #fff; font-size: 36px; line-height: 1; padding: 0px 0px 30px; border-bottom: 2px solid rgba(0,0,0,0.2); text-transform: uppercase; font-family: 'Ubuntu', serif; font-weight: 700; }
#bannerright div.paragraph, #banner div.paragraph { color: rgba(255,255,255,0.5); font-size: 18px; padding: 20px 0; }
#bannerright p, #banner p { color: rgba(255,255,255,0.5); font-size: 18px; padding: 20px 0; }
#banner .button-wrap { display: inline-block; }
.tall-header-page #banner { margin: 0 0 30px 0; }
.tall-header-page .wsite-header { width: 970px; height: 359px; background: url(theme/banner-tall.jpg?1410264296) no-repeat center center; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.short-header-page #banner { margin: 0 0 30px 0; }
.short-header-page .wsite-header { width: 970px; height: 287px; background: url(theme/banner-short.jpg?1410264296) no-repeat; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.no-header-page .wsite-header { display:none; }
.splash-page { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-attachment: fixed; }
.splash-page .main-wrap { display: table-cell; width: 770px; margin: 160px auto 0px; text-align: center; position: relative; vertical-align: middle; }
.splash-page .main-wrap #content-section { text-align: center; padding: 40px 70px 70px 70px; color: rgba(255,255,255,0.5); background-color: rgba(0,0,0,0.6); }
.home-page .main-wrap #content-section-home { text-align: center; padding: 40px 70px 70px 70px; }
#splash-wrap { height: 100%; display: table; text-align: center; box-sizing: border-box; margin: 0 auto; padding-bottom: 34px; padding-top: 98px; }
.landing-page #banner { padding: 0; }
#bannerleft { width: 830px; background: #cfcfcf; margin-bottom: 40px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.2); border: solid 2px #4a4743; }
.landing-page .wsite-header { width: 830px; height: 465px; background: url(theme/banner-landing.jpg?1410264296) no-repeat; }
.title-page #banner { padding:10px 69px; }
.title-page #banner h2 { border-bottom: 0; padding-bottom: 0; }
.title-page #banner div.paragraph { margin-left:55px; }
.title-page #banner p { margin-left:55px; }
#main-wrap .container { min-height:400px; background: #fafafa; padding: 40px 70px 70px 70px; width: 830px; }
#main-wrap .paragraph ul, #main-wrap .paragraph ol { margin: 0 !important; }
#main-wrap .paragraph li { list-style: none; background: url(theme/bullets.png?1410264296) no-repeat left 8px; padding-left: 15px !important; }
#footer-wrap { text-align:right; margin-top: 30px; padding-bottom: 34px; }
#footer-wrap .wsite-form-field, #footer-wrap .wsite-form-sublabel { text-align: left; }
#footer-wrap .container { background: rgba(0,0,0,0.6); width: 830px; padding: 35px 70px 35px 70px; color: rgba(255,255,255,0.6); }
#footer-wrap .container h2 { color: #fff; font-size: 18px; padding: 0 0 1em 0; border-bottom: 2px solid #746e68; margin-bottom: 15px; }
#footer-wrap .container div.paragraph { color: rgba(255,255,255,0.6); font-size: 18px; padding: 0 0 15px 0; }
#footer-wrap .container p { color: rgba(255,255,255,0.6); font-size: 18px; padding: 0 0 15px 0; }
#footer-wrap .container blockquote { background: none; color: rgba(255,255,255,0.6); border: 0 !important; font-family: 'Arvo', sans-serif; }
#footer-wrap .wsite-search-element-input { height: 42px; padding-left: 58px; background-color: rgba(0,0,0,0.2) !important; border-color: rgba(255,255,255,0.2); }
#footer-wrap .wsite-search-element-input::-webkit-input-placeholder, #footer-wrap .wsite-search-element-input:-moz-placeholder, #footer-wrap .wsite-search-element-input::-moz-placeholder, #footer-wrap .wsite-search-element-input:-ms-input-placeholder { color: rgba(255,255,255,0.2); font-style: italic; }
#footer-wrap .wsite-search-element-submit { right: auto; left: 2px; background: rgba(255,255,255,0.2) url("theme/search-footer.png?1410264296") center center no-repeat; width: 38px; height: 38px; margin-top: -19px; }
.wsite-form-container { border-bottom: 2px solid #eeecea; margin-bottom: 20px; padding-bottom: 20px; }
.wsite-form-field { margin-top: 20px !important; line-height: 1.2; }
.wsite-form-label { display: inline-block; color: #797570; font-size: 18px; }
.form-radio-container { color: #797570; font-size: 16px; }
.wsite-form-sublabel { color: #797570; line-height: 1; margin-top: 5px; }
.form-radio-container input, .form-radio-container label { vertical-align: middle; }
.form-radio-container input { margin-right: 12px; }
.wsite-form-input, .wsite-search-element-input { color: #797570; font-size: 18px; background: #fff; border: solid 2px rgba(200,198,196,.4); }
.wsite-form-input:hover, .wsite-search-element-input:hover { background: #eeecea; }
.wsite-form-input:focus, .wsite-search-element-input:focus { background: #fff; border-color: #797570; outline: none; }
.wsite-form-input:active, .wsite-search-element-input:active { background-color: #eeecea; border-color: #797570; }
.form-select { color: #797570; font-size: 18px; background: #fff; border: solid 2px rgba(200,198,196,.2); padding: 5px; height: 40px !important; line-height: 44px !important; width: 300px; }
#banner-wrap .wsite-form-container, #footer-wrap .wsite-form-container, #splash-wrap .wsite-form-container { border-bottom-color: rgba(0,0,0,0.2); }
#banner-wrap .wsite-form-label, #footer-wrap .wsite-form-label, #splash-wrap .wsite-form-label { color: #B6B3AF; }
#banner-wrap .wsite-form-input, #banner-wrap .wsite-search-element-input, #footer-wrap .wsite-form-input, #footer-wrap .wsite-search-element-input, #splash-wrap .wsite-form-input, #splash-wrap .wsite-search-element-input { background-color: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.3); }
#banner-wrap .wsite-form-input:hover, #banner-wrap .wsite-search-element-input:hover, #footer-wrap .wsite-form-input:hover, #footer-wrap .wsite-search-element-input:hover, #splash-wrap .wsite-form-input:hover, #splash-wrap .wsite-search-element-input:hover { background-color: rgba(0,0,0,0); }
#banner-wrap .wsite-form-input:active, #banner-wrap .wsite-search-element-input:active, #footer-wrap .wsite-form-input:active, #footer-wrap .wsite-search-element-input:active, #splash-wrap .wsite-form-input:active, #splash-wrap .wsite-search-element-input:active { background-color: rgba(0,0,0,0); border-color: #fff; }
#banner-wrap .wsite-form-input:focus, #banner-wrap .wsite-search-element-input:focus, #footer-wrap .wsite-form-input:focus, #footer-wrap .wsite-search-element-input:focus, #splash-wrap .wsite-form-input:focus, #splash-wrap .wsite-search-element-input:focus { background-color: #4a4a4a; border-color: #fff; outline: none; }
.wsite-button, #wsite-com-checkout-button { display: inline-block; background: #fff; border: 2px solid #86bcf3; font-size: 18px; font-weight: bold !important; color: #3b8cdd !important; }
.wsite-button:hover, #wsite-com-checkout-button:hover { border-color: #3b8cdd; }
.wsite-button:active { background-color: #3b8cdd; color: #fff !important; }
.wsite-button-inner { background: transparent !important; }
.wsite-button-highlight { background: #fff !important; border-color: #c8c6c4; color: #797570 !important; }
.wsite-button-highlight:hover { border-color: #797570; }
.wsite-button-highlight:active { background: #797570 !important; border-color: #fff; }
#wsite-com-checkout-button:active { background-color: #3b8cdd !important; color: #fff !important; }
#banner-wrap .wsite-button, #footer-wrap .wsite-button, #splash-wrap .wsite-button{ background: transparent; border: 2px solid #86bcf3; color: #fff !important; }
#banner-wrap .wsite-button:hover, #footer-wrap .wsite-button:hover, #splash-wrap .wsite-button:hover { border-color: #3b8cdd; }
#banner-wrap .wsite-button:active, #footer-wrap .wsite-button:active, #splash-wrap .wsite-button:active { background-color: #3b8cdd; border-color: #3b8cdd; color: #fff !important; }
#banner-wrap .wsite-button-highlight, #footer-wrap .wsite-button-highlight, #splash-wrap .wsite-button-highlight { background: rgba(0,0,0,0.2) !important; border-color: #7d7d7d; color: #fff !important; }
#banner-wrap .wsite-button-highlight:hover, #footer-wrap .wsite-button-highlight:hover, #splash-wrap .wsite-button-highlight:hover { border-color: #fff; }
#banner-wrap .wsite-button-highlight:active, #footer-wrap .wsite-button-highlight:active, #splash-wrap .wsite-button-highlight:active { background: #fff !important; color: #494442 !important; }
.blog-sidebar-separator { padding-right: 0; }
.blog-sidebar h2 { font-size: 24px; padding-top: 0; padding-bottom: 0; }
#main-wrap .blog-title a { color: #494442; }
.wsite-product h2 { padding-top: 0; }
.wsite-form-input, .wsite-search-element-input, .form-select, .wsite-button, .wsite-menu li a, #nav a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transition-property: border-color, background-color, color; -moz-transition-property: border-color, background-color, color; -o-transition-property: border-color, background-color, color; transition-property: border-color, background-color, color; }
div.paragraph ul, div.paragraph ol { padding-left: 2.3em !important; margin: 5px 0 !important; overflow:hidden; } div.paragraph li { padding-left: 5px !important; margin: 3px 0 0 !important; } div.paragraph ul, div.paragraph ul li { list-style: disc outside !important; } div.paragraph ol, div.paragraph ol li { list-style: decimal outside !important; }