body
{
    padding : 0px;
    margin : 0px;
    height : 100%;
    font-size : 1em;
    background-color: #4e5162;
}

@media screen and (min-width:800px){

    .Big
    {
        display : block;
    }

    .Medium
    {
        display : block;
    }

    .Small
    {
        display : block;
    }

    .Small-only
    {
        display : none;
    }

    .Medium-only
    {
        display : none;
    }

    .Big-hide
    {
        display : none;
    }

    div.box{
        border-radius : 5px;
        border : 1px solid #ffffff;
        position : relative;
        display : inline-block;
        margin : 0.5em;
        vertical-align : top;
        text-align : left;
        min-width : 31%;
        max-width : 200px;
    }

    div#myGroups
    {
        float:left;
    }

}

@media screen and (min-width:600px) and (max-width:800px){

    .Big
    {
        display : none;
    }

    .Medium
    {
        display : block;
    }

    .Small
    {
        display : block;
    }

    .Small-only
    {
        display : none;
    }

    .Big-only
    {
        display : none;
    }

    .Medium-hide
    {
        display : none;
    }

    div.box{
        border-radius : 5px;
        border : 1px solid #ffffff;
        position : relative;
        display : inline-block;
        margin : 0.5em;
        vertical-align : top;
        text-align : left;
        min-width : 31%;
        max-width : 50%;
    }

    div#myGroups
    {
        float:left;
    }

    div#myInfos
    {
        float : right;
    }


}

@media screen and (max-width:600px){

    .Big
    {
        display : none;
    }

    .Medium
    {
        display : none;
    }

    .Small
    {
        display : block;
    }

    .Big-only
    {
        display : none;
    }

    .Medium-only
    {
        display : none;
    }

    .Small-hide
    {
        display : none;
    }

    div.box{
        border-radius : 5px;
        border : 1px solid #ffffff;
        position : relative;
        display : inline-block;
        margin : 0.5em;
        vertical-align : top;
        text-align : left;
        min-width : 97%;
    }

}

img
{
    border : none;
}

div
{
    display : block;
}

@media  {
    
}#userbar
{
    height : 2em;
    margin-top : -31px;
    display : block;
    background-color: #000;
    box-shadow: 2px 2px 2px #585858;
    position : fixed;
    top : 31px;
    width : 100%;
    z-index : 9;
}

#userbar a img
{
    max-width: 75%;
    max-height: 75%;
}

.textContainer
{
    background-color: #422821;
    color : #ffe7b6;
    width : 90%;
    margin: 50px auto auto;
    border-radius : 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding : 10px;
}
.textContainer a
{
    color : #ffe7b6;
}

#userbar #barContent
{
    margin: auto;
    height: 100%;
    float: right;
    display: inline-block;
}

.orange
{
    color : #ffa500;
}

div#barContent a {
    border: 1px solid #ffffff;
    margin-left : -0.2em;
    font-size : 1.5em;
    height : 1.25em;
    color: white;
    text-decoration: none;
    text-shadow: 2px 1px 2px #ffffff;
    display: inline-block;
}

div a img {
    vertical-align: -15%;
}

nav ul
{
    padding : 0px;
    list-style : none;
    line-height : 20px;
    text-align : left;
    width : 80%;
    margin: auto;
    background-color: #ffffff;
    opacity: 1;
    display : block;
    background-color: #ffffff;
    z-index : 8;
}

.smallTabs ul
{
    box-shadow: 2px 2px 3px #aaa;
    padding : 0px;
    background: #1d2028 url(mainMenu_bg.png);
    font-weight: bold;
    font-family : Arial;
    list-style-type: none;
    text-align : center;
}

.smallTabs ul li
{
    display : block;
    cursor : pointer;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    box-shadow: 1px 0px 1px #aaa;
    height: 20px;
    padding: 5px;
}

#banner
{
    display : block;
    max-width : 100%;
    background-image: url(feat_bg.png);
    margin-top : 2em;
    text-align: center;
}

#banner img
{
    height : auto;
    max-width: 100%;
    margin: auto;
    padding-bottom : 0.1em;
}

nav
{
    box-shadow: 2px 2px 3px #aaa;
    height : 40px;
    padding : 0px;
    background: #1d2028 url(mainMenu_bg.png);
    font-weight: bold;
    font-family : Arial;
}

nav li
{
    cursor: pointer;
    box-shadow: 1px 0px 1px #aaa;
    height : 20px;
    padding : 10px;
}

nav li:hover
{
    background-color : #FF9800;
}

nav a
{
    display : block;
    padding : 0px;
    color : #fff;
    text-decoration : none;
}

nav li
{
    float : left;
    border-right : 1px solid #fff;
    border-left : 1px solid #fff;
}

html>body nav li
{
    float : left;
}

nav li ul
{
    position : absolute;
    display : none;
    width : 144px;
    background-color : #1d2028;
    margin-top : 10px;
    margin-left : -10px;
}

nav ul li:hover ul
{
    display : block;
    box-shadow: 2px 2px 3px #000;
}

nav li ul li
{
    border-top : 1px solid #fff;
    float : none;
    margin-left : 0px;
    padding : 2px;
    box-shadow: 0px 0px 0px;
}

html>body nav li ul li
{
    border-top : 1px solid transparent;
}

nav li ul ul
{
    margin : -22px 0 0 144px;
    border-left : 1px solid #fff;
}

html>body nav li ul ul
{
    border-left : 1px solid transparent;
}

div#content
{
    background-color : #a14604;
    padding-top : 1px;
    min-height: 400px;
    box-shadow: 10px 10px 10px #000;
    margin-top : 0px;
    display : block;
}

footer
{
    background-color: #4e5162;
    min-height : 50px;
}

div.disclaimer
{
    background-color: #1d2028;
    color : #dddbd8;
    width : 97%;
    margin : auto;
    min-height : 50px;
    margin-top : 1em;
}

div.userInfo
{
    width: 300px;
    margin : 20px;
}

div.userInfo .header {
    background: url(img/usheet_headerLeft.png) no-repeat;
    height: 25px;
}

div.userInfo .footer {
    height: 13px;
    background: #4e5162 url("/design/img/usheet_footerLeft.png") no-repeat;
}

div.userInfo .footerRight {
    background: url(img/usheet_footerRight.png) no-repeat top right;
    overflow: hidden;
    color: white;
    height : 13px;
}

div.userInfo .headerRight {
    background: url(img/usheet_headerRight.png) no-repeat top right;
    padding-top: 2px;
    overflow: hidden;
    color: white;
    height : 25px;
}

div.userInfo .bgLeft {
    background: url(img/usheet_bgLeft.png) repeat-y;
}

div.userInfo table {
    width : 100%;
}

div.userScore {
    float : right;
    margin-right : 30%;
    margin-top : 100px;
}

div.userInfo {
    float : left;
}

div.userInfo td {
    width : 50%;
}

div.userInfo .tuserLink {
    text-align: center;
    background-color : #dddbd8;
    color : #feb500;
    width : 100px;
    padding : 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

div.userInfo .avatar {
    margin : 20px;
    max-height: 100px;
    max-width: 100px;
    -webkit-box-shadow: 0px 0px 2px black;
    box-shadow: 0px 0px 2px black;
}

div.userInfo .name
{
    float : left;
    margin-left : 8px;
    font-size : 11pt;
    font-weight: bold;
    white-space: nowrap;
    overflow : hidden;
    margin-top : 3px;
    font-family: Arial, sans-serif !important;
    text-align: left;
}

div.userInfo .title
{
    margin-right: 10px;
    margin-top : 5px;
    float : right;
    max-width: none;
    max-height: none;
    padding: 0px;
    text-decoration: none;
    color: inherit;
    font-family: Arial, sans-serif;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    background: transparent;
    border: 0px;
    outline: none;
    text-shadow: none;
    font-size: 9pt;
    font-style: italic;
    color : #feb500;
}

div.userInfo .title img
{
    vertical-align: -3px;
}

div.clear
{
    display : block;
    clear : both;
}

table.stat
{
    float : right;
}

table.gtable
{
    float : left;
}

table.gtable img
{
    max-width : 100px;
}

table.members img
{
    max-width : 20px;
    max-height : 20px;
}

div.ucard
{
    display : block;
    position : relative;
    background: url(img/ucard.png) no-repeat top right;
    width : 800px;
    height : 108px;
    margin: auto auto -70px;
    color : #ffffff;
    text-shadow: 2px 2px 2px #000;
    font-family: "Impact";
}

div.ucard div.inventory
{
    display : block;
    position : absolute;
    width : 224px;
    height : 96px;
    left : 237px;
    top : 9px;
}

div.ucard img.avatar
{
    display : block;
    position : absolute;
    width : 65px;
    height : 65px;
    left : 83px;
    top : 36px;
}

div.ucard img.tidLink
{
    display : block;
    position : absolute;
    left : 28px;
    top : 38px;
}

div.ucard div.uname
{
    display : block;
    position :absolute;
    top : 12px;
    left : 117px;
    height : 30px;
}

div.ucard div.runes
{
    display : block;
    position :absolute;
    top : 14px;
    left : 518px;
    height : 32px;
}
div.ucard div.cart
{
    display : block;
    position :absolute;
    top : 44px;
    left : 518px;
    height : 32px;
}

div.ucard div.items
{
    display : block;
    position :absolute;
    top : 74px;
    left : 518px;
    height : 32px;
}

div.ucard div.islands
{
    display : block;
    position :absolute;
    top : 14px;
    left : 590px;
    height : 32px;
}

div.ucard div.monsters
{
    display : block;
    position :absolute;
    top : 74px;
    left : 590px;
    height : 32px;
}

div.ucard div.inventory img
{
    width : 30px;
}
div.ucard div.inventory img.star
{
    width : 16px;
    position : relative;
    bottom: 18px;
    left : 18px;
    opacity : 0.75;
}
div.ucard div.inventory div.item
{
    width : 32px;
    height : 32px;
    margin : 0px;
    float : left;
}

div.stats
{
    margin : 1em;
    width : 100%;
}

div.gmembers
{
    display : block;
    margin : 5px;
}

div.memberBox
{
    float : left;
    margin : 3px;
    width : 40px;
    height : 40px;
    border : 1px solid #ffffff;
    vertical-align: middle;
    display : table-cell;
}

div.gmembers div.avatar img
{
    max-height : 40px;
    max-width: 40px;
}

div.gmembers div.avatar
{
    width : 30px;
    height : 30px;
    display : table-cell;
}

div.title{
    position : relative;
    text-align: center;
    width : 210px;
}

div.title span{
    border-radius : 5px;
    border : 1px solid #a14604;
    color : #a14604;
    position : absolute;
    top : -10px;
    left : 10px;
    padding : 2px;
    font-size : 10px;
    background-color : #ffffff;
}

div.groupMin
{
    border : 1px solid #ffffff;
    max-width : 95%;
    display : block;
    margin : 10px;
    text-align: center;
    vertical-align: middle;
}

div.groupMin img
{
    max-width : 100%;
}

div.groupBanner
{
    max-height: 300px;
    max-width : 100%;
    overflow: hidden;
    text-align: center;
    margin: 0px auto -55px;
}

div.groupBanner h1
{
    height : 40px;
    font-size : 2em;
    width : 80%;
    margin: auto auto 5px;
    border : 5px outset #ffffff;
    background-color: #422821;
}

div.groupBanner img
{
    margin : auto;
    max-width : 100%;
    background-color: #422821;
}