/**
 * Copyright (c) 2014 Oracle and/or its affiliates. All rights reserved.
 *
 * You may not modify, use, reproduce, or distribute this software except in
 * compliance with  the terms of the License at:
 * http://java.net/projects/javaeetutorial/pages/BerkeleyLicense
 */

* {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #ffffff;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

body {
    background: url("/javax.faces.resource/pozadie.jpg.xhtml?ln=images") no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h2 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 20px;
}

@media screen and (max-width: 1050px) {
    h1    {
        font-size: 45px !important;
    }
    h2    {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }
    #logo {
        width: 100px !important;
        height: 100px !important;
    }

    #title {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .divider {
        margin-top: 35px !important;
    }

    #content {
        padding-top: 25px !important;
    }
}

@media screen and (max-width: 460px) {
    h1    {
        font-size: 32px !important;
    }
    h2    {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    #logo {
        width: 100px !important;
        height: 100px !important;
    }

    #title {
        padding-top: 12px !important;
        padding-bottom: 5px !important;
    }

    .divider {
        margin-top: 25px !important;
    }

    #content {
        padding-top: 25px !important;
    }

    .gameTile {
        background-size: 150px 100px !important;
        width: 150px !important;
        height: 100px !important;
        margin-left: 0px;
        margin-top: 16px;
    }
}

@media screen and (max-width: 360px) {
    #content {
        margin: 0 0 !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
        padding-bottom: 16px !important;
    }
}

#content {
    min-width: 212px;
    margin: 0 8%;
    margin-top: 10px;
    display: block;
    background: rgba(0, 0, 0, .3);
    width: auto;
    padding-top: 40px;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 20px;
    text-align: center;
}

.divider {
    margin: 50px auto 0;
    border-top: solid snow thin;
    width: auto;
    display: block;
}

/*HEADER*/
.svg {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: left;
    background-color: #FFF;
    border-radius: 50%;
}

#svg {
    width: 54%;
    display: inline-block;
    padding-top: 19%;
    padding-left: 21%;
}

#logo {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

#title {
    display: block;
    vertical-align: top;
    padding-top: 35px;
    padding-bottom: 35px;
}

h1 {
    font-size: 70px;
    text-align: center;
    margin: 0;
}

/*CREDITS*/
#credits {
    margin-top: 30px;
    display: block;
}

#power {
    display: inline-block;
    vertical-align: middle;
}

#kpi-logo {
    vertical-align: middle;
    background-image: url("/javax.faces.resource/logo-kpi.png.xhtml?ln=images");
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.author {
    font-size: 13px;
    display: block;
}


/*BUTTONS*/
.buttons {
    color: snow;
    background: none;
    text-shadow: none;
    box-shadow: none;
    border: 1px solid snow !important;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    width: 170px;
    margin-left: 10px !important;
}

.ui-icon {
    overflow: visible !important;
}

.ui-button {
    margin-right: 10px !important;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.ui-button:hover{
    outline: none;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.ui-state-focus {
    outline: none;
}

.ui-state-default, .ui-widget-content, .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
    text-shadow: none;
    box-shadow: none;
    border: 1px solid snow;
}

.ui-corner-all {
    border: none;
    border-radius: 0;
}

/*LOGGED USER*/
.loggedUserLabel {
    font-size: 18px;
    font-weight: 300;
    color: white;
}

.loggedUserName {
    font-size: 22px;
    color: white;
}

.loggedUserPanel {
    margin: 0 auto;
    text-align: center;
}

/*GAMES*/
.games{
    margin-top: 20px;
    text-align: center;
}

.gameTile {
    text-align: center;
    display: inline-block;
    background-size: 240px 160px;
    width: 240px;
    height: 160px;
    border: solid snow thin;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}

#bejeweled-hudacek   { background-image: url("/javax.faces.resource/_screens/bejeweled-hudacek.png.xhtml?ln=images"); }
#bejeweled-mesarc    { background-image: url("/javax.faces.resource/_screens/bejeweled-mesarc.png.xhtml?ln=images"); }
#bricks-cervenak     { background-image: url("/javax.faces.resource/_screens/bricks-cervenak.png.xhtml?ln=images"); }
#bricks-parackova    { background-image: url("/javax.faces.resource/_screens/bricks-parackova.png.xhtml?ln=images"); }
#colorsudoku         { background-image: url("/javax.faces.resource/_screens/colorsudoku.png.xhtml?ln=images"); }
#connectfour-ferko   { background-image: url("/javax.faces.resource/_screens/connectfour-ferko.png.xhtml?ln=images"); }
#connectfour-palsa   { background-image: url("/javax.faces.resource/_screens/connectfour-palsa.png.xhtml?ln=images"); }
#cuberoll            { background-image: url("/javax.faces.resource/_screens/cuberoll.png.xhtml?ln=images"); }
#greaterthansudoku-koscova { background-image: url("/javax.faces.resource/_screens/greaterthansudoku-koscova.png.xhtml?ln=images"); }
#greaterthansudoku-vasil   { background-image: url("/javax.faces.resource/_screens/greaterthansudoku-vasil.png.xhtml?ln=images"); }
#hangman-corba       { background-image: url("/javax.faces.resource/_screens/hangman-corba.png.xhtml?ln=images"); }
#hangman-horvath     { background-image: url(""); }
#jigsawsudoku        { background-image: url("/javax.faces.resource/_screens/jigsawsudoku.png.xhtml?ln=images"); }
#karty               { background-image: url("/javax.faces.resource/_screens/karty.png.xhtml?ln=images"); }
#logicalmazes-bujnak { background-image: url("/javax.faces.resource/_screens/logicalmazes-bujnak.png.xhtml?ln=images"); }
#logicalmazes-karpiel{ background-image: url("/javax.faces.resource/_screens/logicalmazes-karpiel.png.xhtml?ln=images"); }
#maze-hudak          { background-image: url("/javax.faces.resource/_screens/maze-hudak.png.xhtml?ln=images"); }
#maze-puzzle         { background-image: url("/javax.faces.resource/_screens/maze-puzzle.png.xhtml?ln=images"); }
#mazerace            { background-image: url("/javax.faces.resource/_screens/mazerace.png.xhtml?ln=images"); }
#mines               { background-image: url("/javax.faces.resource/_screens/mines.png.xhtml?ln=images"); }
#numberlink          { background-image: url("/javax.faces.resource/_screens/numberlink.png.xhtml?ln=images"); }
#pexeso-cisarova     { background-image: url("/javax.faces.resource/_screens/pexeso-cisarova.png.xhtml?ln=images"); }
#pexeso-cupaskova    { background-image: url("/javax.faces.resource/_screens/pexeso-cupaskova.png.xhtml?ln=images"); }
#pexeso-harbist      { background-image: url("/javax.faces.resource/_screens/pexeso-harbist.png.xhtml?ln=images"); }
#pipes-kunc          { background-image: url("/javax.faces.resource/_screens/pipes-kunc.png.xhtml?ln=images"); }
#pipes-tkac          { background-image: url("/javax.faces.resource/_screens/pipes-tkac.png.xhtml?ln=images"); }
#pipes-ujhazy        { background-image: url("/javax.faces.resource/_screens/pipes-ujhazy.png.xhtml?ln=images"); }
#reversi             { background-image: url("/javax.faces.resource/_screens/reversi.png.xhtml?ln=images"); }
#slidingpuzzle-jakub { background-image: url("/javax.faces.resource/_screens/slidingpuzzle-jakub.png.xhtml?ln=images"); }
#slidingpuzzle-secka { background-image: url("/javax.faces.resource/_screens/slidingpuzzle-secka.png.xhtml?ln=images"); }
#slidingpuzzle-slivka{ background-image: url("/javax.faces.resource/_screens/slidingpuzzle-slivka.png.xhtml?ln=images"); }
#sudoku              { background-image: url("/javax.faces.resource/_screens/sudoku.png.xhtml?ln=images"); }
#taptiles            { background-image: url("/javax.faces.resource/_screens/taptiles.png.xhtml?ln=images"); }
#tesserae-ciberaj    { background-image: url("/javax.faces.resource/_screens/tesserae-ciberaj.png.xhtml?ln=images"); }
#thebook             { background-image: url("/javax.faces.resource/_screens/thebook.png.xhtml?ln=images"); }


/*DIALOG*/
.dialog .ui-dialog-content {
    color: black !important;
    background: white !important;
    padding: 0 20px 20px 23px !important;
}

.dialog .ui-dialog-title {
    font-size: 25px;
    color: black;
}

.dialog {
    margin-right: auto;
    margin-left: auto;
    position: relative !important;
    top: -250px !important;
    width: 360px !important;
}

.ui-widget-header {
    background: white
}

.dialog .ui-dialog-titlebar {
    padding-left: 30px !important;
    padding-top: 20px !important;
    padding-right: 20px !important;
}

.dialog .ui-dialog-titlebar-close.ui-state-hover {
    border-radius: 0;
    background: none;
    outline: none;
    border: none;
    box-shadow: none;
    color: black;
}

.ui-dialog-content .ui-state-default, .ui-dialog-content .ui-state-hover {
    background: none;
    text-shadow: none;
    box-shadow: none;
    border: 1px solid black;
    outline: none;
}

.label {
    color: black;
}

.input:focus, .input:hover {
    -webkit-box-shadow: inset 0 1px 2px #8f8f8f !important;
    -moz-box-shadow: inset 0 1px 2px #8f8f8f !important;;
    box-shadow: inset 0 1px 2px #8f8f8f !important;;
}

.input {
    display: block;
    margin-right: 20px;
    font-size: 16px;
}

/*BLACKBUTTONS*/
.blackButtons{
    border-radius: 0;
}

.blackButtons .ui-button-text {
    color: black;
}

.blackButtons .ui-icon {
    color: black;
}

/*GROWL*/
.ui-growl-item-container {
    background: white !important;
}

.ui-growl-item-container .ui-state-highlight .ui-helper-hidden .ui-shadow {
    background: white !important;
}

.ui-shadow {
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5) !important;;
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5) !important;;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5) !important;
}

.ui-growl-title {
    color: black;
    font-weight: 300 !important;
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    text-shadow: none;
}

.ui-growl-message p {
    font-size: 0;
}

.ui-state-highlight .ui-icon {
    background: url("/javax.faces.resource/ui-icons-remake.png.xhtml?ln=images");
}

.ui-growl-image {
    background-image: url("/javax.faces.resource/messages.png.xhtml?ln=images") !important;
}

.favouriteTable {
    margin-left: auto;
    margin-right: auto;
    width: 80% !important;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.4em;
}