/*
 * Contains global class settings applicable for the entire website layout.
 *
 * LAMU Project 2011.
 */

/******************************************************************************
 *
 * 1. C L A S S   D E C L A R A T I O N S 
 * 
 */


/*  Schriften   */
* {
    font-family     : "Trebuchet MS", sans-serif;
    font-size       : 12px;
}
a {
    font-family: inherit;
    font-size: inherit;
}
h1, h2, h3, h4, h5 {
    font-family : MisoRegular, "Trebuchet MS", sans-serif;
}
h2 {
    font-size: 2.8em;
}
h3 {
    font-size: 1.6em;
}
.block-head {
    font-size: 1.5em;
}
#main-navigation li a,
#footer-navigation li a, 
.block-head {
    font-family : MisoBold, "Trebuchet MS", sans-serif; 
}


/*  Grundformatierung   */
body {
    margin          : 0px;
    padding         : 0px;
}

h1, h2, h3, h4, h5 {
    padding-top : 0px;
    margin-top  : 0px;
}

a:link, a:hover, a:active, a:visited {
    color: #3794BC;
    text-decoration: none;
}
ul, li {
    margin: 0px;
    padding: 0px;
}
/* GENERAL SIZES */
.left-block {
    width           : 666px;
    float           : left;
}

our-grey{
    background-color: #E6E6E6;
}

.right-block {
/*
    width           : 166px;
    float           : right;
*/
    
}
.right-block-inner {
    padding         : 15px;
    margin-left: 700px; /* left-block-width (666px) + space (34px) */
    /* I guess all blocks on the right have the same bg color. No? */
    background-color: #E6E6E6;
    font-size       : 0.95em;
}
.right-block h3 {
    margin          : 5px 0px 5px 0px;
}

.vertical-content-separator {
    overflow        : auto;
    margin          : 40px 0px 0px 0px;
    width           : 100%;
    clear           : both;
}

.vertical-content-separator hr {
    width           : 664px;
}


.vertical-first {
    margin-top      : 0px;
}

/* 
    NAVIGATION STYLES 
*/
ul.horizontal-navigation {
    /*overflow:           hidden; Markus */
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

ul.horizontal-navigation li {
    float:  left;
}

ul.horizontal-navigation a {
    text-align:     center; 
    display:        block;
}

.clear_float {
    clear:  both;
}

#main-navigation li a {
        background-color: #E6E6E6;
        width: 100px;
        padding: 8px 0px; /* 1px;*/
        font-size: 1.5em;
        text-align: center;
}

#main-navigation .play {
        color: #D33B52;
}
#main-navigation .play:hover,
#main-navigation .play.active {
        color: #E6E6E6;
        background-color: #D33B52;
}

#main-navigation .research {
        color: #851C31;
}

#main-navigation .research:hover,
#main-navigation .research.active {
        color: #E6E6E6;
        background-color: #851C31;
}

#main-navigation .develop {
        color: #59B9C3;
}

#main-navigation .develop:hover,
#main-navigation .develop.active {
        color: #E6E6E6;
        background-color: #59B9C3;
}

#main-navigation .events {
        color: #FFA97B;
}

#main-navigation .events:hover,
#main-navigation .events.active {
        color: #E6E6E6;
        background-color: #FFA97B;
}

#main-navigation .about {
        color: #E3798D;
}

#main-navigation .about:hover,
#main-navigation .about.active {
        color: #E6E6E6;
        background-color: #E3798D;
}

#main-navigation .blog {
        color: #858e80;
}

#main-navigation .blog:hover,
#main-navigation .blog.active {
        color: #E6E6E6;
        background-color: #858e80;
}

#footer-navigation li a {
    background-color: #E6E6E6;
    width: 125px;
    color: #666;
    padding: 6px 0 1px 0;
    text-align: center;
}

#footer-navigation li a:hover,
#footer-navigation li a.active { 
    background-color: #666;
    color: #fff;
}


/* CONTENT STYLES */

.content_container {
    /*overflow:   auto; markus*/
    width:      75%;
    float:      left;
}

.error-message {
    color: #e00;
    margin: 0px;
    margin-bottom: 20px;
    padding: 0px;
    padding-left: 10px;
}

.content_block {
    overflow:   auto;
    margin:     5px 10px 5px 0px;
    padding:    10px;
}


.content-block {
    overflow:   auto;    
}
#content_entry > h3:first-child {
    margin-top: 0;
}
#content_entry > h3 {
    margin: 30px 0px 5px 0px;
}




/* 
    SIDE PANEL STYLES 
*/

ul.tease_links {

    overflow        : auto;
    list-style-type : none;
    
    padding         : 0px;

}

ul.tease_links li {

    margin:     5px;

}

ul.tease_links li img {

    float:      left;
    margin:     0px 5px 0px 0px;
    border:     1px solid #000; 

}


ul.tease_links hr {

    border-top: 1px dashed #000;

}


ul.tease_links li .more {
    
    display:    block;
    text-align: right;
    
    
}

.flash-message {

    overflow:       auto;
    padding: 31px 21px 29px 15px;
    margin: 0px 0px 20px 0px;
    font-weight: bold;
    background-color: #E6E6E6;
    border: 1px solid #ccc;
    color: #808080;
    
}


.general-info {

    color           : #808080;

    font-style      : italic;
    font-size       : 12px;
    
    line-height     : 20px;
    
}

.gameIconSubtitle {
    text-align: center; 
    font-size: 8px; 
    margin: 0.25em 0;
}



/*
    Login-Box
*/
.headerbox {
    position: relative;
    height      : 180px;
    background-color: #E6E6E6;
}
.headerbox h1 {
    font-size: 1.8em;
    margin-bottom: 5px;
}

.headerbox a {
    font-size: 0.85em;
}

.headerbox p {
    margin-top: 0px;
}
.headerbox form input {
    border: none;
    background-color: #fff;
    margin: 0px;
}

.headerbox form input[type="text"],
.headerbox form input[type="email"],
.headerbox form input[type="password"] {
    width: 123px;
    height: 15px;
    margin-bottom: 7px;
    padding: 2px 10px;
    width: 123px;
}

.headerbox input[type=image] {
    vertical-align: text-bottom;
}

.headerbox form {
    overflow: auto;
}

.headerbox form div {
    float: left;
}

.headerbox form input[type='submit']{
    background-image: url('/img/login_arrow.png');
    font-size: 0pt;
    width: 21px;
    height: 20px;
}

.headerbox img {
    margin-bottom: 6px;
}


.headerbox a.logout {
    display: block;
    float: right;
}

.headerbox img.loggedInAs {
    margin-bottom: 0px !important;
    display: block;
    float: left;
}

.headerbox span.username {
    display: block;
    font-size: 25px !important;
}

.headerbox form label
{
    display: none;
}

.block-align-right {
    float: right;
}

/* removes the ugly blue border on image links */
a img {
    border: 0px;
}


hr {
     background-color: #E6E6E6;
     height: 1px;
     border: none;
     
     margin: 30px 0;
}

.png-header{

    /* hiding the text */
    /* david: disabled in localisation task */    
    /* font-size   : 0px;*/
    

}

/* SOCIALSOCIAL TIMELINE LISTS */

.social-timeline {

    position        : relative;

}


.social-timeline h1 {

    font-family     : MisoRegular, sans-serif;
    font-size       : 16pt;
    display         : inline;

}

.social-timeline .twitter-share-button {

    position        : absolute;
    right           : 0px;
    top             : 0px;

}

.social-timeline ul{
  
    overflow            : auto;
    list-style-type     : none;
    padding             : 0px;
    
}

.social-timeline ul li{
    
    overflow            : auto;
    position            : relative;

    margin-top          : 20px;
    min-height          : 32px;
    
}

.social-timeline ul li:first-child {

    margin-top          : 0px;
        
}

.social-timeline ul li .avatar {
    
    position            : absolute;
    top                 : 0px;
    left                : 0px;
    
    width               : 32px;
    height              : 32px;
    

}

.social-timeline ul li .content {

    overflow            : auto;
    padding-left        : 50px;   
    
}

.social-timeline ul li p {

    padding             : 0px;
    margin              : 2px 0px 0px 0px;
}


.social-timeline ul li h1 {
    
    padding             : 0px;
    margin              : 0px 0px 2px 0px;
    font-size           : 12pt;
    display             : block;

}


/* GAME DOWNLOAD */

.game-download {

    overflow    : auto;
    
}

.game-download h1 {

    font-size   : 20px;

}

.game-download ul {

    overflow    : auto;

    list-style  : none;
    margin      : 0px 0px 0px 0px;
    padding     : 0px;

}

.game-download ul li {
    
    overflow    : hidden;
    height      : 64px;
    float       : left;

    margin      : 0px 0px 0px 20px;
    padding     : 0px;
    
}

.game-download ul li:first-child {

    margin-left : 0px;
    
}

.game-download ul li img {

    height      : 64px;
    width       : auto;

}


/* TRAILER */

.trailer {
 
    overflow    : auto;
    
}

.trailer h1 {

    font-size   : 20px;

}

.trailer iframe {

    width       : 100%;
    height      : auto;
    
    background-color: #E6E6E6;

}

/* SCREENSHOTS */
.screenshots {

    overflow    : auto;

}

.screenshots h1 {

    font-size   : 20px;

}

.screenshots ul {

    list-style  : none;
    margin      : 0px;
    padding     : 0px;

}

.screenshots ul li {

    width       : 100px;
    height      : 147px;
    
    overflow    : hidden;
    
    float       : left;
    margin      : 0px 0px 0px 8px;
    
}

.screenshots ul li:first-child {

    margin      : 0px;

}

.screenshots ul li img {
    
    width       : 100px;
    height      : auto;    
    
}

/* Game content description */

.game-content h1 {
     font-size  : 37px; /* 36px */
}

.game-content p {

    font-style  : italic;
    line-height : 20px;   

}

.game-content img {

    width       : 196px;
    height      : auto;

    float       : right;

    border      : 0px;
    margin      : 0px 0px 40px 40px;

}

/* SHORT INFO STYLE */
.short-info {

    padding         : 0px;
    margin          : 0px;

    overflow        : hidden;
    
}

.short-info h1 {
    
    font-size       : 20px;    
    
}

.short-info table {

    width       : 100%;
    
    padding     : 0px;
    margin      : 0px;

}

.short-info table th, table.short-info td {

    text-align  : left;
    vertical-align : text-top;
    
}

.short-info table th {
    width       : 45%;
}

.short-info table td {
    width       : 55%;
}


.copyright {

    padding     : 0px;
    margin      : 0px;
    
    text-align  : justify;

}


.facebook-button, .twitter-button {

    margin      : 0px;
    padding     : 2px 0px 0px 20px;
    
}

.facebook-button {

    background-image    : url('../img/social/facebook_icon.png');
    background-position : left top;
    background-repeat   : no-repeat;
    
    display             : inline-block;
    height              : 16px;
    
}

.twitter-button {

    background-image    : url('../img/social/twitter_icon.png');
    background-position : left top;
    background-repeat   : no-repeat;
    
    display             : inline-block;
    height              : 16px;
    
}



/******************************************************************************
 *
 * 2. I N S T A N C E S
 *
 */
  
/* A container for the entire page content including header and footer */
#container {
    /*overflow:       auto; markus*/
    
    /* Define the size of the page and margins over here */
    width:          900px;
    margin:         30px auto;
    
    /* Just for debugging to show the borders of the box *
    border: 1px solid #000;
    /**/
}


#header {
    /* overflow    : auto; /*Markus: no scrollbars anymore */
    /*position    : relative; */
}


#main-logo {
    /*float:      left; Markus: kann weg */
    margin:     0px 60px 0px 0px;    
    border:     none;    
}

#top-banner {

    margin      : 0px;
    padding     : 0px;     
    
    text-align  : left;
    
}

#main-navigation {

    /* clear       : left; Markus */

    /* position    : absolute; Markus */ 
    /*bottom      : 0px;*/

    margin      : 72px 0px 0px 0px;
    /*border      : 1px dashed #000;*/
    
    /* For some reason facebook button breaks the height of navigation in chrome */
    height		: 33px;
}

#main-navigation li {

    margin-left: 2%; 
    width: 15%;
    /* Just for debugging to show the borders of the box *
    border: 1px solid #000;
    /**/
    
}

/* Feb. 28th - davidl: hover effects. set the visiblity to hidden, the background image of the a-element will be visible instead */
#footer-navigation li a:hover img,
#main-navigation li a:hover img,
.navigationHelper li a:hover img{
    visibility: hidden;
}

#main-navigation li:first-child {
    margin-left: 0px;
}

#content {
    
    /*overflow:   auto; markus*/    
}


#main-footer{
    
    /*overflow:   hidden;*/
    margin-top: 20px;

}

#footer-navigation {

    clear:      left;
    width:      665px;
    float:      left;
    /*border      : 1px dashed #000;*/
    
}

#footer-navigation li {

    margin-left: 10px;
        
}

#footer-navigation li:first-child {
    margin-left: 0px;
}

#auth-flash {}

#session-flash {}

#login-mit-box {
    position: absolute;
    bottom: 0px;
}

.fb_iframe_widget
{
    vertical-align: middle;
}

.login-mit > div {
    display: inline;
    vertical-align: middle;
    line-height: 100%;
}

.login-mit-header {
    height              : 16px;
    font-size           : 16px;
    font-weight         : bold;
}

#twitter-login-button {
    margin-left         : 10px;
}

#register_button {
    color: #3794BC;
    text-decoration: underline;
    cursor: pointer;
}

#modal_window { display: none;}

/* A dialog window used to give feedback to the user */
/*
#ui-short-feedback {
    visibility : hidden;
}
*/
/******************************************************************************
 *
 * 3. F O N T S
 *
 */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 10, 2011 11:19:45 AM America/New_York */

@font-face {
    font-family: 'MisoLight';
    src: url('../files/fonts/miso-light-webfont.eot');
    src: url('../files/fonts/miso-light-webfont.eot?iefix') format('eot'),
         url('../files/fonts/miso-light-webfont.woff') format('woff'),
         url('../files/fonts/miso-light-webfont.ttf') format('truetype'),
         url('../files/fonts/miso-light-webfont.svg#webfontKibidBgL') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MisoRegular';
    src: url('../files/fonts/miso-webfont.eot');
    src: url('../files/fonts/miso-webfont.eot?iefix') format('eot'),
         url('../files/fonts/miso-webfont.woff') format('woff'),
         url('../files/fonts/miso-webfont.ttf') format('truetype'),
         url('../files/fonts/miso-webfont.svg#webfont9ljUXjAw') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MisoBold';
    src: url('../files/fonts/miso-bold-webfont.eot');
    src: url('../files/fonts/miso-bold-webfont.eot?iefix') format('eot'),
         url('../files/fonts/miso-bold-webfont.woff') format('woff'),
         url('../files/fonts/miso-bold-webfont.ttf') format('truetype'),
         url('../files/fonts/miso-bold-webfont.svg#webfontmLKaPHHF') format('svg');
    font-weight: normal;
    font-style: normal;

}


/******************************************************************************
 * 
 * 4. L A N G U A G E   D R O P D O W N
 *
 */
 
 /* General dropdown styles */
.dropdown {
    float: left;
    margin: 0px;    
    margin-left: 40px;
}
        
.dropdown a, 
.dropdown a:visited { 
    color:#666666; 
    text-decoration:none; 
    outline:none; 

}
.dropdown a:hover { 
    color:#666666; 
}
.dropdown dt a:hover { 
    color:#666666; 
}
.dropdown dt a {
    background: #E6E6E6 url(../img/arrow-down.png) no-repeat scroll right;
    display:block; 
    padding-right:20px;
    width:190px;
    font-size: 12px; 
    height: 19px;
    font-family     : "MisoBold", sans-serif;
    padding: 0px 2px;
}
.dropdown dt a img {
    cursor:pointer; 
    display:block;
    padding:2px;  
}
.dropdown dt a span {
    cursor:pointer; 
    display:block;
    padding:6px 3px 0px 50px;  
}

.dropdown dd {
    margin: 0px;
    padding: 0px;
}

.dropdown dd ul { 
    background:#F2F2F2 none repeat scroll 0 0; 
    font-family     : "MisoBold", sans-serif;
    font-size: 12px; 
    margin: 0px;
    color:#666666; 
    display:none;
    left:0px; 
    padding:0px; 
    width:180px;
    min-width:170px; 
    list-style:none; 
}
.dropdown span.value { 
    display:none; 
}
.dropdown dd ul li a { 
    padding:4px; 
    display:block; 
}

.dropdown dd ul li span {
    padding:0 0 0 48px; 
    display:block; 
        
}

.dropdown dd ul li a:hover { 
    background-color:#E6E6E6; 
}

.dropdown img.flag { 
    border:none; 
    text-align: left;
    float: left;
    margin-top: 2px;
    margin-right:8px;
    margin-left:5px; 
}
.flagvisibility { 
    display:block; 
}

/** Adjusting wordpress blog styles to have mobilegamelab look */
.posts {
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

/** Styling the banners **/
#banner {   /* start-formating, avoids image-jumping and looking good if JS deactiveted */
    list-style-image: none;
    list-style-type: none;
    padding: 0px;
    overflow: hidden;   /* Just in case, js is deactiveted */
}
.mgl-banner
{
    color: black;
    height : 100%;
    padding: 24px 29px;
    background-image : url("../img/ads/mgl-banner-bg.png");
}

.mgl-banner h2
{
    background-color : white;
    display: inline-block;
    padding: 9px 14px;
    margin-bottom: 0px;
}

.mgl-banner p
{
    background-color : white;
    padding: 9px 14px;
    margin-top: 6px;
    width: 420px;
}
/* Banner-Background for different contents */
#home_content_container a.games .mgl-banner {
    background: url(../img/ads/spielen.png) no-repeat 0 0 #fff;
} 
#home_content_container a.develop .mgl-banner {
    background: url(../img/ads/entwickeln.png) no-repeat 0 0 #fff;
} 
#home_content_container a.research .mgl-banner {
    background: url(../img/ads/forschen.png) no-repeat 0 0 #fff;
} 



/*** REGISTER ***/
.registration {
    border: 1px solid #ccc;
    background-color: #e6e6e6;
    width: 409px;
    padding: 4px 38px 12px;
}

.registration div.input 
{
    clear: both;
}

#UserRegisterForm input[type='submit']
{
    padding-right: 28px;
    min-height: 35px;
    background-color: white;
    background-image: url('../img/register/btn_continue.png');
    background-repeat: no-repeat;
    background-position: right;
    border: none;
    position: absolute;
    right: 0px;
}

#UserRegisterForm 
{
    padding: 20px 0px 40px 0px;
}

.registration .submit
{
    position: relative;
    width: 98%;
    margin-right: 2%;
    min-height: 40px;
    overflow: auto;
    margin-top: 20px;
    background-color: white;
}

.registration img.closeHandle {
	float: right;
	margin-right: -34px;
	cursor: pointer;
}

.registration h1 {
	display: block;
	padding: 25px 0px 22px;
	font: 30px/30px 'MisoRegular', Arial, sans-serif !important;
	margin: 0px !important;
}

.registration input {
	vertical-align: center;
}

.registration p {
	color: #808080;
	margin: 0px;
	margin-bottom: 17px; 
}

.registration label {
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	border-right: 0px;
	padding: 7px 6px 8px;
	margin: 0px;
	margin-bottom: 10px;
	font-size: 12px;
	font-family: inherit;
	min-width: 90px;
	width: 20%;
	display: inline-block;
}

.registration [type="text"],
.registration [type="password"] {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 7px 6px 8px;
	font-size: 12px;
	font-family: inherit;
	margin: 0px;
	margin-bottom: 10px;
	width: 70%;
	display: inline-block;
}


.registration .checkbox label
{
	width: 90%;
	display: inline-block;
}

.registration .submit_bar {
	background-color: #fff;
	padding: 7px 83px 4px 83px;
	margin: 35px -88px 35px -78px;
	text-align: right;
}

.registration .submit_bar img
{
	vertical-align: 50%;
	margin-right: 10px;
}

.registration span.terms {
	color: #808080;
	margin-left: 10px;
	font-size: 10px;
}

.registration a {
	margin-right: 11px;
}

/** List class for displaying all sorts of excerpts */
ul.excerpt-list {
	list-style-type: none;
    padding-left: 0px;    
}

ul.excerpt-list li {
    overflow: auto;
	margin-top: 30px;
	padding-top: 6px; /* the image border */
}

ul.excerpt-list li:first-child {
	margin-top: 0px;
}


ul.excerpt-list li img {

    height: auto;
    max-width: 30%;
    float: left;
    margin: -6px 10px 10px 0px;

    padding: 5px;
    border: 1px solid #E6E6E6;
    background-color: white;

}

/* Excerpt attributes */
ul.excerpt-list li ul.attributes {
    display: block;
    overflow: auto;
    list-style-type: none;
	padding: 0px;
}

ul.excerpt-list li ul.attributes li {
	border-left: 1px solid gray;
	float: left;
	padding: 0px 5px 0px 5px;
    margin-top: 0px;
}

ul.excerpt-list li ul.attributes li:first-child {
	border-left: none;
	padding-left: 0px;
}

/*  
    Header-Formatierungen 
*/

#content_container #content_header {
    height: 211px;
    padding-left: 30px;
    padding-top: 25px;
    width: 636px;
}
#content_container #content_header h2 {
    background-color: white;
    display: inline-block;
    padding: 9px 14px 6px;
    margin-bottom: 0px;
}
#content_container #content_header p {
    background-color: white;
    font-size: 12px;
    font-style: italic;
    line-height: 20px;
    margin-top: 5px;
    padding: 10px;
    width: 450px;
}
#content_container.games #content_header {
    background-image: url("../img/research/background.png");
}
#content_container.research #content_header {
    background-image: url("../img/play/background.png");
}
#content_container.develop #content_header {
    background-image: url("../img/develop/background.png");
}
#content_container.events #content_header {
    background-image: url("../img/events/background.png");
}
#content_container.about #content_header {
    background-image: url("../img/about/background.png");
}

/*
    Gamecarusell on Homepage
*/
#games-slideshow li > a {
    background-position: 0px 75px;
    color: transparent;
    display: block;
    height: 75px;
    margin-left: 9px;
    width: 75px;
}
#games-slideshow li > a:hover {
    background-position: 0px 0px;
}


/*
    Linklist
*/
#linklist ul {
    list-style-position: inside;
    list-style-type: none;
    padding: 0;
}
#linklist li {
    line-height: 1.1em;
    padding-bottom: 0.8em;
}
/*
    
*/
/* Clearfix, for clearing floats */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	font-size: 0;
	height: 0;
	visibility: hidden;
} 
/* Clearfix, IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }
 
/* Clearfix, IE-Patch für IE 6*/
* html .clearfix { height: 1%; }

/* make something unvisible */  
.hide {
    position: absolute;
    left: -10000px;
}

/* 

    Facebook-Login

*/
.pluginFaviconButton {
    background-color: red;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}