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

@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 {

    .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;
    }

    .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);
        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: #ff0000 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: #3928e3;
    }

    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: #7390de url(content_bg.png);
        padding-top: 1px;
        min-height: 400px;
        box-shadow: 10px 10px 10px #000;
        margin-top: 0px;
        display: block;
    }

    .tabs {
        margin-left: 0px;
        margin-bottom: 0px;
    }

    .tabs li {
        list-style: none;
        display: inline;
    }

    .tabs a {
        padding: 5px 10px;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        background: #1d2028 url(mainMenu_bg.png);
    }

    .tabs a.active {
        background: #a14604;
        color: #000;
    }

    .tabC {
        background: #a14604;
        margin-top: 0;
    }

    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.clear {
        display: block;
        clear: both;
    }

    div.user-card
    {
        background-image: url('/design/avatar-bg.png');
        height : 200px;
        width : 350px;
        margin : auto;
        margin-top : 10px;
        text-align : left;
    }

    div.user-card img.avatar
    {

        margin-left : 30px;
        margin-top : 50px;

    }

    div.user-card img.miiverse
    {
        width : 57px;
        height : 48px;

        margin-left : 30px;
        margin-top : 50px;

    }

    div.user-card div.nickname
    {

        margin-left : 50px;

    }

    div#left
    {
        float : left;
        text-align : center;
        min-width : 50%;
    }

    div#right
    {
        float : right;
        min-width : 50%;
        text-align : center;
        margin : auto;
    }

    div.title_left{

        background-image: url('/design/title_border.png');
        background-repeat: repeat-y;
        text-align: center;
        max-width : 75%;
        margin : auto;
        margin-top : 1em;
        font-size : 2em;

    }
    div.title_right{

        background-image: url('/design/title_border.png');
        background-repeat: repeat-y;
        background-position: right;

    }
    div.title_up{

        background-image: url('/design/title_border.png');
        background-repeat: repeat-x;
        height : 16px;

    }
    div.title_down{

        background-image: url('/design/title_border.png');
        background-repeat: repeat-x;
        background-position: bottom;
        height : 16px;

    }
    div.title_content
    {
        margin-left: 16px;
        margin-right : 16px;
        background-color : #e19e5c;
    }

    div.tagtitle_left{

        background-image: url('/design/block_border_left.png');
        background-repeat: repeat-y;
        text-align: center;
        min-width: 5%;
        max-width : 80%;
        height : 48px;
        margin : auto;
        margin-top : 1em;
        font-size : 1em;

    }
    div.tagtitle_right{

        background-image: url('/design/block_border_right.png');
        background-repeat: repeat-y;
        background-position: right;

    }
    div.tagtitle_up{

        background-image: url('/design/block_border_top.png');
        background-repeat: repeat-x;
        height : 3px;

    }
    div.tagtitle_down{

        background-image: url('/design/block_border_bottom.png');
        background-repeat: repeat-x;
        background-position: bottom;
        height : 3px;

    }
    div.tagtitle_content
    {
        margin-left: 12px;
        margin-right : 12px;
        height : 42px;
        font-size: 2em ;
        background-color : #fc9838;
    }

    div.cattitle_left{

        background-image: url('/design/hblock_border_left.png');
        background-repeat: repeat-y;
        text-align: center;
        min-width: 5%;
        max-width : 40%;
        height : 48px;
        margin : auto;
        margin-top : 1em;
        font-size : 1em;

    }
    div.cattitle_right{

        background-image: url('/design/hblock_border_right.png');
        background-repeat: repeat-y;
        background-position: right;

    }
    div.cattitle_up{

        background-image: url('/design/hblock_border_top.png');
        background-repeat: repeat-x;
        height : 3px;

    }
    div.cattitle_down{

        background-image: url('/design/hblock_border_bottom.png');
        background-repeat: repeat-x;
        background-position: bottom;
        height : 3px;

    }
    div.cattitle_content
    {
        margin-left: 9px;
        margin-right : 9px;
        height : 42px;
        background-color : #c84c0c;
        display : block;
    }

    div.cattitle_content img
    {
        float : left;
        margin-top : 5px;
        margin-left : 5px;
    }

    div.cattitle_content .catname
    {
        margin-left : 5px;
        vertical-align: middle;
        height : 48px;
        line-height : 48px;
    }

    div.miiverse-embeded
    {
        margin : auto;
        margin-top : 50px;
        max-width : 500px;
    }

    div#gameSetup
    {
        display: inline-block;
        width : 75%;
        align : center;
        margin : auto;
        margin : 10px;
    }

    div#gameSetup .id
    {
        height : 100%;
        line-height : 50px;
        background-color : gray;
        padding-left : 10px;
        padding-right : 10px;
        border-style: inset;
        border-width: 5px;
    }

    div#theme-info
    {
        background-color : white;
        padding : 5px;
        width : 143px;
        height : 43px;
        border-style: outset;
        border-width: 5px;
        float : left;
    }

    div#theme-info .theme
    {
        margin-top : 5px;
        margin-bottom : 6px;
    }

    div#theme-info .primary
    {
        margin-top : 3px;
        margin-bottom : 3px;
    }
    div#theme-info .secondary
    {
        margin-top : 3px;
        margin-bottom : 3px;
    }

    div#stage-desc
    {
        background-image: url('/design/desc-bg.png');
        width : 300px;
        height : 300px;
        align : center;
        margin : auto;
        text-align : left;
    }
    div#stage-desc #text-desc
    {
        margin : 3px;
    }

    div.desc-dummy
    {
        height : 75px;
    }

}