/**
 * basic settings
 */
/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html
{
    box-sizing: border-box;
}

*,
*:before,
*:after
{
    box-sizing: inherit;
}

/* remove hightlight color on touch devices */
*
{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* to override user agent stylesheet font definition (e.g. arial in chrome), expand this selection if needed */
body,
input,
textarea,
keygen,
select,
button
{
    font-family: 'Roboto', sans-serif;
}


body
{
    margin: 0;
    font-size: 13px;
    color: #5e5e5e;
    line-height: 1.42857;
    background-color: #e3e3e3;
    min-width: 320px;
}


img
{
    border: 0
}


a:link, a:visited, a:active
{
    color: #000000;
    text-decoration: none;
    font-weight: normal;
}


a:focus, a:active
{
    outline: none;
}


a:hover
{
    text-decoration: none;
    font-weight: bold;
}


h1, h2, h3, h4, h5, h6
{
    font-weight: normal;
    color: black;
    font-family: 'Roboto Condensed', sans-serif;
}

h1
{
    font-size: 26px;
}

h2
{
    font-size: 17px;
}

h3
{
    font-size: 15px;
}

h4
{
    font-size: 13px;
}


h1 .subTitle,
h2 .subTitle,
h3 .subTitle,
h4 .subTitle
{
    display: inline-block;
    font-size: 13px;
    color: #9E9E9E;
    font-weight: normal;
    margin-left: 12px;
}



/**
 * index layout
 * contentWrapper contains nav and main
 * 220 + 820 = 1040px
*/

#contentWrapper
{
    margin: 53px auto 8px;
    /*padding-left: 220px;*/
    width: 100%; /* before: 1001px */
    max-width: 1040px;
    /*min-width: 1040px;*/
    background: white;
    box-shadow: 0 0 10px #A5A5A5;
    overflow: hidden; /* to hide the nav if its positioned to the left */
    transition: 0.3s padding-left;
}



nav
{
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 220px;
    max-width: 220px;
    min-width: 220px;
    white-space: nowrap;
    padding-top: 48px;
    background: #f1f1f1;
    border-right: 1px solid #e4e4e4;
    color: #868686;
    overflow-x: hidden;
    overflow-y: hidden; /* auto if this should be scrollable*/
    z-index: 3; /* to position it over the content */
    transition: 0.15s transform ease-out;
}


main
{
    display: table-cell;
    position: relative;
    vertical-align: top;
    width: 100%;
    max-width: 820px;
    margin: auto; /* center it */
    padding-left: 32px;
    padding-right: 32px;
}


footer
{
    text-align: center;
    margin-top: 16px;
    margin-bottom: 16px;
}


footer a
{
    color: grey !important;
    margin-left: 24px;
    font-size: 11px;
}


header /* unten ist header nochmal für schrift definitionen */
{
    /*position: absolute;*/
    line-height: 1;
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 48px;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, black, #212D3E);
    box-shadow: 0 0 10px #000000;
}


header #headerWrapper
{
    width: 100%;
    height: 100%;
    max-width: 1040px; /* match contentWrapper */
    margin: 15px auto auto;
    text-align: center;
    position: relative;
}


/**
Hint Area
 */
#hintArea
{
    position: fixed;
    top: -60px;
    transition: top 0.3s  ease-in-out;
    width: 100%;
    background: #4acaff;
    color: #202c3c;
    height: 97px;
    z-index: 9999;
    overflow: hidden;
    vertical-align: middle;
}


#hintArea.open
{
    top: 48px;
}


#hintAreaContainer
{
    max-width: 1040px;
    position: relative;
    width: 100%;
    margin: auto;
}


#hintAreaClose
{
    position: absolute;
    top: 12px;
    left: 12px;
    color: #357a9e;
    border: 1px solid #357a9e;
    padding: 0 5px;
    border-radius: 3px;
    cursor: pointer;
}

#hintAreaClose:hover
{
    background-color: #44b8e8;
}


#hintAreaContent
{
    padding-top: 30px;
    /* padding-bottom: 16px; */
    min-width: 320px;
    margin: auto;
    font-size: 14px;
    height: 100%;
}



ins#serverData
{
    display: none;
}


/**
 * do not display nav on smaller screen sizes
 * override max-width for #contentWrapper so main does not exceed optimized size (820px)
 * set main to be block, set max-width to pure width value without any margin/padding applied
 * and let it control the left/right whitespace automatic
 */
@media all and (max-width: 1040px)
{
    nav
    {
        display: block; /* make it a block again */
        position: fixed;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        top: 48px;
        left: -220px;
        padding-bottom: 48px; /* otherwise pts logo is gone */
    }

    #contentWrapper
    {
        max-width: 820px;
    }

    main
    {
        display: block;
        max-width: 756px;
        padding-left: 0;
        padding-right: 0;
    }
}


/**
 * remove box shadow from contentwrapper since it occupying the
 * full screen now and place it directly under the header,
 * change page background color
 */
@media all and (max-width: 820px)
{
    #contentWrapper
    {
        margin-top: 48px;
        box-shadow: none;
        border-bottom: 1px solid #e1e1e1;
    }

    footer a
    {
        margin-left: 4px;
        margin-right: 4px;
    }

    body
    {
        background-color: #F5F5F5;
    }
}


/**
 * holding cont_head, cont_separator and cont_content
 */
.innerWrapper
{
    position: relative;
    max-width: 756px;
    margin-top: 26px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}


@media all and (max-width: 800px)
{
    .innerWrapper
    {
        max-width: 734px;
    }
}


@media all and (max-width: 767px)
{
    .innerWrapper
    {
        margin-top: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }
}


/**
 * Page content container, head & content
 */
.cont_head
{
    min-height: 64px;
    margin-left: 26px;
    margin-right: 26px;
    color: #000000;
}


.cont_separator
{
    background-color: #d8d8d8;
    height: 1px;
    margin-bottom: 6px;
}


.cont_content
{
    min-height: 600px; /* important or footer ads could get overlayed by vertical aside ads */
    margin-top: 26px;
    margin-left: 26px;
    margin-right: 26px;
    margin-bottom: 32px;
}


@media all and (max-width: 800px)
{
    .cont_head
    {
        margin-left: auto;
        margin-right: auto;
        max-width: 704px;
    }

    .cont_separator
    {
    }

    .cont_content
    {
        margin-left: auto;
        margin-right: auto;
        max-width: 704px;
    }
}




/* subtitle in head */
.cont_head .subHeading
{
    color: #4b4b4b;
    margin-top: 8px;
    padding-bottom: 12px;
}


/* heading definitions */
.cont_head h1, .cont_head h2, .cont_head h3
{
    display: inline !important;
    line-height: 1;
}

.cont_head h1, h1 {
    color: #323232;
}

.cont_head h2 {
    font-size: 16px !important;
    font-weight: normal;
    padding-left: 10px;
}




/**
 * state changes for offscreen navigation
 */
@media all and (max-width: 1040px)
{
    body.offScreenNavOpen nav
    {
        transform: translate3d(220px, 0, 0);
    }

    body.offScreenNavOpen div#overlay
    {
        background: rgba(0,0,0,0.5);
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 2;
    }

    div#overlay
    {
        transition: background 0.3s;
    }
}



/**
 * header content
 */
header button.navToggle
{
    display: none;
    margin: 0;
    border: 0;
    padding: 0;
    background: none;

    position: absolute;
    left: 11px;
    top: -6px;

    width: 34px;
    height: 30px;
    max-height: none;
    font-size: 11px;
    font-family: monospace;
    padding: 6px;
    border-radius: 3px;
    color: white !important;
    border: 1px solid #254050;
    background-color: #1f2b3a;
}


header button.navToggle:active,
body.hasHoverSupport header button.navToggle:hover
{
    background-color: #4acaff;
    border-color: #4acaff;
}


header button.navToggle:before
{
    font-size: 14px;
    top: 0;
}


header a#logo
{
    color: #ffffff;
    position: absolute;
    left: 30px;
}


header a#logo span#logoName
{
    position: absolute;
    left: 28px;
    color: #4acaff;
    text-transform: uppercase;
    font-size: 20px;
    padding-bottom: 3px;
    transition: all 0.2s ease;
}


header a#logo span#logoTld
{
    position: absolute;
    left: 125px;
    bottom: 1px;
    font-size: 14px;
    text-transform: none;
}


/* logo animation */
header a#logo:hover i:before
{
    transition: all 0.2s ease;
    margin-left: 3px;
}

header a#logo:hover span#logoName
{
    left: 26px;
}


header div#language
{
    position: absolute;
    left: 24%;
    padding: 3px 3px 2px 6px;
    border: 1px solid #254050;
    background-color: #1f2b3a;
    border-radius: 3px;
}


header div#language a img
{
    margin-right: 3px;
    width: 16px;
    height: 11px;
    opacity: 0.6;
    transition: opacity 1s ease;
}


header div#language a img:hover, header div#language a img.active
{
    opacity: 1;
}


header .headerInput
{
    width: 80px;
    height: 20px;
    font-size: 11px;
    font-family: monospace;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 3px;
    color: white;
    border: 1px solid #254050;
    background-color: #1f2b3a;
}


header input.headerInput::-webkit-input-placeholder
{
    color: #2598CC !important;
    opacity: 1;
}

header input.headerInput:-moz-placeholder /* Firefox 18- */
{
    color: #2598CC !important;
    opacity: 1;
}

header input.headerInput::-moz-placeholder /* Firefox 19+ */
{
    color: #2598CC !important;
    opacity: 1;
}

header input.headerInput:-ms-input-placeholder
{
    color: #2598CC !important;
    opacity: 1;
}


header .headerInput + button
{
    opacity: 0;
    height: 20px;
    transition: opacity 1s ease;
}


header .headerInput + button:before
{
    font-size: 11px;
}

header #mobileSearchIcon
{
    display: none;
}

header #server-search label,
header #user-search label
{
    vertical-align: middle;
    text-align: right;
}


/* flaticons for server and user search */
header #server-search i:before, header #user-search i:before
{
    color: #4acaff;
    font-size: 12px;
    display: inline-block;
    width: 18px;
    margin-right: 5px;
}


/* common settings for all the before and after elements of the labels */
header #server-search label:before,
header #server-search label:after,
header #user-search label:before,
header #user-search label:after
{
    font-size: 11px;
}

/* label definition */
header #server-search label:before, header #user-search label:before
{
    color: #4acaff;
    min-width: 31px;
    text-align: right;
}

/* value definition */
header #server-search label:after, header #user-search label:after
{
    color: white;
    min-width: 44px;
    text-align: left;
}

/* make width of label:after wider for unified optics */
header #user-search label:after
{
    min-width: 50px;
}


header #server-search
{
    position: absolute;
    left: 35%;
}


header #user-search
{
    position: absolute;
    left: 58%;
}


header #headerG2a
{
    position: absolute;
    right: 12px;
    top: -2px;
}


header #headerG2a a#g2a
{
    display: inline-block;
    position: relative;
    margin-right: -42px; /* place over coupon, will be moved out of the way by transition */
    transition: margin-right 0.2s ease;
}


/* anim */
header #headerG2a:hover a#g2a
{
    margin-right: 0; /* make space for the coupon */
}

header #headerG2a:hover .coupon .title
{
    opacity: 1; /* fade the coupon in */
}
/* anim end */


header #headerG2a a#g2a img
{
    width: 74px;
    height: 21px;
}


header #headerG2a .coupon
{
    display: inline-block;
    margin-left: 4px;
}


header #headerG2a .coupon .title
{
    font-size: 12px;
    display: inline-block;
    opacity: 0; /* will get faded in by transition */
    transition: opacity 0.2s ease;
}


header #headerG2a .coupon .title .percentage
{
    color: #4ACAFF;
}


header #headerG2a .coupon .title .code
{
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    color: white;
    margin-top: -1px;
}


header #headerG2a .coupon a
{
    display: inline-block;
    font-size: 14px;
    margin-top: 1px;
    margin-left: 6px;
    vertical-align: top;
    transition: all 0.5s ease;
    padding-bottom: 1px;
}


header a,
header a:visited
{
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}


header a:hover
{
    font-weight: normal;
}


/**
 * header content responsive
 */


/* minimal view, hide search inputs, show search icon, change/reposition flags, hide g2a */
@media all and (max-width: 600px)
{
    header #mobileSearchIcon
    {
        position: absolute;
        display: inline;
        top: -15px;
        right: 48px;
        width: 48px;
        height: 100%;
        color: #2E4056;
    }

    header #mobileSearchIcon:active
    {
        background: #4acaff;
    }

    header #mobileSearchIcon:before
    {
        display: block;
        margin-top: 15px;
    }


    /* hide elements depending on space */
    header #server-search
    {
        display: none;
    }

    header #user-search
    {
        display: none;
    }

    header #headerG2a
    {
        display: none;
    }


    /* display flags in two rows */
    header div#language a
    {
        display: block;
        margin-bottom: 3px;
    }


    /* reposition language */
    header div#language
    {
        position: absolute;
        display: inline;
        top: -15px;
        right: 0;
        width: 48px;
        height: 100%;
        /*background: #4acaff;*/
        background: none;
        left: initial;
        border: 0;
        border-radius: 0;
        padding-top: 12px;
    }
}


/* between two worlds */
@media all and (min-width: 600px) and (max-width: 1040px)
{
    header #server-search
    {
        left: 45%;
    }


    header #user-search
    {
        left: 64%;
    }


    /* lower the input field width */
    header #server-search input,
    header #user-search input
    {
        width: 55px;
    }


    /* enter buttons on touch devices not needed */
    header .headerInput + button
    {
        display: none;
    }


    /* gain space and make flags clickable again by killing the onhover (touch) content and removing the reserved width */
    header #server-search label:before,
    header #user-search label:before
    {
        min-width: 0;
    }

    header .hoverWithLabel:hover:before
    {
        content: '';
    }

    /* less reserved space between label text and input */
    header #server-search label:after,
    header #user-search label:after
    {
        min-width: 36px;
    }

    header #user-search label:after
    {
        min-width: 42px;
    }


    /* reposition language */
    header div#language
    {
        margin-left: 79px;
    }


    /* remove coupon */
    header #headerG2a .coupon
    {
        display: none;
    }


    /* readjust position cause of coupon removal */
    header #headerG2a a#g2a
    {
        margin-right: 0;
    }
}


/* show nav toggle, reposition logo, kill animations*/
@media all and (max-width: 1040px)
{

    /* display nav toggle */
    header button.navToggle
    {
        display: block;
    }

    /* reposition logo cause of nav toggle */
    header a#logo
    {
        left: 60px;
    }


    /* kill hover logo animations */
    header a#logo span#logoName
    {
        transition: none;
    }

    header a#logo:hover span#logoName
    {
        left: 28px;
    }

    header a#logo:hover i:before
    {
        transition: none;
        margin-left: 0;
    }
}



/**
 * nav
 */
#nav_serverreg
{
    position: absolute;
    top: 0;
    left: 50%;
    width: 140px;
    margin-left: -70px;
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}


nav .section
{
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-left: 16px;
    margin-right: 16px;
    border-bottom: 1px solid #dadada;
}


nav .section p
{
    margin-top: 0;
    margin-bottom: 5px;
    color: grey;
    font-size: 14px;
    text-transform: uppercase;
}


nav button,
nav .button
{
    margin-left: 15px;
    margin-top: 8px;
    line-height: normal;
}

nav .section .links a
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* change to a element to make space for the user online status */
nav .section.withUsersOnline .links a
{
    position: relative; /* for the absolute positioned div inside */
    padding-right: 32px; /* space for the absolute positioned div inside */
}


/* exception for the your favorites link to give it enough width for its text */
nav .section.withUsersOnline .links a.exception
{
    padding-right: 0;
}


nav .section.withUsersOnline .links a div.buttonAlike
{
    position: absolute;
    top: 4px;
    right: 0;
    min-height: 0;
    height: 16px;
    width: 22px;

    color: #757575 !important;
    border-color: #DADADA;
    background: #F9F9F9;
    font-size: 9px;
    font-weight: normal;
    padding: 2px 0 0;
}


nav .section.withUsersOnline .links a div.empty
{
    color: #808080;
}


nav .section.withUsersOnline .links a div.offline
{
    color: #CB8D8D !important;
    background: #F9DCDC;
    border-color: #DCBABA;
    padding-left: 0;
    padding-right: 0;
}



/* all links in the nav sections */
nav .section .links a,
nav .section .links a:visited,
nav .section .links a:active
{
    padding-top: 4px;
    padding-bottom: 4px;
    display: block; /* so they break lines */
    vertical-align: top; /* maybe not needed */
    width: 100%; /* propably needed for the cutoff */
    color: black !important;
}

nav .section .links a:hover
{
    color: black !important;
    font-weight: bold;
}


/*
icons in front of links
*/

nav .section .links a img
{
    margin-right: 6px;
    margin-left: 16px;
    position: relative;
}


nav .section .links a img.flag
{
    width: 16px;
    height: 11px;
    top: 1px;
}


nav .section .links a img.category
{
    width: 16px;
    height: 16px;
    top: 3px;
}

/* flaticon for links without custom icon */
nav .section .links .flaticon-chevron18:before
{
    color: #f1f1f1; /* farbe des hintergrund der nav damit die icons nicht sichtbar sind */
    font-size: 9px;
    margin-left: 1px;
    margin-right: 6px;
    transition: all 0.2s ease;
    position: relative;
    top: -1px;
}

/* change icon color if hovered */
nav .section .links .flaticon-chevron18:hover:before
{
    color: black;
}


#navG2aCoupon
{
    display: block;
    width: 120px;
    height: 120px;
    margin: auto;
    background: url(../images/g2a_code_big.png) 0 0 no-repeat;
    background-size: contain;
    text-align: center;
    box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
}


#navPts
{
    display: block;
    width: 157px;
    height: 64px;
    margin: 36px auto 20px auto;
    text-align: center;
    font-size:10px;
    color: grey;
    background: url(../images/content/pts.png) 0 0 no-repeat;
    background-size: contain;
    background-position-y: 16px;
}


nav .play_store_badge
{
    display: block;
    width: 124px;
    margin-left: auto;
    margin-right: auto;
}


nav .play_store_badge img
{
    max-width: 100%;
}



/*
 * PageWideNotice
 */
#pageWideNotice
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: #fefaea;
    border-bottom: 1px solid #F3EBD2;
    padding-top: 6px;
    padding-bottom: 6px;
}

#pageWideNoticeSpacer
{
    display: block;
    height: 20px;
}



/**
 * Default List settings
 */
ul.defaultList
{
    list-style-type: none;
    margin: 0;
    border: 0;
    padding: 0;
}


ul.defaultList > li
{
    position: relative; /* to allow absolute positioning inside */
    padding: 15px 8px 14px 8px;
    margin: 0;
    border-bottom: 1px solid #e8e8e8;
}


ul.defaultList > li:last-child
{
    border-bottom: none;
}


ul.defaultList > li:hover
{
    background-color: #f5f5f5;
}


/* an div child of li or an element with the specified class .column */
ul.defaultList > li > div,
ul.defaultList > li > .column
{
    display: inline-block;
    vertical-align: middle;
}


@media all and (max-width: 733px)
{
    ul.defaultList > li
    {
        padding-left: 0;
        padding-right: 0;
    }
}



/**
 * Server List
 */

.serverList li i.favoriteMark:before
{
    position: absolute;
    left: -12px;
    top: 50%;
    margin-top: -7px;
    font-size: 10px;
    color: #c3c3c3;
}


.serverList li img.flag
{
    width: 16px;
    height: 11px;
    margin-right: 8px;
    vertical-align: middle;
}


.serverList li div.name
{
    width: 48%;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 8px;
}


.serverList li button.statusPill
{
    width: 44px;
    margin-right: 10px;
    font-size: 10px;
    color: white;
}


.serverList li .status
{
    white-space: nowrap;
    overflow: hidden;
}


.serverList li .status .extended
{
    opacity: 0;
    color: grey;
    display: inline-block;
    transition: all 0.3s ease;
}

.serverList li:hover .status .extended
{
    opacity: 1;
}


.serverList li .history
{
    width: 9px;
    height: 10px;
    margin-bottom: 7px;
    color: #D0D0D0;

    /* animation */
    opacity: 0;
    margin-left: 0;
    transition: all 0.3s ease;
}


.serverList li:hover .history
{
    margin-left: 8px;
    opacity: 1;
}


.serverList li .history.green
{
    color: #009600;
}


.serverList li .history.red
{
    color: #C50000;
}


.serverList li .history:before
{
    font-size: 10px;
}


.serverList li .actionButtons
{
    float: right;
    margin-top: -3px;
}

.serverList li .actionButtons a
{
    margin-left: 5px;
}


@media all and (max-width: 733px)
{
    .serverList li
    {
        white-space: nowrap;
    }

    .serverList li div.name
    {
        width: 40%;
        margin-right: 16px;
    }

    .serverList li button.statusPill
    {
        margin-right: 8px;
        width: 34px;
        padding: 1px 3px;
    }

    .serverList li .history
    {
        display: none;
    }

    .serverList li .actionButtons
    {
        float: none;
        position: absolute;
        right: 0;
    }

    .serverList li .actionButtons a.details
    {
        display: none;
    }
}



/*
 * User List (Buddies, User Search, User History)
 */
.userList li img.flag
{
    width: 16px;
    height: 11px;
    margin-right: 8px;
    vertical-align: middle;
}


.userList li a.nickname
{
    width: 30%;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 8px;
}



.userList li button.statusPill
{
    width: 44px;
    margin-right: 2%;
    overflow: hidden; /* to cutoff the unknown string in the english version */
    font-size: 10px;
    vertical-align: top;
}


.userList li div.status
{
    white-space: nowrap;
    overflow: hidden;
    color: grey;
    width: 36%;
}


/* leaves space for the extended info (for example when an user is online on more then one server */
.userList li div.status a
{
    white-space: nowrap;
    overflow: hidden;
    width: 70%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.userList li .actionButtons
{
    float: right;
    margin-top: -3px;
}

.userList li .actionButtons a
{
    margin-left: 5px;
}



@media all and (max-width: 733px)
{
    .userList li
    {
        white-space: nowrap;
    }

    .userList li a.nickname
    {
        width: 35%;
    }

    .userList li button.statusPill
    {
        margin-right: 8px;
        width: 36px;
        padding: 2px 3px;
    }

    .userList li div.status
    {
        /*display: none;*/
    }

    .userList li div.status a
    {
        width: 95%; /* show (almost) fully since .extended is hidden */
    }


    .userList li div.status .extended
    {
        display: none;
    }


    .userList li .actionButtons
    {
        float: none;
        position: absolute;
        right: 0;
    }

    /* hide main button on mobile */
    .userList li .actionButtons .main
    {
        display: none;
    }

    /* but display delete button */
    .userList li .actionButtons .main.redHover
    {
        display: inline-block;
    }

}



/**
 * Pager
 */
.pagediv
{
    float: right;
}

.pagediv a:link, .pagediv a:visited
{
    margin-left: 2px;
}




/**
 * Messages
 */
.info, .notice, .approved, .alert, .note
{
    display: block;
    margin: 20px 0;
    padding: 13px 13px 13px 42px;
    border-radius: 8px;
    color: black;
}

.info .heading,
.notice .heading,
.approved .heading,
.alert .heading,
.note .heading
{
    font-size: 16px;
    color: black;
    margin-bottom: 6px;
    font-family: 'Roboto Condensed', sans-serif;
}


.info .heading.noText,
.notice .heading.noText,
.approved .heading.noText,
.alert .heading.noText,
.note .heading.noText
{
    margin-bottom: 0;
}


.info
{
    background: #e9eef3 url(../images/icons2/information.png) 13px 13px no-repeat;
    border: 1px solid #D1DEEA;
    color: #274f6b;
}

.info .heading
{
    color: #3d7aa6;
}

.notice
{
    background: #fefaea url(../images/icons2/error.png) 13px 13px no-repeat;
    border: 1px solid #F3EBD2;
    color: #635B41;
}

.notice .heading
{
    color: #B59240;
}

.approved
{
    background: #e3f3e1 url(../images/icons2/accept.png) 13px 13px no-repeat;
    border: 1px solid #B7E2AA;
    color: #276927;
}

.approved .heading
{
    color: #43A226;
}

.alert
{
    background: #fce4df url(../images/icons2/delete.png) 13px 13px no-repeat;
    border: 1px solid #F9C7C7;
    color: #774545;
}

.alert .heading
{
    color: #D84A3E;
}

.note
{
    background: #F5F4F4 url(../images/icons2/page_white_text.png) 13px 13px no-repeat;
    border: 1px solid #EAEAEA;
    color: #6D6D6D;
}

.note .heading
{
    color: #7D7D7D;
}




/**
 * buttons, specified by button tag or .button class
 */

/* firefox button fix for optical consistency with chrome */
button::-moz-focus-inner,
.button::-moz-focus-inner
{
    border:0;
    padding:0;
    margin:0;
}


/* remove button outline, but accessibility issue, better: colorize diferent */
button:focus,
.button:focus,
.buttonAlike:focus
{
    outline:0 !important;
}


button,
.button,
.buttonAlike
{
    font-size: 13px;
    background: white;
    padding: 2px 6px 2px 6px;
    border: 1px solid #CACACA;
    border-radius: 3px;
    color: #3A3A3A !important;
    /*min-width: 7%; !* das ist vermutlich nicht gut *!*/
    text-align: center;
    /*line-height: 1;*/
    /*min-height: 23px;*/
    min-width: 28px;
    vertical-align: middle; /* vertical alignemnt of this element to other elements */
    display: inline-block;
}


body.hasHoverSupport button,
body.hasHoverSupport .button,
body.hasHoverSupport .buttonAlike
{
    transition: all 0.2s ease;
}


/* left align the text in buttonAlike form elements */
select.buttonAlike,
input.buttonAlike,
textarea.buttonAlike
{
    text-align: left;
}


/* default button hover, and orange button */
button:active,
.button:active,
body.hasHoverSupport button:hover,
body.hasHoverSupport .button:hover,
button.orange,
.button.orange,
.buttonAlike.active
{
    color: black !important;
    background: #ffcc00;
    border: 1px solid #d78e00;
    cursor: pointer;
    font-weight: bold;
}


/* green button and forced greenHover:hover */
button.green,
.button.green,
.greenHover:active,
body.hasHoverSupport .greenHover:hover
{
    background: #00b800;
    border-color: #009b00;
    color: white !important;
    font-weight: bold;
}

/* red button, hover of green button and forced redHover:hover */
button.red,
.button.red,
button.green:active,
.button.green:active,
body.hasHoverSupport button.green:hover,
body.hasHoverSupport .button.green:hover,
.redHover:active,
body.hasHoverSupport .redHover:hover
{
    background: red;
    border-color: #c30000;
    color: white !important;
    font-weight: bold;
}


button.darkRed,
.button.darkRed,
.darkRed:active,
body.hasHoverSupport .darkRed:hover
{
    background: #780000;
    border-color: #3a0000;
    color: white !important;
    font-weight: bold;
}


/* for simple definition of small text sizes for buttons and .buttons */
button.small,
.button.small
{
    font-size: 12px;
}


/* to fix height jumping when flaticons get loaded */
button.smallIcon,
.button.smallIcon
{
    max-height: 24px;
    min-height: 24px;
    height: 24px;
}


/* for usage with flaticon classes, just an icon inside the button */
button.smallIcon:before,
.button.smallIcon:before
{
    font-weight: normal;
    font-size: 14px;
    position: relative;
    top: 0;
}


/* button with icon and text */
button.withIconAndText,
.button.withIconAndText
{
    padding-top: 2px;
}

button.withIconAndText:before,
.button.withIconAndText:before
{
    margin-right: 8px;
    position: relative;
    top: 0;
}


/* to make status pills possible without any hover effects */
button[disabled],
.button[disabled]
{
    pointer-events: none;
}


/**
 * addon rule for buttons, should be used together with the button class or button element and the disabled property
 */
.statusPill
{
    font-size: 12px;
    padding: 1px 7px 2px 7px;
    font-weight: bold;
    min-height: 16px;
}



/*
 * button group definition, taken from bootstrap
 */
.btn-group > button:not(:first-child):not(:last-child)
{
    border-radius: 0;
}

.btn-group > button:first-child:not(:last-child)
{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > button:last-child:not(:first-child)
{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group button + button
{
    margin-left: -1px;
}



/**
 * css text cutoff: single line
 */
.cutoff
{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
    vertical-align: top;
}

/* show text on hover */
.cutoff:hover
{
    white-space: normal;
}



/**
 * cutoff: multiline, five lines displayed
 */
.cutoffMultiline
{
    /*white-space: nowrap;*/
    max-height: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height 0.25s ease; /* fast collapsing animation */
}

/* fade to white in front of text */
/* http://stackoverflow.com/a/22809380 */
.cutoffMultiline:before
{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background: linear-gradient(rgba(255, 255, 255, 0.0) 40px, white);
    pointer-events: none; /* allows link clicking */
}

/* expansion of the multiline, animated, content limited to max height 1000px, overflow not visible, no other workaround with css, otherwise without animation */
.cutoffMultiline:hover
{
    max-height: 1000px;
    transition: max-height 1s ease; /* slow expand animation */
}

.cutoffMultiline:hover:before
{
    background: none;
}



/**
  * change text on hover, displays a label and a value, data is taken from data-attributes
  */
.hoverWithLabel, .hoverWithLabel:before, .hoverWithLabel:after
{
    display: inline-block;
}

.hoverWithLabel:before
{
    content: attr(data-label-normal);
}

.hoverWithLabel:after
{
    content: attr(data-value-normal);
}


.hoverWithLabel:hover:before
{
    content: attr(data-label-hover);
}


.hoverWithLabel:hover:after
{
    content: attr(data-value-hover);
}


/*
 * Columns
 */
.col-33
{
    display: inline-block;
    width: 33%;
    vertical-align: top;
    padding-right: 64px;
    padding-bottom: 64px;
}


.col-33 h3
{
    border-bottom: 1px solid #F1F1F1;
    margin-top: 0;
    padding-bottom: 6px;
    padding-left: 16px;
    margin-bottom: 12px;
}


.col-33 p
{
    margin: 0;
    padding: 0 0 0 16px;
}



/**
 * Helpers
 */

.noTopMargin
{
    margin-top: 0 !important;
}


/* div to clear after floating elements */
.floatClear
{
    clear: both;
}


/* to apply to divs with floated elements: self clearing div */
.clearFix:after
{
    content: " ";
    display: block;
    height: 0;
    clear: both;
}


.centralShout
{
    display: block;
    text-align: center;
    margin-top: 64px;
    margin-bottom: 64px;
}


.centralShout .heading
{
    font-size: 24px;
    color: #FFC300;
}


.subLevel
{
    margin-left: 30px;
}


.animOpacityShow
{
    transition: opacity 400ms;
    z-index: 2; /* higher z-index than the hidden element to be able to click it */
}

/* todo: display block would be needed here, but this kills the animation, do keyframe */
.animOpacityHide
{
    opacity: 0;
    transition: opacity 400ms;
    z-index: 1; /* lower z-index than the showed element */
}


.inline
{
    display: inline;
}


/**
 * Animations
 */

@keyframes heartBeat
{
    0% { width: 46px; height: 46px;}
    5% { width: 48px; height: 48px;}
    8% { width: 46px; height: 46px;}
    13% { width: 48px; height: 48px;}
    16% { width: 46px; height: 46px;}
}



/**
 * g2a ads: general rules
 */
.g2aProduct
{
    position: relative;
    display: inline-block;
    height: 100%;
}

.g2aProduct img
{
    width: 100%;
    box-shadow: rgb(136, 136, 136) 0 1px 3px, rgb(136, 136, 136) 0 -1px 3px;
}


.g2aProduct a.button
{
    width: 100%;
}



/**
 * 300x250
 */
.g2a300x250_brand img
{
    width: 50px;
    position: absolute;
    right: 0;
    bottom: 7px;
}

.g2a300x250_brand h3
{
    margin-top: 0;
    margin-bottom: 2px;
}


.g2a300x250_products
{
    clear: both;
    padding-top: 6px;
}


.g2a300x250_products .g2aProduct
{
    width: 69px;
    margin-left: 21px;
    margin-bottom: 5px;
}

.g2a300x250_products .g2aProduct a.button
{
    position: absolute;
    bottom: 0;
    left: 0;
    transition: none;
}


.g2a300x250_coupon
{
    line-height: 1;
    position: absolute;
    right: 0;
    bottom: 32px;
}


.g2a300x250_coupon .title
{
    font-size: 17px;
    display: inline-block;
    vertical-align: middle;
}


.g2a300x250_coupon .title .percentage
{
    margin-bottom: 2px;
}


.g2a300x250_coupon .title .code
{
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    border-top: 1px solid #FFC300;
    padding-top: 2px;
    color: black;
}


.g2a300x250_coupon a.code.button
{
    display: inline-block;
    font-size: 17px;
    margin-left: 12px;
    vertical-align: middle;
    transition: all 0.5s ease;
}


.g2a300x250_coupon a.code.button:hover
{
    color: #bcbcbc;
}


/**
 * 728x90
 */
.g2a728x90_brand
{
    display: inline-block;
    vertical-align: top;
}


.g2a728x90_brand img
{
    width: 58px;
}


.g2a728x90_brand h3
{
    margin-top: 0;
    margin-bottom: 6px;
}


.g2a728x90_products
{
    display: inline-block;
    padding-top: 2px;
    height: 100%;
}


.g2a728x90_products .g2aProduct
{
    vertical-align: top;
    width: 57px;
    margin-left: 24px;
}

.g2a728x90_products .g2aProduct a.button
{
    position: absolute;
    bottom: 0;
    left: 0;
    transition: none;
}


.g2a728x90_coupon
{
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
    margin-left: 23px;
    line-height: 1;

}


.g2a728x90_coupon .title
{
    font-size: 17px;
    display: inline-block;
}


.g2a728x90_coupon .title .percentage
{
    margin-bottom: 2px;
}


.g2a728x90_coupon .title .code
{
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    border-top: 1px solid #FFC300;
    padding-top: 2px;
    color: black;
}


.g2a728x90_coupon a.code.button
{
    display: block;
    font-size: 17px;
    margin-top: 3px;
    /*font-weight: normal;*/
    /*color: #D6D6D6;*/
    /*vertical-align: top;*/
    transition: all 0.5s ease;
}


.g2a728x90_coupon a.code.button:hover
{
    color: #bcbcbc;
    font-weight: normal;
}



/**
 * resp_lb
 * Responsive Leaderboard
 */
.g2a_resp_lb_brand
{
    position: absolute;
    left: 10px;
    vertical-align: top;
}


.g2a_resp_lb_brand img
{
    width: 58px;
}


.g2a_resp_lb_brand h3
{
    margin-top: 0;
    margin-bottom: 6px;
}


.g2a_resp_lb_products
{
    position: absolute;
    left: 68px;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 100%;
}


.g2a_resp_lb_products .g2aProduct
{
    vertical-align: top;
    margin-left: 22px;
}

.g2a_resp_lb_products .g2aProduct img
{
    width: auto;
    height: 100%;
    max-width: 80px;
    max-height: 120px;
}

.g2a_resp_lb_products .g2aProduct a.button
{
    position: absolute;
    top: 12px;
    left: 50%;
    width: 50px;
    transition: none;
    font-size: smaller;
    transform: rotate(90deg);
}


.g2a_resp_lb_coupon
{
    position: absolute;
    right: 10px;
    top: 0;
    margin-top: 2px;
    line-height: 1;

}


.g2a_resp_lb_coupon .title
{
    font-size: 10px;
    display: inline-block;
}


.g2a_resp_lb_coupon .title .percentage
{
    margin-bottom: 2px;
}


.g2a_resp_lb_coupon .title .code
{
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    border-top: 1px solid #FFC300;
    padding-top: 2px;
    color: black;
}


.g2a_resp_lb_coupon a.code.button
{
    display: block;
    font-size: 12px;
    margin-top: 3px;
    padding: 0;
    /*font-weight: normal;*/
    /*color: #D6D6D6;*/
    /*vertical-align: top;*/
    transition: all 0.5s ease;
}


.g2a_resp_lb_coupon a.code.button:hover
{
    color: #bcbcbc;
    font-weight: normal;
}



/**
 * 120x600
 */
.g2a120x600_brand img
{
    float: right;
    width: 39px;
    margin-top: 5px;
}

.g2a120x600_brand h3
{
    margin-top: 0;
    margin-bottom: 0;
}


.g2a120x600_products
{
    margin-top: 11px;
    margin-bottom: 9px;
    clear: both;
    padding-top: 2px;
    text-align: center;
}


.g2a120x600_products .g2aProduct
{
    width: 78px;
    margin-right: 5px;
    margin-bottom: 8px;
}


.g2a120x600_products .g2aProduct a.button
{
    position: absolute;
    bottom: 0;
    left: 0;
    transition: none;
}


.g2a120x600_coupon
{
    line-height: 1;
    text-align: center;
}


.g2a120x600_coupon .title
{
    font-size: 17px;
    display: inline-block;
    vertical-align: middle;
}


.g2a120x600_coupon .title .percentage
{
    margin-bottom: 2px;
}


.g2a120x600_coupon .title .code
{
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    border-top: 1px solid #FFC300;
    padding-top: 2px;
    color: black;
}


.g2a120x600_coupon a.code.button
{
    display: inline-block;
    font-size: 17px;
    transition: all 0.5s ease;
    vertical-align: middle;
    margin-left: 12px;
}


.g2a120x600_coupon a.code.button:hover
{
    color: #bcbcbc;
    font-weight: normal;
}