/*
===================================================================================================
// Zera as configurações padrões dos elementos html.
===================================================================================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

:focus {
    outline: 0px;
}

body {
    background: #fff url(images/background-body.jpg) repeat-x;
    font-size: 11px;
    font-family: verdana, arial, helvetica;
}



/*
===================================================================================================
// Container mestre do web site.
===================================================================================================
*/
#root {
    position: relative;
    float: left;
    width: 1000px;
    height: auto;
    margin-left: 50%;
    left: -500px;
}



/*
===================================================================================================
// Cabeçário
===================================================================================================
*/
#header {
    float: left;
    width: 1000px;
    height: 150px;
    background: url(images/header.jpg) no-repeat 0px 0px;
}


#header-toolbar-links {
    float: left;
    margin-top: 20px;
    margin-left: 870px;
}


#header-toolbar-links a {
    color: #002255;
    text-decoration: none;
}


#header-toolbar-links a span {
    float: left;
    margin-left: 10px;
    font-family: arial, verdana, helvetica;
}

#header-toolbar-links div {
    float: left;
    height: 12px;
    margin-left: 10px;
    border-left: 1px solid #002255;
}


#link-title {
    float: left;
    margin-left: 90px;
}

#link-title div {
    float: left;
    width: 460px;
    height: 90px;
    
}


#header form input[name="search-textfield"] {
    float: left;
    margin-top: 60px;
    margin-left: 130px;
    width: 220px;
    margin-right: 10px;
    border: 0px;
    background: transparent;
    color: #888;
    font-family: arial, verdana, helvetica;
    font-size: 16px;
    font-weight: bold;
}



#header form input[name=search-submit]{
    float: left;
    cursor: pointer;
    border: 0px;
    width: 84px;
    height: 25px;
    margin-top: 62px;
    margin-left: 4px;
    background: url(images/search-submit.jpg) no-repeat 0px 0px;
}


#menu-categories {
    float: left;
    width: auto;
    height: 45px;
    padding-left: 280px;
    background: url(images/menu-categories.jpg) no-repeat 0px 0px;

}


#menu-categories a {
    color: #fff;
    text-decoration: none;
}


#menu-categories a span {
    float: left;
    width: auto;
    height: 44px;
    line-height: 44px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: arial, verdana, helvetica;
    font-size: 12px;
    font-weight: bold;
}


#menu-categories a span:hover{
    background: #ff3c62;
}


#menu-favorite {
    float: left;
    width: 1000px;
    height: 55px;
    background: url(images/menu-favorite.jpg) no-repeat 0px 0px;
}


#icon-favorite {
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    margin-left: 880px;
    background: url(images/socialize.jpg) no-repeat -160px 0px;
}

#icon-favorite:hover {
    background: url(images/socialize.jpg) no-repeat -160px -32px;
}

#icon-twitter {
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    margin-left: 5px;
    background: url(images/socialize.jpg) no-repeat 0px 0px;
}


#icon-twitter:hover {
    background: url(images/socialize.jpg) no-repeat 0px -33px;
}


#icon-feeds {
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    margin-left: 5px;
    background: url(images/socialize.jpg) no-repeat -32px 0px;
}

#icon-feeds:hover {
    background: url(images/socialize.jpg) no-repeat -32px -33px;
}


#icon-technorati {
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    margin-left: 5px;
    background: url(images/socialize.jpg) no-repeat -128px 0px;
}

#icon-technorati:hover {
    background: url(images/socialize.jpg) no-repeat -128px -33px;
}


#icon-google {
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 10px;
    margin-left: 20px;
    background: url(images/socialize.jpg) no-repeat -96px 0px;
}

#icon-google:hover {
    background: url(images/socialize.jpg) no-repeat -96px -33px;
}


#sub-menu-favorite {
    float: left;
    width: 1000px;
    height: 12px;
    background: url(images/sub-menu-favorite.jpg) no-repeat;
}


/*
===================================================================================================
// Corpo
===================================================================================================
*/
#container {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}


/*
===================================================================================================
// Sidebar
===================================================================================================
*/
#sidebar {
    float: left;
    width: 190px;
    height: auto;
}


.sidebar-title-categories {
    float: left;
    width: 190px;
    height: 32px;
    background: url(images/categories-title.jpg) no-repeat;
    margin-bottom: 10px;
}


#sidebar dl {
    float: left;
    width: 100%;
    height: auto;
    margin-left: 20px;
}


#sidebar dl dd {   
    width: 100%;
    height: 21px;
}


#sidebar dl dd:hover{
    color: #fff;
    
}


#sidebar dl dd a {
    width: 100%;
    color: #666;
    text-decoration: none;
}


#sidebar dl dd a span {
    float: left;
    width: 127px;
    height: 21px;
    line-height: 21px;
    font-size: 12px;
    padding-left: 20px;
    font-family: arial, verdana, helvetica;    
}


#sidebar dl dd a span:hover {
    color: #fff;
    background: url(images/sidebar-hover.jpg) no-repeat;
}


/** Newsletter */

.sidebar-title-newsletter {
    float: left;
    width: 190px;
    height: 32px;
    margin-top: 20px;
    background: url(images/newsletter-title.jpg) no-repeat 10px 0px;
}


.sidebar-newsletter {
    float: left;
    margin-top: 5px;
    margin-left: 20px;
}


.sidebar-newsletter form {
    border:0px;
    padding:3px;
    text-align: center;
}

.sidebar-newsletter form input[type=text] {
    border: 1px solid #ccc;
}


.sidebar-newsletter form input[type=submit] {
    border: 1px solid #ccc;
    margin-top: 3px;
    color: #333;
    background: #f1f1f1;
}

.sidebar-newsletter form input[type=submit]:hover {
    cursor: pointer;
    background: #e5e5e5;
}


.sidebar-newsletter form p {
    margin: 0px;
    padding: 0px;
    color: #666;
}


.sidebar-banner-120x600 {
    float: left;
    margin-top: 20px;
    margin-left: 35px;
}




/*
===================================================================================================
// Conteúdo
===================================================================================================
*/
#content {
    float: left;
    width: 810px;
    height: auto;
    background: url(images/background-content.jpg) no-repeat 0px 0px;
}


#title-content {
    float: left;
}


#title-content h1 {
    height: 18px;
    line-height: 18px;
    color: #294368;
    padding-left: 20px;
    margin-left: 20px;
    font: bold 18px arial, verdana, helvetica;
    background: url(images/title-content.jpg) no-repeat 0px 2px;
}


#title-content p {
    width: 740px;
    color: #666;
    margin-top: 10px;
    margin-left: 45px;
    margin-bottom: 20px;
}


/*
===================================================================================================
// Descrição da postagem única
===================================================================================================
*/
#box-post-description {
    float: left;
    width: 720px;    
    margin: 10px;
    margin-left: 40px;
    padding: 10px;
}


#box-post-description p {   
    color: #666;
    margin: 0px;
}

#box-post-description b {
    color: #ff2512;
    margin: 0px;
}



/*
===================================================================================================
// Descrição da postagem única
===================================================================================================
*/
#box-post-how-to-play {
    float: left;
    width: 720px;
    margin: 10px;
    margin-left: 40px;
    padding: 5px;
    border: 1px solid #ccc;
}


#box-post-how-to-play p {
    color: #666;
    margin: 0px;
}

#box-post-how-to-play b {
    display: block;
    height: 16px;
    padding-left: 18px;
    color: #ff2512;
    margin: 0px;
    background: url(images/how-to-play.png) no-repeat;
}



/*
===================================================================================================
// Descrição da postagem única
===================================================================================================
*/
#box-post-toolbar {
    float: left;
    width: 720px;
    height: 32px;
    margin-left: 40px;
    padding: 5px;    
    background: url(images/post-toolbar.jpg) no-repeat;
}

#box-post-toolbar p {
    color: #666;
    margin: 0px;
    margin-top: 3px;
}

#box-post-toolbar a {
    text-decoration: none;

}


#box-post-toolbar a span#full-screen {
    position: relative;
    display: block;
    float: left;
    height: 16px;
    margin: 0px;
    padding-left: 20px;
    margin-left: 20px;
    color: #666;    
    background: url(images/full-screen.png) no-repeat;
}


#box-post-toolbar span#add-favorite {
    position: relative;
    display: block;
    float: right;
    height: 16px;
    margin: 0px;
    padding-left: 20px;
    margin-right: 20px;
    color: #666;    
    background: url(images/favorite.png) no-repeat;
}




/*
===================================================================================================
// Novos Jogos
===================================================================================================
*/
#block-new-games {
    float: left;
    width: 811px;
    margin-top: 10px;
}

#block-new-games-top {
    float: left;
    width: 100%;
    height: 39px;
    background: transparent url(images/new-games-top.jpg) no-repeat 0px 0px;
}


#block-new-games-body {
    float: left;
    width: 100%;   
    background: transparent url(images/new-games-body.jpg) repeat-y 0px 0px;
}


#block-new-games-footer {
    float: left;
    width: 100%;
    height: 20px;    
    background: transparent url(images/new-games-footer.jpg) repeat-y 0px 0px;
}


/*
===================================================================================================
// Blocos da página home
===================================================================================================
*/
.post {
    float: left;
    width: auto;
    color: #515151;
    border: 1px solid #ddd;
    padding: 10px;
    margin-left: 16px;
    background: #fff;
}

.post:hover {
    color: #fff;
    cursor: pointer;
    background: #ff5599;
    border: 1px solid #ca658d;
}

.post img {
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;
}


.post p {
    clear: left;
    float: left;
    display: table;
    width: 120px;
    height: 30px;
    margin-top: 5px;
    font-size: 11px;
    font-weight: bold;
    font-family: verdana, arial, helvetica;
}


/*
===================================================================================================
// Bloco dos Mais Jogados
===================================================================================================
*/
#block-most-played {
    float: left;
    width: 811px;
}

#block-most-played-top {
    float: left;
    width: 100%;
    height: 45px;
    background: transparent url(images/most-played-top.jpg) no-repeat 0px 0px;
}


#block-most-played-body {
    float: left;
    width: 460px;
}


#block-new-games-footer {
    float: left;
    width: 100%;
    height: 20px;
    background: transparent url(images/new-games-footer.jpg) repeat-y 0px 0px;
}


.most-played {
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 10px;
}



/*
===================================================================================================
// Bloco dos Mais Jogados
===================================================================================================
*/
#block-random-games {
    float: left;
    width: 811px;
}

#block-random-games-top {
    float: left;
    width: 100%;
    height: 43px;
    margin-top: 10px;
    background: transparent url(images/random-games-top.jpg) no-repeat 0px 0px;
}


#block-random-games-body {
    float: left;
    width: 100%;
    background: transparent url(images/random-games-body.jpg) repeat-y 0px 0px;
}


#block-random-games-footer {
    float: left;
    width: 100%;
    height: 20px;
    background: transparent url(images/random-games-footer.jpg) repeat-y 0px 0px;
}


.random-games {
    margin-top: 10px;
}



/*
===================================================================================================
// Bloco dos jogos das categorias
===================================================================================================
*/
#block-category-games {
    float: left;
    width: 811px;
}

#block-category-games-top {
    float: left;
    width: 100%;
    height: 43px;
    margin-top: 10px;
    background: transparent url(images/random-games-top.jpg) no-repeat 0px 0px;
}


#block-category-games-body {
    float: left;
    width: 100%;
    background: transparent url(images/random-games-body.jpg) repeat-y 0px 0px;
}


#block-category-games-footer {
    float: left;
    width: 100%;
    height: 20px;
    background: transparent url(images/random-games-footer.jpg) repeat-y 0px 0px;
}


.category-games {
    margin-top: 10px;
}


/*
===================================================================================================
// Rodapé
===================================================================================================
*/
#footer {
    float: left;
    width: 100%;
    height: 254px;
    background: url(images/background-footer.jpg) repeat-x 0px 0px;
}


#footer-body {
    position: relative;
    float: left;
    width: 1000px;
    height: 254px;
    margin-left: 50%;
    margin-top: 8px;
    left: -500px;    
}

#footer-logo {
    float: left;
    width: 260px;
    height: 61px;
    background: url(images/footer-logo.jpg) no-repeat 0px 0px;
}

#footer-search {
    float: right;
    width: 400px;
    height: 61px;
    background: url(images/footer-search.jpg) no-repeat 0px 0px;
}


#footer form input[name="search-textfield"] {
    float: left;
    margin-top: 27px;
    margin-left: 40px;
    width: 220px;
    margin-right: 10px;
    border: 0px;
    background: transparent;
    color: #888;
    font-family: arial, verdana, helvetica;
    font-size: 16px;
    font-weight: bold;
}



#footer form input[name=search-submit]{
    float: left;
    cursor: pointer;
    border: 0px;
    width: 84px;
    height: 25px;
    margin-top: 27px;
    margin-left: 5px;
    background: transparent;
}


/*
===================================================================================================
// Nuven de Tag para o rodapé do web site.
===================================================================================================
*/
#footer-tag-cloud {
    clear: left;
    float: left;
    margin-top: 20px;
    border-right: 1px solid #ccc;
}

#footer-tag-cloud h2 {
    height: 18px;    
    margin-left: 20px;
    padding-left: 22px;
    font: bold 14px arial , verdana, helvetica;
    background: url(images/footer-marquee.png) no-repeat 0px 0px;
}


#footer-tag-cloud div {
    width: 490px;
    margin-top: 5px;
    margin-left: 20px;
    padding-left: 22px;
    padding-right: 22px;    
}

#footer-tag-cloud div a:first-child {
    margin-left: 0px;
}


#footer-tag-cloud div a {
    color: #888;
    text-decoration: none;
    margin-left: 5px;
}

#footer-tag-cloud div a:hover {
    text-decoration: underline;
}


/*
===================================================================================================
// Área do jogo da postagem.
===================================================================================================
*/
#shockwave-flash-content {
    float: left;
    width: 100%;    
    margin-top: 20px;
    margin-bottom: 20px;
}


/*
===================================================================================================
// Formulário de Contato
===================================================================================================
*/
#contact {
    float: left;
    width: 100%;
    height: 450px;
    margin-left: 40px;
    margin-bottom: 50px;
    background: url(images/background-contact.png) no-repeat 470px 100px;
}


#contact form .label-contact{
    margin-top: 10px;
    color: #294368;
    font: bold 12px arial, verdana, helvetica;
}

#contact form .submit-contact{
    margin-top: 10px;
    width: 450px;
}


#contact form div input[type=text]{
    width: 450px;
    border: 1px solid #ccc;
    font: normal 12px arial, verdana, helvetica;
}

#contact form div textarea {
    width: 450px;
    height: 250px;
    border: 1px solid #ccc;
    font: normal 12px arial, verdana, helvetica;
}

#contact form div input[type=submit]{
    float: right;
}


#contact form div.captcha-obs {
    width: 450px;
    margin-top: 10px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    font: bold 11px arial, verdana, helvetica;
}

#contact form div.captcha-obs p{
    color: #294368;
    margin: 5px;
}

#contact form div #span-captcha {
    float: left;
    margin-top: 10px;
    font: bold 12px arial, verdana, helvetica;
}

#contact form div #text-captcha {
    width: 50px;
    margin-top: 10px;
    margin-left: 10px;
}

.contact-response {
    color: #666;
    margin-top: 10px;    
    font: normal 12px verdana, helvetica;

}

.contact-response a {
    color: #294368;
}


/*
===================================================================================================
// Paginador
===================================================================================================
*/
#paginator {
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

#paginator div a {
    color: #666;
}

#paginator div a div {
    float: left;
    width: 32px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

#paginator-selected {
    float: left;
    width: 32px;
    height: 30px;
    text-align: center;
    font: bold 12px arial, verdana, helvetica;
    background: url(images/button-paginator.jpg) no-repeat;
}



/*
===================================================================================================
// Propagandas do google adsense
===================================================================================================
*/
.google-adsense-768x90 {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 768px;
    height: 90px;
    margin-left: 42px;
}


.google-adsense-336x280 {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 336px;
    height: 280px;
    margin-top: 10px;
}


.google-adsense-600x15 {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 600px;
    height: 280px;
    margin-top: 10px;
    margin-left: 200px;
}

.google-adsense-margin-left {
    margin-left: 45px;
}


.google-adsense-clear {
    clear: left;
}


#banner-internal-336x70 {
    width: 336px;
    height: 70px;
    margin-top: 10px;
}


/*
===================================================================================================
// Página 404.
===================================================================================================
*/

#title-404{
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}


#title-404 h1 {    
    font-size: 20px;
    font-family: arial, verdana, helvetica;
    font-weight: bold;
}


#title-404 span {
    font-size: 12px;
    color: red;
}


#title-404 p {
    font-size: 12px;
    font-family: verdana, arial, helvetica;
    margin-top: 10px;
}


#body-404 {
    float: left;
    width: 100%;
    margin-top: 100px;
    text-align: center;
}


#body-404 img {
    float: left;
    margin-left: 280px;
}


#body-404 h2 {
    float: left;
    height: 128px;
    line-height: 128px;
    margin-left: 30px;
    font-size: 18px;
    font-family: arial, verdana, helvetica;
    font-weight: bold;
}


#body-404 p {
    clear: left;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 12px;
    font-family: verdana, arial, helvetica;    
}


#body-404 p a {
    color: #ff3c62;
    text-decoration: none;
}


#body-404 p a:hover {
    text-decoration: underline;
}