/* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* General Demo Style */ body{ font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; background: #000; font-weight: 400; font-size: 15px; color: #aa3e03; overflow-y: scroll; overflow-x: hidden; } .ie7 body{ overflow:hidden; } a{ color: #333; text-decoration: none; } .container{ position: relative; text-align: center; } .clr{ clear: both; } .container > header{ padding: 30px 30px 10px 20px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: left; } .container > header h1{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); padding: 0px 0px 5px 0px; } .container > header h1 span{ } .container > header h2, p.info{ font-size: 16px; font-style: italic; color: #f8f8f8; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } /* Header Style */ .codrops-top{ font-family: Arial, sans-serif; line-height: 24px; font-size: 11px; width: 100%; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .codrops-top a:hover{ color: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: none; display: inline; } p.codrops-demos{ display: block; padding: 15px 0px; } p.codrops-demos a, p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ display: inline-block; border: 1px solid #6d0019; padding: 4px 10px 3px; font-size: 13px; line-height: 18px; margin: 2px 3px; font-weight: 800; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); box-shadow: 0px 1px 1px rgba(0,0,0,0.1); color:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #a90329; background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); } p.codrops-demos a:hover{ background: #6d0019; } p.codrops-demos a:active{ background: #6d0019; background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(56%,#8f0222), color-stop(100%,#a90329)); background: -webkit-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: -o-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: -ms-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.9); } p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ color: #A5727D; background: #6d0019; } /* Media Queries */ @media screen and (max-width: 767px) { .container > header{ text-align: center; } p.codrops-demos { position: relative; top: auto; left: auto; } } #wrapper { width: 900px; height: 650px; margin-left: auto; margin-right: auto; } #logo { width: 400px; height: 150px; position: absolute; background-image: url('../images/logo-1.gif'); } #body { width: 900px; height: 450px; position: absolute; margin-top: 150px; } a { color: #eee; } a:hover { color: white; } .nav-wrap { position: relative; border-top: 2px solid white; border: 3px solid #fff; border-bottom: 2px solid white; } #example-two { margin: 0 auto; list-style: none; position: relative; width: 900px; } #example-two li { display: inline-block; } #example-two li a { position: relative; z-index: 200; color: #ff0000; font-size: 16px; font-weight: bold; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; } #example-two li a:hover { color: #ffe400; text-decoration: underline; } .current_page_item_two a { color: #ffe400 !important; text-decoration: underline; } .ie6 #example-two li, .ie7 #example-two li { display: inline; } #left { width: 300px; height: 370px; position: absolute; } #top { width: 600px; height: 200px; position: absolute; margin-left: 300px; } div.sc_menu { /* Set it so we could calculate the offsetLeft */ position: relative; height: 180px; width: 575px; /* Add scroll-bars */ overflow: auto; } ul.sc_menu { display: block; height: 300px; /* Max width here, for users without Javascript */ width: 1500px; padding: 30px 0 0 15px; /* Remove default margin */ margin: 0; background: url('navigation.png'); list-style: none; } .sc_menu li { display: block; float: left; width: 130px; padding: 0 4px; list-style: none; } .sc_menu a { display: block; text-decoration: none; } .sc_menu span { /* We want a caption to display on the next line */ display: block; margin-top: 3px; text-align: center; font-size: 12px; color: #fff; } .sc_menu span { display: none; margin-top: 3px; text-align: center; font-size: 13px; font-weight: bold; color: #ff0000; } .sc_menu a:hover span { display: block; } .sc_menu img { border: 3px #fff solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .sc_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; } #down { width: 600px; height: 170px; position: absolute; margin-left: 300px; margin-top: 200px; } #number1 { width: 150px; height: 126px; border: 3px solid #fff; position: absolute; margin-left: 65px; margin-top: 20px; background-color: #000; border-color: #fff; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; } #number2 { width: 152px; height: 126px; border: 3px solid #fff; position: absolute; margin-left: 215px; margin-top: 20px; background-color: #000; border-color: #fff; } #number3 { width: 150px; height: 126px; border: 3px solid #fff; position: absolute; margin-left: 370px; margin-top: 20px; background-color: #000; border-color: #fff; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; } #footer { width: 900px; height: 40px; position: absolute; margin-top: 370px; } #facebook { width: 38px; height: 38px; position: absolute; margin-left: 700px; margin-top: 1px; background: url('../images/icontexto-inside-facebook.png') no-repeat; } #myspace { width: 38px; height: 38px; position: absolute; margin-left: 750px; margin-top: 1px; background: url('../images/997469403525395555 copy.png') no-repeat; } #twitter { width: 38px; height: 38px; position: absolute; margin-left: 800px; margin-top: 1px; background: url('../images/1160887324756617521 copy.png') no-repeat; } #par { font-weight: bold; font-size: 18px; color: #ffe400; position: absolute; margin-top: 7px; margin-left: 10px; }