Line 250: |
Line 250: |
| width:35%; | | width:35%; |
| text-align: center; | | text-align: center; |
| + | } |
| + | |
| + | #topbar { |
| + | background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */ |
| + | background: #098280; /* For browsers that do not support gradients */ |
| + | background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */ |
| + | background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */ |
| + | background: linear-gradient(#098280, #E95F26); /* Standard syntax */ |
| + | width:100%; |
| + | color:white; |
| + | font-size:4vw; |
| + | text-align:center; |
| + | text-shadow:2px 2px black; |
| + | font-weight:bold; |
| + | min-height:130px; |
| + | display:flex; |
| + | align-items:center; |
| + | } |
| + | #body { |
| + | width:100%; |
| + | margin:0 auto; |
| + | } |
| + | .fixed { |
| + | margin:0 auto; |
| + | vertical-align:baseline; |
| + | } |
| + | .flexbox{ |
| + | display:flex; |
| + | flex-direction:column; |
| + | margin: 15px 15px; |
| + | font-size:1.3vw; |
| + | } |
| + | .navbutton { |
| + | border-right:.2vw solid #587560; |
| + | color:white; |
| + | font-weight:bold; |
| + | font-size:1.7vw; |
| + | padding:0 .5vw; |
| + | display:flex; |
| + | flex-direction:column; |
| + | width:12.7vw; |
| + | height:2.7vw; |
| + | text-align:center; |
| + | float:left; |
| + | text-shadow:1px 1px black; |
| + | } |
| + | .navbutton2 { |
| + | color:white; |
| + | font-weight:bold; |
| + | font-size:1.7vw; |
| + | padding:0 .5vw; |
| + | display:flex; |
| + | flex-direction:column; |
| + | width:11.7vw; |
| + | height:2.7vw; |
| + | text-align:center; |
| + | float:left; |
| + | text-shadow:1px 1px black; |
| + | } |
| + | #navbar { |
| + | background:#E95F26; |
| + | border:.2vw solid #587560; |
| + | height:3vw; |
| + | display:flex; |
| + | flex-direction:column; |
| + | } |
| + | .sectionheader{ |
| + | background:#098280; |
| + | width:100%; |
| + | color:white; |
| + | font-size:2vw; |
| + | text-align:center; |
| + | text-shadow:1px 1px black; |
| + | font-weight:bold; |
| + | min-height:40px; |
| + | border-radius:25px; |
| + | display:flex; |
| + | align-items:left; |
| + | padding:0 0px 0 0px; |
| + | } |
| + | .primerlogo { |
| + | width:auto; |
| + | max-width:13vw; |
| + | height:auto; |
| + | max-height:13vw; |
| + | margin:0 0 2vw 3vw; |
| + | } |
| + | .camel { |
| + | width: auto; |
| + | max-width: 16vw; |
| + | height: auto; |
| + | max-height: 11vw; |
| + | width: auto; |
| + | position:relative; |
| + | top:1vw; |
| + | } |
| + | .editathonTall { |
| + | width:auto; |
| + | max-width:13vw; |
| + | height:auto; |
| + | max-height:30vw; |
| + | padding:0 0 0 0; |
| + | } |
| + | #editathonsection { |
| + | font-size:1.3vw; |
| + | text-align:left; |
| + | display:flex; |
| + | align-items:center; |
| + | } |
| + | .sectionheader2{ |
| + | background:#52A7A6; |
| + | width:100%; |
| + | color:white; |
| + | font-size:2vw; |
| + | text-align:center; |
| + | text-shadow:1px 1px black; |
| + | font-weight:bold; |
| + | min-height:30px; |
| + | border-radius:0px; |
| + | display:flex; |
| + | align-items:left; |
| + | padding:10px 0 0 10px; |
| + | } |
| + | .primertextbox{ |
| + | background-color:gray; |
| + | color:white; |
| + | padding:25px 15px 15px 15px; |
| + | position:relative; |
| + | bottom:.4vw; |
| + | font-size:1.3vw; |
| + | } |
| + | .mw-collapsible-toggle { |
| + | float: right; |
| + | -moz-user-select: none; |
| + | -webkit-user-select: none; |
| + | -ms-user-select: none; |
| + | user-select: none; |
| + | } |
| + | /* Align the toggle based on the direction of the content language */ |
| + | /* @noflip */ |
| + | .mw-content-ltr .mw-collapsible-toggle, |
| + | .mw-content-rtl .mw-content-ltr .mw-collapsible-toggle { |
| + | float: right; |
| + | } |
| + | /* @noflip */ |
| + | .mw-content-rtl .mw-collapsible-toggle, |
| + | .mw-content-ltr .mw-content-rtl .mw-collapsible-toggle { |
| + | float: left; |
| + | } |
| + | |
| + | .mw-customtoggle, |
| + | .mw-collapsible-toggle { |
| + | cursor: pointer; |
| + | } |
| + | |
| + | /* collapse links in captions should be inline */ |
| + | caption .mw-collapsible-toggle, |
| + | .mw-content-ltr caption .mw-collapsible-toggle, |
| + | .mw-content-rtl caption .mw-collapsible-toggle, |
| + | .mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle, |
| + | .mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle { |
| + | float: none; |
| + | } |
| + | |
| + | /* list-items go as wide as their parent element, don't float them inside list items */ |
| + | li .mw-collapsible-toggle, |
| + | .mw-content-ltr li .mw-collapsible-toggle, |
| + | .mw-content-rtl li .mw-collapsible-toggle, |
| + | .mw-content-rtl .mw-content-ltr li .mw-collapsible-toggle, |
| + | .mw-content-ltr .mw-content-rtl li .mw-collapsible-toggle { |
| + | float: none; |
| + | } |
| + | |
| + | /* the added list item should have no list-style */ |
| + | .mw-collapsible-toggle-li { |
| + | list-style: none; |
| + | } |
| + | |
| + | #AcronymList{ |
| + | background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */ |
| + | background: #098280; /* For browsers that do not support gradients */ |
| + | background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */ |
| + | background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */ |
| + | background: linear-gradient(#098280, #E95F26); /* Standard syntax */ |
| + | max-width:85vw; |
| + | font-size:5vw; |
| + | text-align:center; |
| + | font-weight:bold; |
| + | min-height:130px; |
| + | } |
| + | #abc{ |
| + | width:85vw; |
| + | color:white; |
| + | font-size:5vw; |
| + | text-align:center; |
| + | text-shadow:2px 2px black; |
| + | font-weight:bold; |
| + | min-height:130px; |
| + | border-radius:0px; |
| + | } |
| + | *, |
| + | *:before, |
| + | *:after { |
| + | -webkit-box-sizing: border-box; |
| + | -moz-box-sizing: border-box; |
| + | box-sizing: border-box; |
| + | } |
| + | |
| + | .AcronymButton{ |
| + | background-color:transparent; |
| + | font-size:2.4vw; |
| + | width:12vw; |
| + | height:7.7vw; |
| + | padding:.5vw .5vw; |
| + | display: inline-block; |
| + | position: relative; |
| + | border: .2vw solid #FFF; |
| + | overflow: hidden; |
| + | text-decoration: none; |
| + | text-align:center; |
| + | outline: none; |
| + | color: #FFF; |
| + | font-family: 'raleway', sans-serif; |
| + | box-shadow: 1px 1px 1px gray; |
| + | } |
| + | .AcronymButton span { |
| + | -webkit-transition: 0.6s; |
| + | -moz-transition: 0.6s; |
| + | -o-transition: 0.6s; |
| + | transition: 0.6s; |
| + | -webkit-transition-delay: 0.2s; |
| + | -moz-transition-delay: 0.2s; |
| + | -o-transition-delay: 0.2s; |
| + | transition-delay: 0.2s; |
| + | } |
| + | |
| + | .AcronymButton:before, |
| + | .AcronymButton:after { |
| + | content: ''; |
| + | position: absolute; |
| + | top: 0.67em; |
| + | left: 0; |
| + | width: 100%; |
| + | text-align: center; |
| + | opacity: 0; |
| + | -webkit-transition: .4s,opacity .6s; |
| + | -moz-transition: .4s,opacity .6s; |
| + | -o-transition: .4s,opacity .6s; |
| + | transition: .4s,opacity .6s; |
| + | } |
| + | .AcronymButton:before { |
| + | content: attr(data-hover); |
| + | font-size:1vw; |
| + | -webkit-transform: translate(-150%,0); |
| + | -moz-transform: translate(-150%,0); |
| + | -ms-transform: translate(-150%,0); |
| + | -o-transform: translate(-150%,0); |
| + | transform: translate(-150%,0); |
| + | } |
| + | |
| + | /* :after */ |
| + | |
| + | .AcronymButton:after { |
| + | content: attr(data-active); |
| + | -webkit-transform: translate(150%,0); |
| + | -moz-transform: translate(150%,0); |
| + | -ms-transform: translate(150%,0); |
| + | -o-transform: translate(150%,0); |
| + | transform: translate(150%,0); |
| + | } |
| + | |
| + | /* Span on :hover and :active */ |
| + | |
| + | .AcronymButton:hover span, |
| + | .AcronymButton:active span { |
| + | font-size:1vw; |
| + | opacity: 0; |
| + | -webkit-transform: scale(0.3); |
| + | -moz-transform: scale(0.3); |
| + | -ms-transform: scale(0.3); |
| + | -o-transform: scale(0.3); |
| + | transform: scale(0.3); |
| + | } |
| + | |
| + | /* |
| + | We show :before pseudo-element on :hover |
| + | and :after pseudo-element on :active |
| + | */ |
| + | |
| + | .AcronymButton:hover:before, |
| + | .AcronymButton:active:after { |
| + | opacity: 1; |
| + | -webkit-transform: translate(0,0); |
| + | -moz-transform: translate(0,0); |
| + | -ms-transform: translate(0,0); |
| + | -o-transform: translate(0,0); |
| + | transform: translate(0,0); |
| + | -webkit-transition-delay: .4s; |
| + | -moz-transition-delay: .4s; |
| + | -o-transition-delay: .4s; |
| + | transition-delay: .4s; |
| + | } |
| + | |
| + | /* |
| + | We hide :before pseudo-element on :active |
| + | */ |
| + | |
| + | .AcronymButton:active:before { |
| + | -webkit-transform: translate(-150%,0); |
| + | -moz-transform: translate(-150%,0); |
| + | -ms-transform: translate(-150%,0); |
| + | -o-transform: translate(-150%,0); |
| + | transform: translate(-150%,0); |
| + | -webkit-transition-delay: 0s; |
| + | -moz-transition-delay: 0s; |
| + | -o-transition-delay: 0s; |
| + | transition-delay: 0s; |
| } | | } |