@charset "utf-8";
/* CSS Document */
@media only screen and (min-width: 800px) {
    body{
    	margin:0 auto;
    	color: #000;	
    	font-size:20px;
    	background-color:#000;
    	font-family: Helvetica, Sans-Serif;
    }	
    .content{
        width:75%;
    	margin:0 auto;
    	text-align:left;
    	max-width:1750px;
    	min-width:500px;
    }
    .content2{
        width:100%;
    	margin:0 auto;
    	text-align:left;
    	min-width:500px;
    	background-color:#FFF;
    }
    .content3{
        width:100%;
    	margin:0 auto;
    	text-align:left;
    	min-width:500px;
    	background-color:#000;
    }
    .indexcontent{
       width:100%;
       height:auto;
       margin:0 auto;
       background-color:#000;
       background: url(mmacage.jpg);
       background-position: center;
       background-repeat: no-repeat;
       background-size: 100% 100%;
    }
    .maincontent{
        width:90%;
    	margin:0 auto;
    	text-align:center;
    	max-width:1750px;
    	min-width:500px;
    	background-image: linear-gradient(to bottom right, #FFF, #333);
		height:auto;
    }
    .mainbuttons{
        border:4px solid #000;
        margin:5px 5px 5px 5px;
        font-size:25px;
        color:#000;
        cursor: pointer;
        background-color:#FFF;
        padding:10px;
    }
    .mainbuttons2{
        border:4px solid #000;
        margin:5px 5px 5px 5px;
        font-size:25px;
        color:#000;
        cursor: pointer;
        background-color:#6CF;
        padding:10px;
    }
    .newbuttons{
        width:75%;border:4px solid #000;font-size:25px;background-color:#FFF;padding:10px;cursor: pointer;
    }
    .newbuttons2{
        width:50%;border:4px solid #000;font-size:25px;background-color:#FFF;padding:10px;cursor: pointer;
    }
    .newbuttons3{
        border-style:inset; width:37.5%;;
    }
    .newbuttons4{
        width:25%;border:4px solid #000;font-size:25px;background-color:#FFF;padding:10px;
    }
    .newbuttons5{
        width:15%;border:4px solid #000;font-size:25px;background-color:#FFF;padding:10px;color:#000;;
    }
    .yourrosterleftmenu{
        width:35%;
        float:left;
    }
    .yourrosterrightmenu{
        width:65%;
        float:left;
    }
    .yourrosterleftmenu2{
        width:49%;
        float:left;
    }
    .yourrosterrightmenu2{
        width:49%;
        float:left;
    }
    .yourrosterleft{
        background-color:#FFF;
        Border: 5px solid #000;
        width:99%;
        margin-left:5px;
        margin-bottom:5px;
    }
    .yourrosterleft2{
        width:99%;
        margin-left:5px;
        margin-bottom:5px;
    }
    .yourrosterright{
        background-color:#f9f7f1;
        Border: 5px solid #000;
        width:95%;
        margin-right:5px;
        margin:0 auto;
    }
    .bookhouse{
        background-color:#C8C8CD;
        Border: Inset 5px;
        width:95%;
        margin:0 auto;
        text-align:center;
    }
    .bookhouse2{
        background-color:#8B8680;
        Border: Inset 5px;
        width:95%;
        margin:0 auto;
        text-align:center;
    }
    .bookhouse3{
        background-color:#736A62;
        Border: Inset 5px;
        width:95%;
        margin:0 auto;
        text-align:center;
    }
    .library {
        background:none!important;
        border:none; 
        padding:0!important;
        color:#000;
        cursor:pointer;
        font-weight: bold;
        font-family: Helvetica, Sans-Serif;
        font-size:18px;
    }
    .library2 {
        background:none!important;
        border:none; 
        padding:0!important;
        color:#005ce6;
        cursor:pointer;
        font-weight: bold;
        font-family: Helvetica, Sans-Serif;
        font-size:18px;
    }
    .library3 {
        background:none!important;
        border:none; 
        padding:0!important;
        color:#000;
        cursor:pointer;
        font-family: Helvetica, Sans-Serif;
        font-size:18px;
    }
    .notepad {
        width: 90%;
    }
    .clear{
	    clear:both;	
	}
	.dropdown1 {
	    width:35%;
	    font-size:14px;
	    font-weight:bold;
	}
	.dropdown2 {
	    width:85%;
	    font-size:14px;
	    font-weight:bold;
	}
	.dropdown3 {
	    width:75%;
	    font-size:14px;
	    font-weight:bold;
	}
	.button1 {
	    width:35%;
	    font-size:14px;
	    font-weight:bold;
	    text-align:center;
	    background-color:#005ce6;
	    color:#FFF;
	    padding:10px;
	}
	.fighterhead{
	    position:absolute;
        width: 23%;
        z-index: 75;
        top:1.5%;
        left:35%;
	}
	.fighterdamage{
	    position:absolute;
        width: 23%;
        z-index: 95;
        top:1.5%;
        left:35%;
	}
	.fighterfacialhair{
	    position:absolute;
        width: 23%;
        z-index: 85;
        top:1.5%;
        left:35%;
	}
	.fighterhair{
	    position:absolute;
        width: 34%;
        height: auto;
        z-index: 100;
        top:-4.5%;
        left:29%;
	}
	.fighterhair2{
	    position:absolute;
        width: 34%;
        height: auto;
        z-index: 100;
        top:-3%;
        left:29%;
	}
	.fighterbody{
	    position:absolute;
        width: 65%;
        z-index: 25;
        top:11%;
        left:16%;
	}
	.fightergloves{
	    position:absolute;
        width: 65%;
        z-index: 20;
        top:11%;
        left:16%;
	}
	.fightertattoo{
	    position:absolute;
        width: 65%;
        z-index: 30;
        top:11%;
        left:16%;
	}
	.fighterbody2{
	    position:absolute;
        width: 65%;
        z-index: 35;
        top:11%;
        left:16%;
	}
	.fighterlegs{
	    position:absolute;
        width: 62%;
        z-index: 50;
        top:40%;
        left:12%;
	}
	.fighterhat{
	    position:absolute;
        width: 45%;
        height: auto;
        z-index: 200;
        top:-1%;
        left:24%;
	}
	.fighterbelt{
	    position:absolute;
        width: 32%;
        z-index: 125;
        top:34%;
        left:32%;
	}
	.fighterbelt2{
	    position:absolute;
        width: 28%;
        z-index: 125;
        top:15.5%;
        left:26.5%;
	}
	.p4ptrophy{
	    position:absolute;
        width: 22%;
        z-index: 50;
        top:64%;
        left:72%;
	}
	.personalinformationright{
	    float: left;
	    width: 300px;
	    height: 500px;
	    position: relative;
	    z-index: 10;
	}
	fieldset {
        font-family: Helvetica, Sans-Serif;
        border: 5px solid #000000;
        background: #ddd;
        border-radius: 5px;
        padding: 15px;
    }

    fieldset legend {
        background: #000000;
        color: #fff;
        padding: 5px 10px ;
        font-size: 32px;
        border-radius: 5px;
        box-shadow: 0 0 0 5px #ddd;
        margin-left: 20px;
    }
	legend {
        margin:0 auto;
    }
    .toptab{
        text-align:right;
        margin-right:7.5%;
    }
    .mailfieldset{
        width:12%;
        margin:0 auto;
        background-color:#FFF;
        float: left;
    }
    .mailleft{
        background-color:#FFF;
        Border: 5px solid #000;
        width:18%;
        float: left;
    }
    .mailright{
        background-color:#f9f7f1;
        Border: 5px solid #000;
        width:78%;
        float: left;
    }
    .mailright2{
        float: left;
        width:15%;
        background-color:#FFF;
        height:600px;
        overflow:scroll;
    }
    .mailright3{
        width:65%;
        background-color:#FFF;
        float:left;
        height:600px;
        overflow:scroll;
    }
    .mailcontent{
        width:99%;
    	margin:0 auto;
    	text-align:center;
    	max-width:1750px;
    	min-width:500px;
    	background-image: linear-gradient(to bottom right, #FFF, #333);
		height:auto;
    }
    .mailpreviews{
        border-bottom:2px solid #000;
        border-top:2px solid #000;
        width:90%;
        background-color:#FFFFFF;
        max-width:175px;    
    }
	a.roster:link {color: #000; text-decoration: none; }
    a.roster:visited {color: #000; text-decoration: none; }
    a.roster:hover {color: #005ce6; text-decoration: none; }
    a.roster:active {color: white; } 
    
    a.roster2:link {color: #fff; text-decoration: none; border-right:4px solid #000; border-top: 4px solid #000; border-left: 4px solid #000; border-bottom: 4px solid #fff; background-color:#000; }
    a.roster2:visited {color: #fff; text-decoration: none; border-right:4px solid #000; border-top: 4px solid #000; border-left: 4px solid #000; border-bottom: 4px solid #fff; background-color:#000; }
    a.roster2:hover {color: #005ce6; text-decoration: none; border-right:4px solid #000; border-top: 4px solid #000; border-left: 4px solid #000; border-bottom: 4px solid #fff; background-color:#000; }
    a.roster2:active {color: white; } 
    
    a.roster3:link {color: #000; text-decoration: none; background-color: lightgreen; }
    a.roster3:visited {color: #000; text-decoration: none; background-color: lightgreen; }
    a.roster3:hover {color: #005ce6; text-decoration: none; background-color: lightgreen; }
    a.roster3:active {color: white; background-color: lightgreen; } 
    
    a.roster4:link {color: #000; text-decoration: none; background-color: lightblue; }
    a.roster4:visited {color: #000; text-decoration: none; background-color: lightblue }
    a.roster4:hover {color: #005ce6; text-decoration: none; background-color: lightblue; }
    a.roster4:active {color: white; background-color: lightblue; } 
    
    a.roster5:link {color: #000; text-decoration: none; background-color: grey; }
    a.roster5:visited {color: #000; text-decoration: none; background-color: grey; }
    a.roster5:hover {color: #005ce6; text-decoration: none; background-color: grey; }
    a.roster5:active {color: white; background-color: grey; } 
}
@media only screen and (max-width: 850px) {
    body{
    	margin:0 auto;
    	color:#000;	
    	font-size:20px;
    	background-color:#000;
    	font-family: Helvetica, Sans-Serif;
    }	
    .content{
        width:95%;
    	margin:0 auto;
    	text-align:left;
    	max-width:1750px;
    	min-width:500px;
    }
    .content2{
        width:100%;
    	margin:0 auto;
    	text-align:left;
    	min-width:500px;
    	background-color:#FFF;
    }
    .content3{
        width:100%;
    	margin:0 auto;
    	text-align:left;
    	min-width:500px;
    	background-color:#000;
    }
    .indexcontent{
       width:100%;
       height:auto;
       margin:0 auto;
       background-color:#000;
       background: url(mmacage.jpg);
       background-position: center;
       background-repeat: no-repeat;
       background-size: 100% 100%;
    }
    .maincontent{
        width:100%;
    	margin:0 auto;
    	text-align:center;
    	max-width:1750px;
    	min-width:500px;
    	background-image: linear-gradient(to bottom right, #ccc, #333);
    }
    .mainbuttons{
        border:2px solid #000;
        margin:5px 5px 5px 5px;
        font-size:25px;
        color:#000;
        cursor: pointer;
        background-color:#FFF;
        padding:10px;
    }
    .mainbuttons2{
        border:2px solid #000;
        margin:5px 5px 5px 5px;
        font-size:25px;
        color:#000;
        cursor: pointer;
        background-color:#6CF;
        padding:10px;
    }
    .newbuttons{
        width:100%;border:2px solid #000;font-size:25px;background-color:#FFF;padding:10px;cursor: pointer;
    }
    .newbuttons2{
        width:100%;border:2px solid #000;font-size:25px;background-color:#FFF;padding:10px;cursor: pointer;
    }
    .newbuttons3{
        border-style:inset; width:175%;
    }
    .newbuttons4{
        width:90%;border:2px solid #000;font-size:25px;background-color:#FFF;padding:10px;
    }
    .newbuttons5{
        width:95%;border:2px solid #000;font-size:25px;background-color:#FFF;padding:10px;color:#000;
    }
    .yourrosterleftmenu{
        width:99%;
        float:left;
    }
    .yourrosterrightmenu{
        width:99%;
        float:left;
    }
    .yourrosterleftmenu2{
        width:95%;
        float:left;
    }
    .yourrosterrightmenu2{
        width:95%;
        float:left;
    }
    .yourrosterleft{
        background-color:#FFF;
        Border: Inset;
        width:95%;
        margin-left:5px;
        margin-bottom:5px;
        Border: 5px solid #000;
    }
    .yourrosterleft2{
        width:95%;
        margin-left:5px;
        margin-bottom:5px;
        Border: 5px solid #000;
    }
    .yourrosterright{
        background-color:#f9f7f1;
        Border: Inset;
        width:99%;
        margin-right:5px;
        margin:0 auto;
        Border: 5px solid #000;
    }
    .bookhouse{
        background-color:#F8F9F9;
        Border: Inset;
        width:95%;
        margin:0 auto;
        text-align:center;
    }
    .bookhouse2{
        background-color:#FBEEE6;
        Border: Inset;
        width:95%;
        margin:0 auto;
        text-align:center;
    }
    .bookhouse3{
        background-color:#FEF9E7;
        Border: Inset;
        width:95%;
        margin:0 auto;
        text-align:center;
    }
    .library {
        background:none!important;
        border:none; 
        padding:0!important;
        color:#000;
        cursor:pointer;
        font-weight: bold;
        font-family: Helvetica, Sans-Serif;
        font-size:18px;
    }
    .library2 {
        background:none!important;
        border:none; 
        padding:0!important;
        color:#005ce6;
        cursor:pointer;
        font-weight: bold;
        font-family: Helvetica, Sans-Serif;
        font-size:18px;
    }
    .library3 {
        background:none!important;
        border:none; 
        padding:0!important;
        color:#000;
        cursor:pointer;
        font-family: Helvetica, Sans-Serif;
        font-size:18px;
    }
    .notepad {
        width: 90%;
    }
    .clear{
	    clear:both;	
	}
	.dropdown1 {
	    width:50%;
	    font-size:14px;
	    font-weight:bold;
	}
	.dropdown2 {
	    width:85%;
	    font-size:14px;
	    font-weight:bold;
	}
	.dropdown3 {
	    width:75%;
	    font-size:14px;
	    font-weight:bold;
	}
	.button1 {
	    width:35%;
	    font-size:14px;
	    font-weight:bold;
	    text-align:center;
	    background-color:#005ce6;
	    color:#FFF;
	    padding:10px;
	}
	.fighterhead{
	    position:absolute;
        width: 23%;
        z-index: 75;
        top:1.5%;
        left:35%;
	}
	.fighterdamage{
	    position:absolute;
        width: 23%;
        z-index: 95;
        top:1.5%;
        left:35%;
	}
	.fighterfacialhair{
	    position:absolute;
        width: 23%;
        z-index: 85;
        top:1.5%;
        left:35%;
	}
	.fighterhair{
	    position:absolute;
        width: 34%;
        height: auto;
        z-index: 100;
        top:-4.5%;
        left:29%;
	}
	.fighterhair2{
	    position:absolute;
        width: 34%;
        height: auto;
        z-index: 100;
        top:-3%;
        left:29%;
	}
	.fighterbody{
	    position:absolute;
        width: 65%;
        z-index: 25;
        top:11%;
        left:16%;
	}
	.fightergloves{
	    position:absolute;
        width: 65%;
        z-index: 20;
        top:11%;
        left:16%;
	}
	.fightertattoo{
	    position:absolute;
        width: 65%;
        z-index: 30;
        top:11%;
        left:16%;
	}
	.fighterbody2{
	    position:absolute;
        width: 65%;
        z-index: 35;
        top:11%;
        left:16%;
	}
	.fighterbelt{
	    position:absolute;
        width: 32%;
        z-index: 125;
        top:34%;
        left:32%;
	}
	.fighterbelt2{
	    position:absolute;
        width: 28%;
        z-index: 125;
        top:15.5%;
        left:26.5%;
	}
	.fighterlegs{
	    position:absolute;
        width: 62%;
        z-index: 50;
        top:40%;
        left:12%;
	}
	.fighterhat{
	    position:absolute;
        width: 45%;
        height: auto;
        z-index: 200;
        top:-3%;
        left:24%;
	}
	.p4ptrophy{
	    position:absolute;
        width: 22%;
        z-index: 50;
        top:64%;
        left:72%;
	}
	.personalinformationright{
	    float: left;
	    width: 300px;
	    height: 500px;
	    position: relative;
	    z-index: 10;
	}
	fieldset {
        font-family: Helvetica, Sans-Serif;
        border: 5px solid #000000;
        background: #ddd;
        border-radius: 5px;
        padding: 15px;
    }

    fieldset legend {
        background: #000000;
        color: #fff;
        padding: 5px 10px ;
        font-size: 32px;
        border-radius: 5px;
        box-shadow: 0 0 0 5px #ddd;
        margin-left: 20px;
    }
	legend {
        margin:0 auto;
    }
    .toptab{
        text-align:center;
        width:60%;
        margin-left:35%;
    }
    .mailfieldset{
        width:85%;
        margin:0 auto;
        background-color:#FFF;
        float:left;
    }
    .mailleft{
        background-color:#FFF;
        Border: 5px solid #000;
        width:18%;
        float: left;
    }
    .mailright{
        background-color:#f9f7f1;
        Border: 5px solid #000;
        width:78%;
        float: left;
        min-width:500px;
    }
    .mailright2{
        float: left;
        width:90%;
        background-color:#FFF;
        float:left;
        height:600px;
        overflow:scroll;
    }
    .mailright3{
        float: left;
        width:90%;
        background-color:#FFF;
        float:left;
        height:600px;
        overflow:scroll;
    }
    .mailcontent{
        width:99%;
    	margin:0 auto;
    	text-align:center;
    	max-width:1750px;
    	min-width:500px;
    	background-image: linear-gradient(to bottom right, #FFF, #333);
		height:auto;
    }
    .mailpreviews{
        border-bottom:2px solid #000;
        border-top:2px solid #000;
        width:90%;
        background-color:#FFFFFF;
    }
	a.roster:link {color: #000; text-decoration: none; }
    a.roster:visited {color: #000; text-decoration: none; }
    a.roster:hover {color: #005ce6; text-decoration: none; }
    a.roster:active {color: white; } 
    
	a.roster2:link {color: #fff; text-decoration: none; border-right:4px solid #000; border-top: 4px solid #000; border-left: 4px solid #000; border-bottom: 4px solid #fff; background-color:#000; }
    a.roster2:visited {color: #fff; text-decoration: none; border-right:4px solid #000; border-top: 4px solid #000; border-left: 4px solid #000; border-bottom: 4px solid #fff; background-color:#000; }
    a.roster2:hover {color: #005ce6; text-decoration: none; border-right:4px solid #000; border-top: 4px solid #000; border-left: 4px solid #000; border-bottom: 4px solid #fff; background-color:#000; }
    a.roster2:active {color: white; } 	
    
    a.roster3:link {color: #000; text-decoration: none; background-color: lightgreen; }
    a.roster3:visited {color: #000; text-decoration: none; background-color: lightgreen; }
    a.roster3:hover {color: #005ce6; text-decoration: none; background-color: lightgreen; }
    a.roster3:active {color: white; background-color: lightgreen; }
    
    a.roster4:link {color: #000; text-decoration: none; background-color: lightblue; }
    a.roster4:visited {color: #000; text-decoration: none; background-color: lightblue; }
    a.roster4:hover {color: #005ce6; text-decoration: none; background-color: lightblue; }
    a.roster4:active {color: white; background-color: lightblue; } 
    
    a.roster5:link {color: #000; text-decoration: none; background-color: grey; }
    a.roster5:visited {color: #000; text-decoration: none; background-color: grey; }
    a.roster5:hover {color: #005ce6; text-decoration: none; background-color: grey; }
    a.roster5:active {color: white; background-color: grey; } 
}