/*//--> Main Stylesheet <--//*/ /*/ BODY /*/ body{ margin:0px; padding:0px; font-family:Helvetica,Tahoma,Arial,sans-serif; background-color:#F8F8F8; color:#333;height:100%; background-image: url('../images/wallpaper/ponyville_day.png'); background-position: top, left; background-size:cover; background-attachment: fixed; background-repeat:no-repeat; } img{ border-style: none; } h1,h2,h3,h4,h5{ margin-top:0px; padding-top:0px; text-shadow:1px 1px 4px #DDD; } .night{ background-image: url('../images/wallpaper/ponyville_night.png'); } /*/ SELECTION COLOR /*/ ::-moz-selection { background-color: #FFBAD2; color: #FFF; } ::selection { background-color: #FFBAD2; color: #FFF; } /*/ CUSTOM SCROLLBAR /*/ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: rgba(122,228,255,0.4); } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,204,255,0.5); background: rgba(0,204,255,0.4); } ::-webkit-scrollbar-corner{ background: rgba(0,204,255,0.4); } /* FONT */ @font-face{ font-family: Equestria; src: url('CelestiaMediumRedux.ttf'); } /*/ LINKS/TEXT /*/ .link{ text-decoration:none; color:#3177CE; cursor:pointer; } #question{ color:red; cursor:help; } .gobutton{ color: #FFF; padding: 2px; position: relative; top: -3px; border-radius: 0px 0px 5px 5px; background-color: #1a82f7; background-repeat: repeat-x; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#009CF3)); background: -webkit-linear-gradient(top, #009CF3, #1a82f7); background: -moz-linear-gradient(top, #009CF3, #1a82f7); background: -ms-linear-gradient(top, #009CF3, #1a82f7); background: -o-linear-gradient(top, #009CF3, #1a82f7); -webkit-transition: padding linear 0.1s,color linear 0.1s; -moz-transition: padding linear 0.1s,color linear 0.1s; -ms-transition: padding linear 0.1s,color linear 0.1s; -o-transition: padding linear 0.1s,color linear 0.1s; transition: padding linear 0.1s,color linear 0.1s; } .gobutton:hover{ padding-bottom: 5px; color: rgb(80, 255, 192); } .gobutton_red{ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff0000), to(#cc0000)); background: -webkit-linear-gradient(top, #cc0000, #ff0000); background: -moz-linear-gradient(top, #cc0000, #ff0000); background: -ms-linear-gradient(top, #cc0000, #ff0000); background: -o-linear-gradient(top, #cc0000, #ff0000); } .gobutton_black{ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#505050), to(#0C0C0C)); background: -webkit-linear-gradient(top, #0C0C0C, #505050); background: -moz-linear-gradient(top, #0C0C0C, #505050); background: -ms-linear-gradient(top, #0C0C0C, #505050); background: -o-linear-gradient(top, #0C0C0C, #505050); } .mlpepisode{ font-family: Equestria; color:rgb(238, 61, 150); font-size:20px; -webkit-transition: padding linear 0.1s,color linear 0.1s; -moz-transition:padding linear 0.1s,color linear 0.1s; -ms-transition:padding linear 0.1s,color linear 0.1s; -o-transition:padding linear 0.1s,color linear 0.1s; transition:padding linear 0.1s,color linear 0.1s; } .mlpepisode_new{ color:rgb(50, 72, 235); font-size:20px; cursor:not-allowed; } .mlpepisode_new:hover{ color:rgb(36, 53, 187) !important; } .mlpepisode:hover{ color:rgb(218, 33, 126); padding:2px; } .link:hover{ text-decoration:underline; } .butto,button,input[type=submit]{ display:inline-block; background-color:#F4F4F4; min-width:55px; height:25px; line-height:25px; font-weight:bold; font-size:12px; padding:0px 10px 0px 10px; text-align:center; border-radius:5px; margin-top:5px; color:#333; border:1px solid silver; -webkit-transition:border linear 0.1s,box-shadow linear 0.1s; -moz-transition:border linear 0.1s,box-shadow linear 0.1s; -ms-transition:border linear 0.1s,box-shadow linear 0.1s; -o-transition:border linear 0.1s,box-shadow linear 0.1s; transition:border linear 0.1s,box-shadow linear 0.1s; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; font-family:'Droid Sans',"Helvetica Neue",Helvetica,Arial,sans-serif; background:linear-gradient(to bottom,rgb(255, 255, 255) 0%,rgb(238, 238, 238) 100%); } a .butto{ color: #333; } .butto:hover,input[type=submit]:hover,button:hover{ cursor:pointer; color:#111; text-decoration:none; background-color:#F6F6F6; border:1px solid gray; box-shadow:0 1px 3px rgba(0,0,0,0.1); } .butto:active,input[type=submit]:active,button:active{ -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); } .butto:disabled{ background-color:#E0E0E0; color:#777; } input,textarea{ -webkit-transition:border linear 0.1s,box-shadow linear 0.1s; -moz-transition:border linear 0.1s,box-shadow linear 0.1s; -ms-transition:border linear 0.1s,box-shadow linear 0.1s; -o-transition:border linear 0.1s,box-shadow linear 0.1s; transition:border linear 0.1s,box-shadow linear 0.1s; -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); padding:5px; border-radius:2px; border:1px solid rgb(235, 235, 235); font-family:'Droid Sans',"Helvetica Neue",Helvetica,Arial,sans-serif; } input:focus,textarea:focus{ outline:0; border-color:rgba(82,168,236,0.8); -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); } label{ width:200px; display:inline-block; vertical-align:top; text-align:left; } .error{ color:#ff0000 } .med{ font-size:20px; } .mlptext{ font-family: Equestria; } a{ text-decoration:none; color:#225985; } a:hover{ color:rgb(238, 61, 150); } .adoverhead{ border: 1px solid #1eb9ff; padding: 10px; background-color: #75d4ff; font-family: Equestria; } .mlpcolor{ color:rgb(238, 61, 150); } .title{ margin-left:20px; } .btn:hover, .btn:active { border-color: #bbb; background-color: #f8f8f8; background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#d9d9d9)); background-image: -moz-linear-gradient(top,#f8f8f8,#d9d9d9); background-image: -o-linear-gradient(top,#f8f8f8,#d9d9d9); background-image: -ms-linear-gradient(top,#f8f8f8,#d9d9d9); background-image: linear-gradient(top,#f8f8f8,#d9d9d9); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn{ position: relative; background-color: #f8f8f8; background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#dedede)); background-image: -moz-linear-gradient(top,#fff,#dedede); background-image: -o-linear-gradient(top,#fff,#dedede); background-image: -ms-linear-gradient(top,#fff,#dedede); background-image: linear-gradient(top,#fff,#dedede); border: #ccc solid 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #333; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.5); -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; height: 18px; max-width: 98%; overflow: hidden; font-size: 3.50mm; } /*/ CONTAINERS /*/ .content { width: 970px; margin-left: auto; margin-right: auto; padding: 15px; height: auto; min-height:700px; margin: auto; background-color: rgba(81, 220, 255, 0.82); -webkit-box-shadow: 0 5px 20px #333; -moz-box-shadow: 0 5px 20px #333; box-shadow: 0 5px 20px #333; z-index:5; } .head{ width: 970px; margin-left: auto; margin-right: auto; padding: 15px; height: auto; margin-bottom:19px; } header { display: block; text-align: center; } footer{ width: 970px; margin-left: auto; margin-right: auto; padding: 15px; height: auto; background-color: rgba(81, 220, 255, 0.82); -webkit-box-shadow: 0 5px 20px #333; -moz-box-shadow: 0 5px 20px #333; box-shadow: 0 5px 20px #333; margin:auto; margin-top:5px; margin-bottom:5px; text-align:center; } /*/ OTHER OBJECTS /*/ #social { position: fixed; bottom: 0; left: 0; background-color: rgba(0, 188, 212, 0.31); padding-top: 3px; padding-left: 10px; padding-right: 10px; padding-bottom: 2px; border-top: 2px solid #0076AB; border-right: 2px solid #008CCC; max-height: 40px; max-width: 500px; } #back-top { position: fixed; bottom: 30px; right: 30px; margin-left: 0px; text-decoration: none; text-align: center; font-size: 18px; display: block; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; cursor: pointer; width:40px; height:40px; } #rmenu.hide { display: none; } #rmenu { display: block; position: absolute; list-style: outside none none; margin: 0px; padding: 0px; background-color: #FFF; border: 1px solid #C9CCCF; color: #783300; font-size: 25px; border-radius: 10px 10px 0 0; text-align: center; } #rmenu li:first-child{ border-bottom: 1px solid #C9CCCF; } #rmenu li { padding: 0 10px; } /*/ SEASON COUNTDOWN CLOCK /*/ #cdcontainer{ text-align: center; } .countdown_section{ font-family: Equestria; color:rgb(238, 61, 150); font-weight: bold; font-size: 20px; margin: 0 5px; } .countdown_section_number{ font-family: Equestria; font-size: 30px; } .countdown_textsection{ color:rgb(238, 61, 150); font-family: Equestria; font-size: 25px; } /*/ SLIDE.JS /*/ #slides { display: none; } #slides .slidesjs-navigation { margin-top:5px; } .slidesjs-control, .slidesjs-container{ height: 100px !important; width: 700px !important; } a.slidesjs-next, a.slidesjs-previous, a.slidesjs-play, a.slidesjs-stop { background-image: url(../images/btns-next-prev.png); background-repeat: no-repeat; display:block; width:12px; height:18px; overflow: hidden; text-indent: -9999px; float: left; margin-right:5px; } a.slidesjs-next { margin-right:10px; background-position: -12px 0; } a:hover.slidesjs-next { background-position: -12px -18px; } a.slidesjs-previous { background-position: 0 0; } a:hover.slidesjs-previous { background-position: 0 -18px; } a.slidesjs-play { width:15px; background-position: -25px 0; } a:hover.slidesjs-play { background-position: -25px -18px; } a.slidesjs-stop { width:18px; background-position: -41px 0; } a:hover.slidesjs-stop { background-position: -41px -18px; } .slidesjs-pagination { margin: 7px 0 0; float: right; list-style: none; } .slidesjs-pagination li { float: left; margin: 0 1px; } .slidesjs-pagination li a { display: block; width: 13px; height: 0; padding-top: 13px; background-image: url(/images/pagination.png); background-position: 0 0; float: left; overflow: hidden; } .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px; } .slidesjs-pagination li a:hover { background-position: 0 -26px; } #slides a:link, #slides a:visited { color: #333; } #slides a:hover, #slides a:active { color: #9e2020; } .navbar { overflow: hidden; } .container { margin: 0 auto; } /*/ NAVIGATION BAR /*/ .navigation{ width: 970px; margin-left: auto; margin-right: auto; height: 40px; text-align: center; margin-bottom: 5px; z-index:5; } .navigation ul{ display: inline-block; list-style-type: none; padding: initial; } .navigation ul li{ display: inline-block; } .navigation ul li a{ padding: 5px; background-color: rgba(81, 220, 255, 0.82); border-bottom: 3px solid red; border-radius: 5px 5px 0 0; margin: 0 4px 0 4px; font-family: Equestria; color: rgb(0, 41, 255); } .navigation ul li a:hover, .navigation ul li .active{ color: rgb(36, 0, 223); background-color: rgba(0, 204, 255, 0.82); } /*/ SEARCH BAR /*/ .searchelement{ width: 200px; height: auto; position: absolute; } .searchelement input{ width: 200px; border-bottom: none; } .searchelement .results{ width: 210px; display: block; margin: 0; list-style: none; max-height: 200px; overflow: auto; border: 1px solid #EBEBEB; padding: 0; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .searchelement .results li:nth-child(even) {background: #CCC} .searchelement .results li:nth-child(odd) {background: #FFF} .searchelement .results li{ padding: 5px; } /*/ New popup /*/ .vidplayerpopup { position: fixed; background-color: rgba(0, 0, 0, 0.45); z-index: 9001; top: 0; bottom: 0; left: 0; right: 0; } .vidplayerpopup .inner-cont { width: 940px; height: 560px; margin: auto; margin-top: 100px; position: relative; background-color: #EAEAEA; padding: 5px; } .inner-cont .video{ width: 100%; height: 96%; background-color: black; } .episodetitle { font-size: 40px; width: 100%; display: block; position: absolute; top: -55px; color: #fff; } .vidclose { position: absolute; height: 50px; width: 50px; top: -30px; right: -18px; font-size: 24px; color: red; cursor: pointer; } .controlButton { padding: 5px; color: #fff; background-color: green; margin: 0; cursor: pointer; } .controlButton:hover{ background-color: #006D00; } .epSwitch { height: 40px; display: inline-block; padding: 5px 12px; line-height: 1.4; } .epSwitch span { font-size: 30px; } .share { width: 40px; height: 40px; display: inline-block; line-height: 3.3; } .share.sFacebook, .share.sTwitter { background-color: #2196F3; } .share.sFacebook:hover, .share.sTwitter:hover { background-color: #0081E8; } .share.sClipboard { background-color: #00BCD4; } .share.sClipboard:hover { background-color: #009FB3; } .share.sBugReport { background-color: #ff0000; } .share.sBugReport:hover { background-color: #ff1818; color: #fff; } .controls { position: absolute; width: 940px; bottom: -30px; } .share_buttons { display: inline-block; float: left; } .episode_buttons { display: inline-block; float: right; } /*/--> Written by: LunaSquee(Evert) http://mlp-episodes.tk/css/style.css <--/*/