Difference between revisions of "Template:Edigem15 Design"
(53 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | + | gh | |
<!-- Start of CSS--> | <!-- Start of CSS--> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | |||
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear | ||
Line 28: | Line 27: | ||
height: 100%; | height: 100%; | ||
border: 0px; | border: 0px; | ||
− | background-color: | + | background-color: #fff; |
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
Line 38: | Line 37: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | margin-left: | + | margin-left: none; |
− | margin-right: | + | margin-right: none; |
− | background-color: | + | background-color: #fff; |
+ | border: none; | ||
padding: 0px; | padding: 0px; | ||
font-size: 100%; | font-size: 100%; | ||
Line 53: | Line 53: | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
− | background-color: # | + | background-color: #fff; |
-webkit-background-size: cover; | -webkit-background-size: cover; | ||
-moz-background-size: cover; | -moz-background-size: cover; | ||
-o-background-size: cover; | -o-background-size: cover; | ||
background-size: cover; | background-size: cover; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 96: | Line 66: | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 108: | Line 72: | ||
display: table; | display: table; | ||
width: 100%; | width: 100%; | ||
− | height: | + | height: 100; |
text-align: center; | text-align: center; | ||
color: #fff; | color: #fff; | ||
− | background-color: # | + | background-color: #fff; |
− | background: url("https://static.igem.org/mediawiki/2015/ | + | background: url("https://static.igem.org/mediawiki/2015/7/78/Edigem15_Design_tower.jpeg") no-repeat bottom center scroll; |
-webkit-background-size: cover; | -webkit-background-size: cover; | ||
-moz-background-size: cover; | -moz-background-size: cover; | ||
Line 126: | Line 90: | ||
.intro .intro-body .brand-heading { | .intro .intro-body .brand-heading { | ||
+ | color: #000; | ||
margin-top: 15%; | margin-top: 15%; | ||
font-size: 40px; | font-size: 40px; | ||
Line 139: | Line 104: | ||
@media(min-width:768px) { | @media(min-width:768px) { | ||
.intro { | .intro { | ||
− | height: | + | height: 100%; |
padding: 0; | padding: 0; | ||
− | box-shadow: 0 -100px 100px # | + | box-shadow: 0 -100px 100px #fff inset; |
} | } | ||
Line 153: | Line 118: | ||
} | } | ||
− | + | body { | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; | |
− | + | color: #fff; | |
− | + | background-color: #000; | |
− | + | ||
} | } | ||
− | + | html { | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | h1, | |
− | margin | + | h2, |
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6 { | ||
+ | margin: none; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; | font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; | ||
− | |||
font-weight: 700; | font-weight: 700; | ||
− | + | letter-spacing: 1px; | |
+ | border-bottom: none; | ||
+ | |||
+ | |||
+ | } | ||
+ | .arrowtext | ||
+ | { | ||
+ | width: 100%; | ||
+ | display: block; | ||
} | } | ||
− | + | .arrow | |
− | + | { | |
− | + | height: 50px; | |
− | + | width: 100px; | |
− | } | + | opacity: 0.7; |
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*COMPONENTS*/ | |
− | + | ||
− | + | *, | |
− | + | *:after, | |
− | + | *::before { | |
− | + | -webkit-box-sizing: border-box; | |
− | + | -moz-box-sizing: border-box; | |
− | + | box-sizing: border-box; | |
+ | } | ||
+ | |||
+ | /* General styles and layout */ | ||
+ | |||
+ | |||
+ | |||
+ | .container { | ||
+ | overflow: hidden; | ||
+ | /* we don't want the pseudo-elements sticking out */ | ||
+ | } | ||
+ | |||
+ | .container svg { | ||
+ | display: block; | ||
} | } | ||
section { | section { | ||
− | + | width: 100%; | |
+ | position: relative; | ||
+ | padding: 10em 10%; | ||
+ | background: #fff; | ||
+ | color: #740404; | ||
+ | text-align: center; | ||
} | } | ||
− | section h2 | + | section h2 { |
− | { | + | color: #740404; |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | font-size: 2.8em; | |
− | + | font-weight: 400; | |
− | + | } | |
+ | section p { | ||
+ | color: #740404; | ||
+ | font-size: 1.3em; | ||
+ | line-height: 1.5; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | .text:first-child { | ||
+ | text-align: right; | ||
} | } | ||
− | + | .text:nth-child(2) { | |
− | + | text-align: left; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .col-2 .column { | |
− | + | width: 49%; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .col-3 .column { |
− | + | padding: 0 1%; | |
− | + | width: 33%; | |
+ | text-align: center; | ||
} | } | ||
+ | .col-3 .column p { | ||
+ | padding: 1.4em; | ||
+ | } | ||
− | . | + | .column { |
− | + | display: inline-block; | |
− | height: 100%; | + | vertical-align: top; |
− | + | } | |
− | color:# | + | |
+ | .icon { | ||
+ | display: block; | ||
+ | width: 2em; | ||
+ | height: 2em; | ||
+ | border-radius: 50%; | ||
+ | background: rgba(0,0,0,0.1); | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | font-size: 8em; | ||
+ | line-height: 2em; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | section.color h2 { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | section.color p { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .color { | ||
+ | background: #000; | ||
+ | } | ||
+ | |||
+ | /*** Individual section styles and separators ***/ | ||
+ | |||
+ | /* Common style for pseudo-elements */ | ||
+ | section::before, | ||
+ | section::after { | ||
+ | position: absolute; | ||
+ | content: ''; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | |||
+ | /* Triangles */ | ||
+ | .ss-style-triangles::before, | ||
+ | .ss-style-triangles::after { | ||
+ | left: 50%; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | -webkit-transform: translateX(-50%) rotate(45deg); | ||
+ | transform: translateX(-50%) rotate(45deg); | ||
+ | } | ||
+ | |||
+ | .ss-style-triangles::before { | ||
+ | top: -50px; | ||
+ | background: #2980b9; | ||
+ | } | ||
+ | |||
+ | .ss-style-triangles::after { | ||
+ | bottom: -50px; | ||
+ | z-index: 10; | ||
+ | background: inherit; | ||
+ | } | ||
+ | |||
+ | /* Double Diagonal line */ | ||
+ | |||
+ | .ss-style-doublediagonal { | ||
+ | z-index: 1; | ||
+ | padding-top: 6em; | ||
+ | /*background: #391919;*/ | ||
+ | } | ||
+ | |||
+ | .ss-style-doublediagonal::before, | ||
+ | .ss-style-doublediagonal::after { | ||
+ | top: 0; | ||
+ | left: -25%; | ||
+ | z-index: -1; | ||
+ | width: 100%; | ||
+ | height: 75%; | ||
+ | background: inherit; | ||
+ | -webkit-transform: rotate(-2deg); | ||
+ | transform: rotate(-2deg); | ||
+ | -webkit-transform-origin: 0 0; | ||
+ | transform-origin: 0 0; | ||
+ | } | ||
+ | |||
+ | .ss-style-doublediagonal::before { | ||
+ | height: 50%; | ||
+ | /*background: #391919;*/ | ||
+ | -webkit-transform: rotate(-3deg); | ||
+ | transform: rotate(-3deg); | ||
+ | -webkit-transform-origin: 3% 0; | ||
+ | transform-origin: 3% 0; | ||
+ | } | ||
+ | |||
+ | /* Half Circle */ | ||
+ | .ss-style-halfcircle::before, | ||
+ | .ss-style-halfcircle::after { | ||
+ | left: 50%; | ||
+ | z-index: 10; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | border-radius: 50%; | ||
+ | background: inherit; | ||
+ | -webkit-transform: translateX(-50%); | ||
+ | transform: translateX(-50%); | ||
+ | } | ||
+ | |||
+ | .ss-style-halfcircle::before { | ||
+ | top: -50px; | ||
+ | } | ||
+ | |||
+ | .ss-style-halfcircle::after { | ||
+ | bottom: -50px; | ||
+ | } | ||
+ | |||
+ | /* Big Triangle */ | ||
+ | svg#bigTriangleColor { | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | |||
+ | #bigTriangleColor path { | ||
+ | fill: #000; | ||
+ | stroke: #000; | ||
+ | stroke-width: 2; | ||
+ | } | ||
+ | |||
+ | /* Curves */ | ||
+ | #curveUpColor path, | ||
+ | #curveDownColor path { | ||
+ | fill: #000; | ||
+ | stroke: #000; | ||
+ | background-color: #8C001A; | ||
+ | } | ||
+ | |||
+ | /* Multiple Triangles */ | ||
+ | .ss-style-multitriangles::before, | ||
+ | .ss-style-multitriangles::after { | ||
+ | left: 50%; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | -webkit-transform: translateX(-50%) rotate(45deg); | ||
+ | transform: translateX(-50%) rotate(45deg); | ||
+ | } | ||
+ | |||
+ | .ss-style-multitriangles::before { | ||
+ | top: -25px; | ||
+ | background: inherit; | ||
+ | box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; | ||
+ | } | ||
+ | |||
+ | .ss-style-multitriangles::after { | ||
+ | bottom: -25px; | ||
+ | z-index: 10; | ||
+ | background: inherit; | ||
+ | box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; | ||
+ | } | ||
+ | |||
+ | /* Rounded corners */ | ||
+ | .ss-style-roundedcorners::before { | ||
+ | top: 100%; | ||
+ | left: 0; | ||
+ | z-index: 10; | ||
+ | width: 100%; | ||
+ | height: 60px; | ||
+ | border-radius: 0 0 60px 60px; | ||
+ | background: inherit; | ||
+ | } | ||
+ | |||
+ | /* Rounded center split and bottom rounded */ | ||
+ | .ss-style-roundedsplit { | ||
+ | padding-top: 7em; | ||
+ | border-radius: 0 0 80px 80px; | ||
+ | } | ||
+ | |||
+ | .ss-style-roundedsplit::before, | ||
+ | .ss-style-roundedsplit::after { | ||
+ | top: -70px; | ||
+ | left: 0; | ||
+ | z-index: 10; | ||
+ | width: 50%; | ||
+ | height: 70px; | ||
+ | background: inherit; | ||
+ | } | ||
+ | |||
+ | .ss-style-roundedsplit::before { | ||
+ | border-radius: 0 80px 0 0; | ||
+ | } | ||
+ | |||
+ | .ss-style-roundedsplit::after { | ||
+ | left: 50%; | ||
+ | border-radius: 80px 0 0 0; | ||
+ | } | ||
+ | |||
+ | /* Inverted rounded corners */ | ||
+ | .ss-style-invertedrounded { | ||
+ | margin-bottom: 90px; | ||
+ | padding: 13em 10% 10em; | ||
+ | border-radius: 0 0 0 90px; | ||
+ | } | ||
+ | |||
+ | .ss-style-invertedrounded::before, | ||
+ | .ss-style-invertedrounded::after { | ||
+ | left: 0; | ||
+ | z-index: -1; | ||
+ | height: 90px; | ||
+ | background: #3498db; | ||
+ | } | ||
+ | |||
+ | .ss-style-invertedrounded::before { | ||
+ | top: 100%; | ||
+ | width: 100%; | ||
+ | border-radius: 0 90px 0 0; | ||
+ | } | ||
+ | |||
+ | .ss-style-invertedrounded::after { | ||
+ | bottom: 0; | ||
+ | z-index: -1; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | /* Boxes */ | ||
+ | .ss-style-boxes { | ||
+ | padding-top: 4em; | ||
+ | padding-bottom: 13em; | ||
+ | } | ||
+ | |||
+ | .ss-style-boxes::before { | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9)); | ||
+ | background-image: linear-gradient(to right, #3498db 50%, #2980b9 50%); | ||
+ | -webkit-background-size: 130px 100%; | ||
+ | background-size: 130px 100%; | ||
+ | } | ||
+ | |||
+ | /* Zig Zag (3d up and simple down) */ | ||
+ | .ss-style-zigzag::before, | ||
+ | .ss-style-zigzag::after { | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | z-index: 10; | ||
+ | display: block; | ||
+ | height: 90px; | ||
+ | background-size: 50px 100%; | ||
+ | } | ||
+ | |||
+ | .ss-style-zigzag::before { | ||
+ | top: -90px; | ||
+ | background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db)); | ||
+ | background-image: | ||
+ | linear-gradient(315deg, #3093d5 25%, transparent 25%), | ||
+ | linear-gradient( 45deg, #3498db 25%, transparent 25%); | ||
+ | background-position: 50%; | ||
+ | } | ||
+ | |||
+ | .ss-style-zigzag::after { | ||
+ | top: 100%; | ||
+ | background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #3498db), color-stop(0.25, #2980b9)); | ||
+ | background-image: | ||
+ | linear-gradient(135deg, #3498db 25%, transparent 25%), | ||
+ | linear-gradient(225deg, #3498db 25%, transparent 25%); | ||
+ | background-position: 50%; | ||
+ | } | ||
+ | |||
+ | /* Edges */ | ||
+ | .ss-style-roundedges { | ||
+ | padding-bottom: 16em; | ||
+ | } | ||
+ | |||
+ | .ss-style-roundedges::before, | ||
+ | .ss-style-roundedges::after { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border-radius: 50%; | ||
+ | background: #2980b9; | ||
+ | top: -100px; | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | |||
+ | .ss-style-roundedges::before { | ||
+ | left: -100px; | ||
+ | } | ||
+ | |||
+ | .ss-style-roundedges::after { | ||
+ | right: -100px; | ||
+ | } | ||
+ | |||
+ | /* Slit */ | ||
+ | .ss-style-slit { | ||
+ | padding-top: 5em; | ||
+ | } | ||
+ | |||
+ | .ss-style-slit::before, | ||
+ | .ss-style-slit::after { | ||
+ | width: 50.5%; | ||
+ | width: -webkit-calc(50% + 10px); | ||
+ | width: -moz-calc(50% + 10px); | ||
+ | width: calc(50% + 10px); | ||
+ | height: 160px; | ||
+ | background: #2980b9; | ||
+ | top: -160px; | ||
+ | } | ||
+ | |||
+ | .ss-style-slit::before { | ||
+ | left: -20px; | ||
+ | -webkit-transform: skewX(10deg); | ||
+ | transform: skewX(10deg); | ||
+ | box-shadow: -10px -20px #3192d3; | ||
+ | } | ||
+ | |||
+ | .ss-style-slit::after { | ||
+ | right: -20px; | ||
+ | -webkit-transform: skewX(-10deg); | ||
+ | transform: skewX(-10deg); | ||
+ | box-shadow: 10px -20px #3192d3; | ||
+ | } | ||
+ | |||
+ | /* Big half circle */ | ||
+ | #bigHalfCircle path { | ||
+ | fill: #000; | ||
+ | stroke: #000; | ||
+ | } | ||
+ | |||
+ | /* Big triangle with shadow */ | ||
+ | |||
+ | #trianglePath1 { | ||
+ | fill: #000; | ||
+ | stroke: #000; | ||
+ | } | ||
+ | |||
+ | #trianglePath2 { | ||
+ | fill: #777; | ||
+ | stroke: #777; | ||
+ | } | ||
+ | |||
+ | /* Inclined Zig Zag */ | ||
+ | .ss-style-inczigzag::before, | ||
+ | .ss-style-inczigzag::after { | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | background-size: 100px 100%; | ||
+ | } | ||
+ | |||
+ | .ss-style-inczigzag::before { | ||
+ | top: 0; | ||
+ | background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #2980b9), color-stop(0.5, #3498db)); | ||
+ | background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%); | ||
+ | } | ||
+ | |||
+ | .ss-style-inczigzag::after { | ||
+ | bottom: 0; | ||
+ | background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #3498db), color-stop(0.5, #2980b9)); | ||
+ | background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%); | ||
+ | } | ||
+ | |||
+ | /* Castle */ | ||
+ | .ss-style-castle::before { | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | background-size: 200px 100%; | ||
+ | top: 0; | ||
+ | background-image: -webkit-linear-gradient(40deg, #3498db 50%, #2980b9 50%); | ||
+ | background-image: linear-gradient(40deg, #3498db 50%, #2980b9 50%); | ||
+ | } | ||
+ | |||
+ | /* Alternative slit with inner shadow */ | ||
+ | #slitPath1 { | ||
+ | fill: #3498db; | ||
+ | stroke: red; | ||
+ | stroke-width: 0; | ||
+ | } | ||
+ | |||
+ | #slitPath2, #slitPath3 { | ||
+ | fill: #2072a7; | ||
+ | } | ||
+ | |||
+ | /* Folded corner */ | ||
+ | .ss-style-foldedcorner::before, | ||
+ | .ss-style-foldedcorner::after { | ||
+ | bottom: 0; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | .ss-style-foldedcorner::before { | ||
+ | right: 0; | ||
+ | background-image: -webkit-linear-gradient(top left, #37a2ea 50%, #3498db 50%); | ||
+ | background-image: linear-gradient(315deg, #3498db 50%, #37a2ea 50%); | ||
+ | } | ||
+ | |||
+ | .ss-style-foldedcorner::after { | ||
+ | right: 100px; | ||
+ | background-image: -webkit-linear-gradient(top left, transparent 50%, #236fa1 50%); | ||
+ | background-image: linear-gradient(315deg, #236fa1 50%, transparent 50%); | ||
+ | } | ||
+ | |||
+ | /* Dots */ | ||
+ | .ss-style-dots::before { | ||
+ | bottom: 20px; | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | border-radius: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translateX(-50%); | ||
+ | transform: translateX(-50%); | ||
+ | background: #2072a7; | ||
+ | box-shadow: 30px 0 #2072a7, -30px 0 #2072a7; | ||
+ | } | ||
+ | |||
+ | /* Double Line */ | ||
+ | .ss-style-doubleline::before { | ||
+ | bottom: 30px; | ||
+ | width: 140px; | ||
+ | height: 2px; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translateX(-50%); | ||
+ | transform: translateX(-50%); | ||
+ | background: #2072a7; | ||
+ | box-shadow: 0 30px 0 #2072a7; | ||
+ | } | ||
+ | |||
+ | /* Cross */ | ||
+ | .ss-style-cross { | ||
+ | padding-bottom: 15em; | ||
+ | } | ||
+ | |||
+ | .ss-style-cross::before, | ||
+ | .ss-style-cross::after { | ||
+ | background: #2072a7; | ||
+ | bottom: 70px; | ||
+ | width: 200px; | ||
+ | height: 2px; | ||
+ | left: 50%; | ||
+ | -webkit-transform-origin: 50% 50%; | ||
+ | transform-origin: 50% 50%; | ||
+ | } | ||
+ | |||
+ | .ss-style-cross::before { | ||
+ | -webkit-transform: translateX(-50%) rotate(45deg); | ||
+ | transform: translateX(-50%) rotate(45deg); | ||
+ | } | ||
+ | |||
+ | .ss-style-cross::after { | ||
+ | -webkit-transform: translateX(-50%) rotate(-45deg); | ||
+ | transform: translateX(-50%) rotate(-45deg); | ||
+ | } | ||
+ | |||
+ | /* Stamp */ | ||
+ | #stamp path { | ||
+ | fill: #3498db; | ||
+ | stroke: #3498db; /* avoid gap in FF */ | ||
+ | } | ||
+ | |||
+ | /* Clouds */ | ||
+ | #clouds path { | ||
+ | fill: #ecf0f1; | ||
+ | stroke: #ecf0f1; | ||
+ | } | ||
+ | |||
+ | /* Media Queries for the layout */ | ||
+ | @media screen and (max-width: 68em) { | ||
+ | section { | ||
+ | font-size: 80%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 54em) { | ||
+ | .column { | ||
+ | display: block; | ||
+ | width: 100% !important; | ||
+ | } | ||
+ | |||
+ | .text:first-child, | ||
+ | .text:nth-child(2) { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .icon { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .col-2 .column:first-child .icon { | ||
+ | margin: 0 auto 50px; | ||
+ | } | ||
+ | |||
+ | .col-2 .column:nth-child(2) .icon { | ||
+ | margin: 50px auto 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /*menu*/ | ||
+ | |||
+ | #custom-bootstrap-menu.navbar-default .navbar-brand { | ||
+ | color: rgba(255, 255, 255, 1); | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default { | ||
+ | font-size: 18px; | ||
+ | background-color: rgba(34, 34, 34, 1); | ||
+ | border-bottom-width: 0px; | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-nav>li>a { | ||
+ | color: rgba(255, 255, 255, 1); | ||
+ | background-color: rgba(34, 34, 34, 1); | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover, | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus { | ||
+ | color: rgba(255, 255, 255, 1); | ||
+ | background-color: rgba(87, 86, 86, 1); | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-nav>.active>a, | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover, | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus { | ||
+ | color: rgba(255, 255, 255, 1); | ||
+ | background-color: rgba(87, 86, 86, 1); | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-toggle { | ||
+ | border-color: #575656; | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-toggle:hover, | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-toggle:focus { | ||
+ | background-color: #575656; | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { | ||
+ | background-color: #575656; | ||
+ | } | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, | ||
+ | #custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { | ||
+ | background-color: #222222; | ||
} | } | ||
+ | /*end menu*/ | ||
Latest revision as of 19:12, 20 November 2015
gh