body{
    background-color: #fbf9ed;
}

.content{
    position: absolute;
    /*min-width: 1200px;
    min-height: 788px;*/
    width: 100%;
    height: 100%;
    overflow:hidden;
}


/* TOP MENU ITEMS */

.main-menu{
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    margin-left: auto;
    margin-right: auto;
}

.amira-logo{
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../img/amira-logo.png');
    width: 231px;
    height: 91px;
}

.amira-logo-clean{
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../img/amira-logo-clean.png');
    width: 231px;
    height: 91px;
}

.sun{
    position: absolute;
    top: -275px;
    right: -225px;
    background-image: url('../img/sun.png');
    width: 450px;
    height: 450px;
}

.buttons-container{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 88px;
}

.buttons{
    margin-right: auto;
    margin-left: auto;
    width: 722px;
    height:88px;
}


.main-menu-button{
    background-repeat: no-repeat;
    float: left;
    margin-right: 9px;
    cursor: pointer;
    position: relative;
    top:-20px;
}

.main-menu-button:hover, .main-menu-button.active{
    top:10px;
}

.books-button{
    background-image: url('../img/menu-books.png');
    width:174px;
    height: 100px;
}

.games-button{
    background-image: url('../img/menu-games.png');
    width:171px;
    height: 98px;
}

.audiobooks-button{
    background-image: url('../img/menu-audiobooks.png');
    width:152px;
    height: 108px;
}

.shop-button{
    background-image: url('../img/menu-shop-blank.png');
    width:174px;
    height: 100px;
}

/*.reviews-button{
    background-image: url('../img/menu-reviews.png');
    width:187px;
    height: 108px;
}*/

.parents-button{
    background-image: url('../img/menu-parents.png');
    width:187px;
    height: 108px;
}






/* THE SEROUS FOOTER */

.bottom-menu{
    height: 22px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    z-index:80;
}

.bottom-menu > a {
    position: relative;
    top:2px;
    margin: 0 10px;
    color:#999;
    font-weight: bold;
    font-size: 1.2em;

}

.bottom-menu a:hover{
    color:black;
}

.bottom-menu-button.active{
    color:black;
    text-decoration: underline;
}





/* ITEMS MENU */

.items-menu{
    width: 100%;
    height: 234px;
    position: absolute;
    top:35%;
    margin-top: -117px;
}

.items-menu-background-left{
    position: absolute;
    top: 0;
    left: 0;
    height: 234px;
    width: 257px;
}

.items-menu-background-center-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 257px;
}

.items-menu-background-center{
    margin-left: 255px;
    margin-right: 360px;
    background-repeat: repeat-x;
    height: 234px;
}

.items-menu-background-right{
    position: absolute;
    top: 0;
    right: 0;
    height: 234px;
    width: 364px;
}

.items-foreground{
    position: absolute;
    top:0;
    width: 100%;
    height: 234px;
}

.items-scroll-button{
    background-image: url('../img/hand-button-blob.png');
    background-repeat: no-repeat;
    width: 163px;
    height: 82px;
    position: relative;
    z-index: 15;
    top:50%;
    margin-top: -41px;
}

.button-back{
    float: left;
    margin-left: 30px;
}

.button-forward{
    float: right;
    margin-right: 30px;
}


.hand{
    background-position: 50% 55%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.hand-left{
    background-image: url('../img/hand-left.png');
}
.hand-right{
    background-image: url('../img/hand-right.png');
}

.hand-right:hover{
    background-position: 60% 60%;
}

.hand-left:hover{
    background-position: 40% 60%;
}

.items-container{
    position: absolute;
    z-index: 10;
    width: 100%;
    height:100%;
}

.items{
    height: 200px;
    margin-top: -100px;
    position: relative;
    top:50%;
    margin-left: 220px;
    margin-right: 220px;
    overflow: hidden;
}

.items-wrapper{
    position: absolute;
    top: 50%;
    margin-top: -67px;

}

.cover-image{
    position: relative;
    top:7px;
    left: 0px;
    width: 88px;
    height: 130px;
    border-left: 2px solid black;
}

.cover-image.yellow{
    border-color:#f1cb00;
}

.cover-image.blue{
    border-color: #7aaabc;
}

.cover-image.green{
    border-color: #929a37;
}


.listitem{
    position: relative;
    float:left;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
}

/*
    SPECIFIC FOR BOOKS
*/

.bookcover{
    width: 90px;
    height: 135px;
    background-image: url('../img/book-cover-holder.png');
}

.items-menu-background-left.books{
    background-image: url('../img/books-background-left.png');
}

.items-menu-background-center.books{
    background-image: url('../img/books-background-repeat.png');
}

.items-menu-background-right.books{
    background-image: url('../img/books-background-right.png');
}


/*
    SPECIFIC FOR GAMES
*/

.gamecover{
    background-color: rgba(100,255,100,0);
    width: 150px;
    height: 150px;
    position: relative;
    white-space: nowrap;
}

.game-book-addition{

}

.game-icon{
    position: relative;
    left: -30px;
    top:-16px;
    /*border:1px solid #aaa;*/
}




.items-menu-background-left.games{
    background-image: url('../img/games-background-left.png');
}

.items-menu-background-center.games{
    background-image: url('../img/games-background-repeat.png');
}

.items-menu-background-right.games{
    background-image: url('../img/games-background-right.png');
}


/* 
    SPECIFIC FOR REVIEWS
*/

.review-short-title{
    overflow: hidden;
    width: 100%;
    height: 32px;
    background-color: none;
}

.review-short-text{
    font-size: 16px;
    width: 100%;
    height: 110px;
    overflow: hidden;
}

.review-short-footer{
    font-size: 16px;
    width: 100%;
    height: 20px;
    overflow: hidden;
    font-weight: bold;
}

.ellipsis{
    position: absolute;
    right: 20;
    bottom: 28;
    background-color: white;
}

.review-short-more-container{
    width: 100%;
    text-align: center;
    position: relative;
    top: 15px;

}

.all-attached-images{
    float: left;
    margin-right: 10px;
}



/* GENERAL CONTENT WINDOWS ( TEXT+PICS ) */
.gc-contentholder{
    margin-top: 100px;
    z-index:30;
    position: relative;
    width: 100%;
    height: 100%;
}

.gc-block{
    margin-left: auto;
    margin-right: auto;
    /*background-color: rgba(255,0,0,0.5);*/
}

.gc-content{
    width: 500px;
    position:relative; 
    margin:0 auto; 
    overflow: hidden;
    background-color:rgba(251,249,237,0.5);
}



.gc-hl{
    width: 500px;
    height: 0;
    border-top: 1px solid #417163;
    margin: 8px auto;
}

.gc-innercontent  table{
    color: #417163;
    font-size: 16px;
    line-height: 1;
}

.gc-innercontent{
    width: 475px;
    height:500px;
    color: #417163;
    line-height: 1.4;
    font-size: 16px;
}

.gc-title{
    width: 500px;
    font-size: 20px;
    color: #417163;
}








/* LOWER VISUALS CONTAINER */

.visuals{
    width: 100%;
    position: absolute;
    bottom:22px;
    z-index: 20;


}

.water{
    background-image: url('../img/water-repeat.png');
    background-repeat: repeat-x;
    width: 100%;
    height:61px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.grass-container{
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 188px;

}

.grass{
    margin: auto;
    background-image: url('../img/grass.png');
    width: 304px;
    height:188px;
}

.hill-left{
    background-image: url('../img/hill-left.png');
    width: 508px;
    height:188px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.hill-right{
    background-image: url('../img/hill-right.png');
    width: 477px;
    height:99px;
    position: absolute;
    right: 0;
    bottom: 0;
}




/* LOGON / LOGOFF */

.sign{
    position: absolute;
    right: 172px;
    bottom:0;
    z-index: 95;
}

.login{
    width: 191px;
    height: 139px;
    background-image: url('../img/login.png');
    cursor: pointer;
}

.logout{
    width: 82px;
    height: 22px;
    background: url('../img/avatars/logout.png');
    left: 40px;
    top: 150px;
    position: absolute;
    background-position:0 0;
    cursor: pointer;
}

.logout:hover{
    background-position:0 -22px
}

.avatar-display{
    margin-bottom: -7px;
}

 .sign-name{
    /*width: 131px;*/
    height: 23px;
    /*left: 14px;*/
    line-height: 23px;
    background: rgba(255,255,255,0.5);
    top: 128px;
    position: relative;
    /*text-align: center;*/
    /*overflow: hidden;*/
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.profile-frame{
    width: 157px;
    height: 229px;
    background: url('../img/avatars/profile-sign.png') no-repeat 0 0;
    margin-left: -77px;
    position: relative;
    text-align: center;
    left: 50%;
}

#profile-hint{
    position: absolute;
    top: -38px;
    padding: 3px;
}




/* SPEECH BUBBLE */

.bubble-container{
    position: absolute;
    bottom:150px;
    height: 190px;
    width: 500px; 
    background-color: white;
    z-index: 30;
}

.bubble-content{
    width: 100%;
    height: 100%;
    position: relative;
}

.usertext{
    color: #417163;
    font-size: 16px;
    line-height: 1.4;
}

.bubble-content p{
    margin: 0;
    padding: 20px;
    color: #417163;
    font-size: 23px;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.bubble-hook{
    width: 60px;
    height: 53px;
    top:30%;
    margin-top: -26px;
    position: absolute;
}

.bubble-left{
    background-image: url('../img/bubble/speech-hook-left.png');
    left: -60px;
}

.bubble-right{
    background-image: url('../img/bubble/speech-hook-right.png');
    right: -60px;
}

.bubble-left-bottom{
    background-image: url('../img/bubble/speech-hook-left-bottom.png');
    left: -60px;
}

.bubble-right-bottom{
    background-image: url('../img/bubble/speech-hook-right-bottom.png');
    right: -60px;
}


/* ALT STYLE (rough edge) */

.bubble-container.alt{
    background-color: transparent;
    padding: 20px;
}

.bubble-content.alt{
    background-image: url('../img/bubble/bubble-texture.png');
}

.bubble-left.alt{
    background-image: url('../img/bubble/speech-hook-left-alt.png');
    left: -55px;
}

.bubble-right.alt{
    background-image: url('../img/bubble/speech-hook-right-alt.png');
    right: -55px;
}

.bubble-left-bottom.alt{
    background-image: url('../img/bubble/speech-hook-left-bottom-alt.png');
    left: -55px;
}

.bubble-right-bottom.alt{
    background-image: url('../img/bubble/speech-hook-right-bottom-alt.png');
    right: -55px;
}

.bubble-edge{
    position: absolute;
    z-index: 1;
}



.bubble-edge.top{
    width: 100%;
    height:20px;
    top:0;
    left:0;
}

.bubble-edge.bottom{
    width: 100%;
    height:23px;
    bottom:3px;
    left:0;
}

.bubble-edge.left{
    height: 100%;
    width:20px;
    left:-20px;
    top:0;
}

.bubble-edge.right{
    height: 100%;
    width:22px;
    right:-22px;
    top:0;
}


/* BUBBLE ALT2 ( texturized round bubble) */

.bubble-round{
    position: absolute;
    z-index: 1;
}


.bubble-container.alt2{
    background-color: transparent;
}

.bubble-content.alt2{
    background-image: url('../img/bubble/round-bubble-body.png');
    background-size: 100% 100%;
    background-color: transparent;
}


.bubble-round.top{
    width: 100%;
    height:20%;
    top:-20%;
    left:0;
}

.bubble-round.bottom{
    width: 100%;
    height:20%;
    bottom:-20%;
    left:0;
}

.bubble-round.left{
    height: 100%;
    width:10%;
    left:-10%;
    top:0;
}

.bubble-round.right{
    height: 100%;
    width:10%;
    right:-10%;
    top:0;
}

.bubble-left.alt2{
    background-image: url('../img/bubble/speech-hook-left-alt.png');
    left: -55px;
}

.bubble-right.alt2{
    background-image: url('../img/bubble/speech-hook-right-alt.png');
    right: -55px;
}

.bubble-left-bottom.alt2{
    background-image: url('../img/bubble/speech-hook-left-bottom-alt.png');
    left: -55px;
}

.bubble-right-bottom.alt2{
    background-image: url('../img/bubble/speech-hook-right-bottom-alt.png');
    right: -55px;
}



/* BUBBLE ALT3 ( white round bubble) */


.bubble-container.alt3{
    background-color: transparent;
}

.bubble-content.alt3{
    background-image: url('../img/bubble/white-round-bubble-body.png');
    background-size: 100% 100%;
    background-color: transparent;
}

.bubble-left.alt3{
    background-image: url('../img/bubble/speech-hook-left-alt.png');
    left: -55px;
}

.bubble-right.alt3{
    background-image: url('../img/bubble/speech-hook-right-alt.png');
    right: -55px;
}

.bubble-left-bottom.alt3{
    background-image: url('../img/bubble/speech-hook-left-bottom-alt.png');
    left: -55px;
}

.bubble-right-bottom.alt3{
    background-image: url('../img/bubble/speech-hook-right-bottom-alt.png');
    right: -55px;
}



.bubble-shadow-right {
    -moz-box-shadow: 2px 2px 3px #ccc;
    -webkit-box-shadow: 2px 2px 3px #ccc;
    box-shadow: 2px 2px 3px #ccc;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc');
}






/* UI OVERRIDES */

.frontend .ui-widget-overlay{
    opacity: 0.9;
    background: #000000 url('../ui/css/start/images/ui-bg_flat_75_000000_40x100.png') 50% 50% 
}


.frontend .ui-widget-header{
    background: url('../img/menus/amira-ui-blue-background-dark.png') repeat;
    border:none;
}

.frontend .ui-button{
    background: url('../img/menus/amira-ui-blue-background-dark.png') repeat;
    border:none;
}

.frontend .ui-widget-content{
    background: url('../img/menus/amira-ui-blue-background-light.png') repeat;
    border:none;
}

.frontend.ui-dialog{
    font-size: 2em;
    width: 500px;
}

.frontend .ui-dialog-titlebar-close{
    background: url('../img/menus/book-menu-close-30px.png');
    width: 30px;
    height: 30px;
    margin-top: -15px;
    content: "";
}

.frontend .ui-dialog-titlebar-close span{
    background: none;
}

.frontend .ui-dialog-titlebar-close:hover{
    background-position: -30px 0;
}

.frontend .ui-widget-overlay{
    opacity: 0.9;
    background: #000;
}

*{    
    outline:none;
}