/* resets */
html, body, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, li, form {
margin: 0;
padding: 0;
border: 0;
font-size: 100%
}
/*fonts*/
h1 {
background: #CE1127;
font: bold 40px/50px Economica, sans-serif;
margin: 0 0 20px;
padding: 10px 20px 4px 20px;
color:#FDF50E;
border-radius: 10px 10px 0 0;
}
h2, h3 {
background: #00407F;
font: normal 40px/40px Economica, sans-serif;
margin: 0 0 20px;
padding: 8px 20px;
color: #FFF;
border-radius: 10px 10px 0 0;
}
h2 {
background: none;
font-size: 30px;
color: #555;
padding: 10px 30px;
margin-bottom: 0
}
h3 {
background: none;
font-size: 28px;
color: #555;
padding: 10px 30px;
margin-bottom: 0
}
hr {
background: none;
border: none;
position: relative;
width: 95%;
border-bottom: 4px dashed #CCC;
margin: 20px auto;
display: block
}
.clear {
clear: both
}
.floatLeft {
float: left
}
.floatRight {
float: right
}
.imgL {
float: left;
padding: 0 10px 10px 0
}
.imgR {
float: right;
padding: 0 0 10px 30px
}
/*main*/
html {
background: url(/images/template/beach.jpg) #F6F4E7 top no-repeat;
background-attachment: fixed;
height: 100%
}
body {
background-attachment: fixed;
position: relative;
color: #FFF;
font-family: helvetica, arial, sans-serif
}
.centred {
display: block;
margin: auto;
text-align: center
}
/* header and footer */
#header {
background:#FDF50E;
width: 100%;
height: 90px;
position: fixed;
left:0;
top:0;
margin:0;
padding:0;
z-index: 2;
border-bottom:2px solid #003893
}
#headerInner, #main {
position: relative;
width: 1050px;
margin: auto
}
#headerLogo {
float: left;
margin:16px 20px 0 16px;
}
div#nav {
float:left;
display:block;
height: 48px;
position:relative;
top:26px;
width: 616px;
}
nav ul {
list-style:none
}
ul.headerMenu li {
float: left;
padding:0;
margin:0;
list-style-type: none;
}
.headerMenu .first {
display:block;
text-align:center
}
ul.headerMenu li.menuInner1, ul.headerMenu li.menuInner2, ul.headerMenu li.menuInner3, ul.headerMenu li.menuInner4 {
height: 44px;
width: 146px;
}
ul.headerMenu li.menuInner1 a, ul.headerMenu li.menuInner2 a, ul.headerMenu li.menuInner3 a, ul.headerMenu li.menuInner4 a {
width:142px;
position: relative;
margin: 2px auto;
padding: 0;
background-color: #CE1126;
font: bold 18px/40px Economica, sans-serif;
color:#FDF50E;
text-align: center;
text-decoration: none;
border-radius: 16px;
transition: all .1s linear;
}
ul.headerMenu li.menuInner1 a:hover, ul.headerMenu li.menuInner2 a:hover, ul.headerMenu li.menuInner3 a:hover , ul.headerMenu li.menuInner4 a:hover {
background: #EF1100 !important;
}
ul.headerMenu li.menuInner1 ul, ul.headerMenu li.menuInner2 ul, ul.headerMenu li.menuInner3 ul, ul.headerMenu li.menuInner4 ul {
width: 142px;
margin:0 auto 0 auto;
background: transparent;
position: absolute;
padding: 0;
visibility:hidden
}
ul.headerMenu li.menuInner1 ul li, ul.headerMenu li.menuInner2 ul li, ul.headerMenu li.menuInner3 ul li , ul.headerMenu li.menuInner4 ul li {
display:block;
width: 146px;
height: 36px;
margin:4px 0 0 0 ;
}
ul.headerMenu li.menuInner1:hover > ul, ul.headerMenu li.menuInner2:hover > ul, ul.headerMenu li.menuInner3:hover > ul, ul.headerMenu li.menuInner4:hover > ul {
visibility: visible;
z-index: 2;
background:#FDF50E;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
padding-bottom: 10px;
}
ul.headerMenu li.menuInner1 ul li a, ul.headerMenu li.menuInner2 ul li a, ul.headerMenu li.menuInner3 ul li a, ul.headerMenu li.menuInner4 ul li a {
display:block;
width: 120px;
height:28px;
margin:2px auto 4px auto;
padding:0 2px 2px 0;
color:#FDF50E !important;
font: bold 13px/28px Arial !important;
text-align: center !important;
text-transform: capitalize !important
}
#footer {
background: url(/images/template/footer-bg.png) transparent repeat;
position: relative;
width: 100%;
font: 12px/20px lucida grande, helvetica, arial, sans-serif;
text-align: center;
padding: 20px 0;
margin-top: 20px
}
#footerInner {
width: 1000px;
margin: auto;
padding: 20px 0
}
#footer a {
color: #FE0;
padding: 1px 3px;
border-radius: 20px;
transition: all .2s ease-in-out;
text-decoration: none
}
#footer a:hover {
color: #09F;
background: #FFF;
text-decoration: none
}
#footer hr {
width: 900px;
border: none;
background: transparent;
border-top: 1px dotted #77F;
margin: 20px auto
}
/* content */
.arrow {
background-image: url(/images/template/spritesheet.png);
background-repeat: no-repeat;
position: relative;
float: right;
width: 50px;
height: 50px;
overflow: hidden;
text-indent: -100px;
cursor: pointer;
top: 150px
}
.arrow.left {
background-position: 0 -230px
}
.arrow.right {
background-position: -60px -230px
}
.arrow.left:active {
background-position: -120px -230px
}
.arrow.right:active {
background-position: -180px -230px
}
/* lottery boxes */
#lotteryBoxes {
position: relative;
top:68px;
width: 520px;
height: 380px;
float: right;
padding: 0;
margin:20px 0 40px 0;
overflow: hidden
}
#lotteryBoxes .inner {
width: 2000px;
height: 335px;
position: relative;
overflow: hidden;
margin: 0 10px 0 0
}
.containerGroup {position: relative; transition: .2s left ease; left: 0;}
.lotteryContainer {
background-image: url(/images/template/lottery-boxes.jpg); background-repeat: no-repeat; position: relative;
width: 240px; height: 320px; box-shadow: #AAA 0 1px 0; float: left; margin: 10px; border-radius: 3px 30px 3px 3px; color: #FFF; left: 0;
}
.lotteryContainer.baloto {
background-position: -480px 0
}
.lotteryContainer.el-dorado {
background-position: -240px 0
}
.lotteryContainer.euro-millones {
background-position: 0 0
}
.lotteryContainer.mega-millones {
background-position: -480px 0
}
.lotteryContainer.melate {
background-position: -720px 0
}
.lotteryContainer.gordo-primitiva {
background-position: -480px 0
}
.loteriaContainer .lotteryTitle, .lotteryContainer .lotteryTitle {
padding: 10px 20px;
font:bold 20px/32px Economica, sans-serif;
color:#FDF50E
}
.resultados-slide-container {
height:28px; margin: 0 4px; padding:4px 0 8px 0 ; color:#444
}
.spanText {
position: relative;
display: block;
width: 82%;
text-align: left;
font: 13px/20px helvetica, arial, sans-serif;
margin:0 auto
}
.spanTextAlt {
position: relative;
display: block;
width: 100%;
text-align: center;
font: 13px/10px helvetica, arial, sans-serif
}
.lotteryContainer .resultadoss {
position: relative;
margin: auto;
overflow: hidden
}
.jackpot {
position: relative;
display: block;
width: 100%;
text-align: center;
font: 32px/30px impact, charcoal, sans-serif;
padding-bottom: 10px
}
.raffleCount {
position: relative;
float: left;
width: 60px;
font: 36px/30px impact, charcoal, sans-serif;
padding: 10px 0 0 20px;
color: #FD0
}
.spanTextRaffle {
position: relative;
font: 12px/16px helvetica, arial, sans-serif;
float: left;
width: 130px;
padding: 10px 20px 30px 0
}
.countdown {
background: url(/images/template/spritesheet.png) transparent 0 -100px no-repeat;
width: 178px;
height: 53px;
margin: 5px auto
}
.timeBox {
position: relative;
float: left;
width: 44px;
text-align: center;
color: #FFF;
font: 24px/40px helvetica, arial, sans-serif;
left: 1px
}
.btnResultados, .btnResultadosAlone{
background: url(/images/template/spritesheet.png) transparent no-repeat !important;
position: relative;
width: 92px;
height: 42px;
font: 18px/37px Economica, sans-serif;
color: #333 !important;
text-align: center;
text-decoration: none;
display: block;
text-shadow: #FFF 1px 1px 0;
margin: 9px 5px;
border-radius: 0 !important;
padding: 0 !important;
transition: none !important;
}
.btnResultados:hover, .btnResultadosAlone:hover {
background-position: 0 -50px !important
}
.playButton {
background: url(/images/template/spritesheet.png) transparent -100px 0 no-repeat !important;
position: relative;
width: 122px;
height: 42px;
font: 18px/37px Economica, sans-serif;
color: #333 !important;
text-align: center;
text-decoration: none;
display: block;
text-shadow: #FFF 1px 1px 0;
margin: 9px 5px;
border-radius: 0 !important;
padding: 0 !important;
transition: none !important;
}
.playButton:hover {
background-position: -100px -50px !important
}
.lotteryContainer .btnResultados {
position: absolute;
bottom: -4px;
left: 0
}
.lotteryContainer .btnResultadosAlone {
position: absolute;
bottom: -4px;
left: 76px
}
.lotteryContainer .playButton {
position: absolute;
bottom: -4px;
right: 0
}
.lotteryContainer ul {
list-style-type: none;
margin: 0;
padding: 10px 20px
}
.lotteryContainer li {
font-size: 12px;
padding: 0 0 6px;
line-height: 13px;
margin: 0
}
.loteriaContainer {
/*
background-image: url(/images/template/juega-loteria-bg.png);
background-repeat: no-repeat;
position: relative;
width: 240px;
height: 200px;
box-shadow: #AAA 0 1px 0;
float: left;
margin: 0 30px;
border-radius: 4px;
float: right;
color: #FFF;
*/
background-image: url(/images/template/lottery-boxes.jpg); background-repeat: no-repeat; position: relative; width: 240px; height: 200px; box-shadow: #AAA 0 1px 0; float: right; margin: 10px; border-radius: 3px 30px 3px 3px; color: #FFF
}
.loteriaContainer.megamillonesbox {background-position:-240px 0}
.loteriaContainer.powerball {background-position:-240px 0}
.quartBox {
float: left;
width: 49%;
margin: 20px 2px;
text-align: center
}
.quartDate {
font: 14px/20px helvetica, arial, sans-serif
}
/* ball styles */
.resultados-s {background-image: url(/images/template/balls-small.png); background-repeat: no-repeat; background-position: 0 -280px; position: relative; float: left; width: 31px; height: 31px; text-align: center; font: 16px/31px helvetica, arial, sans-serif; color: #555;}
.resultados-s.bonus-ball {background-position: 0 -80px; color: #FFF;}
.resultados-s.megamillones-small, .resultados-s.megamillones-ball, .resultados-s.euromillones-small, .resultados-s.euromillones-ball {background-position: 0 -200px; color: #174F88;}
.resultados-s.mega-ball, .resultados-s.megamillones-mega-ball, .resultados-s.powerplay, .resultados-s.euromillones-small.lucky-star, .resultados-s.euromillones-lucky-star {background-position: 0 -240px; color: #174F88;}
.resultados-s.megaplier, .resultados-s.megamillones-megaplier {background-position: 0 -160px; color: #FFF;}
.resultados-s.powerball-small {background-position: 0 -280px; color: #D34B4B;}
.resultados-s.powerball {background-position: 0 -320px; color: #FFF;}
.resultados-s.power-play {background-position: 0 -400px; color: #FFF;}
.resultados {background-image: url(/images/template/balls.png); background-repeat: no-repeat; position: relative; display: inline-block; *display: inline; zoom: 1; width: 60px; height: 60px; text-align: center; font: bold 24px/60px helvetica, arial; margin: auto;}
.resultados.powerball-ball {background-position: 0 0; color: #D34B4B;}
.resultados.powerball, .resultados.bonus-ball {background-position: 0 -70px; color: #FFF;}
.resultados.power-play {background-position: 0 -350px; color: #FFF;}
.resultados.megamillones-ball, .resultados.euromillones-ball.ball {background-position: 0 -140px; color: #174F88;}
.resultados.mega-ball, .resultados.powerplay, .resultados.euromillones-ball.lucky-star {background-position: 0 -210px; color: #174F88;}
.resultados.megaplier {background-position: 0 -490px; color: #FFF;}
.resultados.gordo-ball.bonus-ball {background-position: 0 -70px; color: #FFF;}
.resultados-latest {padding: 10px 30px;}
/* ball small */
.quartBox .resultados-s {
float: none !important;
display: inline-block;
*display: inline;
zoom: 1
}
/* content */
#content {
background: #FFF;
position: relative;
margin: 108px auto;
width: 1020px;
border-radius: 10px;
clear: both;
overflow: visible;
color: #555;
box-shadow: #989687 0 0 30px -10px;
padding-bottom: 20px
}
#content p {
padding: 0 30px 10px;
font: 15px/25px helvetica, arial, sans-serif
}
#content a {
color: #09F;
text-decoration: none;
transition: all .2s ease-in-out;
padding: 3px;
border-radius: 20px
}
.twoCol {
position: relative;
width: 46%;
margin: 10px 2%;
float: left
}
.social {
background-image: url(/images/template/spritesheet.png);
background-repeat: no-repeat;
position: fixed;
width: 59px;
height: 58px;
right: 0;
display: block;
box-shadow: #CCA 0 0 20px -5px;
border-radius: 30px 0 0 30px
}
.social.facebook {
background-position: 0 -160px;
top: 160px
}
.social.twitter {
background-position: -70px -160px;
top: 230px
}
.social.googlePlus {
background-position: -140px -160px;
top: 300px
}
table.styley {
position: relative;
border: 1px solid #CE1127;
border-radius: 8px;
border-spacing: 0;
margin: auto
}
table.styley th {
background-color: #CE1127;
text-align: left;
color: #FDF50E;
font: normal 20px/40px Economica, sans-serif;
padding: 5px 20px
}
table.styley th:first-child {
border-radius: 7px 0 0 0
}
table.styley th:last-child {
border-radius: 0 7px 0 0
}
table.styley td {
text-align: left;
padding: 15px 20px;
color: #555;
font-size: 14px
}
table.styley tr.alt {
background-color: #F4F4F4
}
.searchBox {
position: relative;
display: block;
background: none;
border: 2px solid #CCC;
border-radius: 8px;
padding: 10px;
outline: none;
width: 300px;
margin: auto;
float: left
}
.searchBox:focus {
border: 2px solid #FC0
}
.raffle {
background: #ffe67a;
/* Old browsers */
background: -moz-linear-gradient(top, #ffe67a 0%, #ffc023 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe67a), color-stop(100%,#ffc023));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffe67a 0%,#ffc023 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffe67a 0%,#ffc023 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffe67a 0%,#ffc023 100%);
/* IE10+ */
background: linear-gradient(to bottom, #ffe67a 0%,#ffc023 100%);
/* W3C */
position: relative;
border-radius: 7px;
margin: 5px;
display: block;
float: left;
color: #333;
font: bold 16px/30px helvetica, arial, sans-serif;
height: 30px;
text-shadow: #FFF 0 1px 0;
padding: 0;
border-bottom: 4px solid #F90;
box-shadow: inset #FD0 0 -1px 0, #555 0 3px 2px -3px;
width: 180px;
text-align: center;
}
#error {
display: none;
font-family: Economica, sans-serif;
font-size: 25px
}
/* Rasca y gana page */
.contentPub {
width:900px;
margin:8px auto;
height:210px
}
.scratch-link {
float:left; width:200px; height:200px; margin:0 0 0 16px
}
.scratch-link a {
display:block; width:200px; margin: 0 auto; text-align:center
}
.scratch-link a.lotto-table-play-es:hover {
background:#FBAA00
}
.centered {text-align:center;}
.bidvertiser{display:inline-block;}