MediaWiki:Wikia.css

@import url('https://fonts.googleapis.com/css?family=Gentium+Basic'); @import url('https://fonts.googleapis.com/css?family=Nova+Slim'); @import url('https://fonts.googleapis.com/css?family=Saira+Extra+Condensed')

/* Fonts */ @font-face { font-family: 'Gentium Basic', serif; }

@font-face { font-family: 'Nova Slim', cursive; }

@font-face { font-family: 'Prism-Regular'; src: url('Prism-Regular.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; }

/* Template:Heading */ .MainPageHeading { color: #000000; font-family: "Saira Extra Condensed"; font-size: 20px; margin-top: 10px; margin-bottom: 25px; text-align: left; }

/* Template:TextBracket */ .TextInBracket { color:#800000; font-family: "Saira Extra Condensed"; font-size: 50px; margin-top: 10px; margin-bottom: 25px; text-shadow: 0px 1px 0px #000000; text-align: center; }

/* Heading Line no.1 */ .heading-1{ display: inline-block; padding: 0 15px; position: relative; text-align: center; } .heading-1:before, .heading-1:after { background: #800000; content: ""; display: block; height: 4px; position: absolute; top: 50%; width: 50%; } .heading-1:before { right: 100%; } .heading-1:after { left: 100%; } .container { overflow: hidden; text-align: center; }

/* Heading Line no.2*/ .with-line { position: relative; } .with-line span { background: #800000; } .with-line:after { position: absolute; left: 0; right: 0; content: ""; height: 1px; background: #666; top: 50%; z-index: -1; } /**************************/ /* Portable Infobox Style */ /**************************/

.portable-infobox { border: 1px solid #b22222; border-radius: 1px; border-color: #b22222; box-shadow: 0 0 5px #b22222; background-color: transparent; } .portable-infobox .pi-secondary-background { background-color: #800000; color: #ffffff; } .portable-infobox .pi-secondary-font { font-family: "Gentium Basic"; font-size: 10px; }

.portable-infobox .pi-title { font-family: "Nova Slim","cursive"; font-size: 22px; text-align: center; text-shadow: 1px 1px #000000; color: #ffffff; background-color: #800000; }

/**************************/ /* Navigation Spinner    */ /**************************/

margin: 0; padding: 0; -webkit-backface-visibility: hidden; } /*WRAPPER*/ .wrapper { position: relative; margin: 20px auto; width: 3670px; }

/*MAIN CIRCLE*/ .circle { position: relative; margin-top: 30px; margin-bottom: 20px; margin-left: 25px; width: 300px; height: 300px; border-radius: 50%; background: #093b62; box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu a { margin-right: -4px; padding: 10px 30px; width: 50px; color: #333; text-decoration: none; font: 15px/25px Helvetica, Arial, sans-serif; } .menu a:hover { background: #eee; }

/*LITTLE CIRCLES*/ .circle li { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: white; list-style: none; text-align: center; font: 20px/50px Helvetica, Arial, sans-serif; } .circle li:nth-child(1) { top: 15px; left: 125px; } .circle li:nth-child(2) { top: 125px; left: 235px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .circle li:nth-child(3) { top: 235px; left: 125px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .circle li:nth-child(4) { top: 125px; left: 15px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }

/*INNER CIRCLE*/ .wrapper:before { content: "DS"; text-align: center; font: 70px/135px Georgia, Times, serif; color: #efefef; position: absolute; top: 140px; left: 110px; z-index: 10; width: 130px; height: 130px; border-radius: 50%; background: #fff; -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3); box-shadow: 3px 3px 10px rgba(0,0,0,0.3); } .menu > .two:hover ~ .circle { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }

/*HOVER STATES*/ .menu > .one:hover ~ .circle { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .menu > .two:hover ~ .circle { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .menu > .three:hover ~ .circle { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .menu > .four:hover ~ .circle { -webkit-transform: rotate(-270deg); -moz-transform: rotate(-270deg); -ms-transform: rotate(-270deg); -o-transform: rotate(-270deg); transform: rotate(-270deg); }