﻿html { height: 100%; }
body { margin: 0; padding: 0;}
body, form, input[type=text] { margin:0; padding:0; font-family:Verdana,​Arial,​Helvetica,​Geneva,​sans-serif; font-size:10pt;}

#map_canvas2 { 
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
                 
#header
{
    /*background-color:#99C9F0;
    background-image:url('../../images/logos/maplogo_99C9F0.png');*/
    
    background-color:#307FBF;
    background-image:url('../../images/logos/maplogo_307FBF.png');
    
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-position:0px 0px;
    background-repeat:no-repeat;
    border-bottom:2px dashed gold;
}


#LoadingDiv, #ZoomDiv
{
	color:White;
	padding:10px;
	background-color: rgba(0, 0, 0, 0.35);
    border-radius: 5px 5px 5px 5px;
    display:absolute;
    float:left;
    margin-left:45%;
    margin-top:5px;
}



/* The cartridge information balloon that pops up when a user clicks on a cartridge. */
.cinfo 
{
	font-family:Verdana,​Arial,​Helvetica,​Geneva,​sans-serif;
	font-size:10pt;
	white-space:nowrap;
	padding-right:10px;
	color:Gray;
}

.cinfo td { vertical-align:top; }

.cinfo a
{
	color:#00447C; text-decoration:none;
	transition:all 0.65s ease 0s;
}

.cinfo a:hover 
{
	color:gold;
}

.cinfo .icon 
{
	max-height:80px; max-width:80px;
	min-height:60px; min-width:60px;
	box-shadow:10px 10px 5px #CCCCCC;
}

.cinfo .poster
{
	display:inline-block;
	margin-right:10px;
	margin-bottom:10px;
}

.cinfo .clearfloat
{
	clear:both;
}

.cinfo .cname
{
	text-decoration:none;
	color:#006FA3;
	font-weight:bold;
	font-size:1.4em;
	display:block;
}

.cinfo .author, .cinfo .carttype, .cinfo .cartLength
{
	font-size:.9em;
	display:inline-block;
	padding-right:20px;
}

.cinfo .author 
{
	display:block;
	margin-bottom:10px;
}

.cinfo .carttype img, .cinfo .cartLength img
{
	height:14px; width:14px; margin-right:3px;
}

.cinfo .completionIcon 
{
	display:block;
	margin-top:-40px;
	/*margin-bottom:-10px;*/
}
.cinfo .completionIcon img
{
	width:30px; height:30px;
}

.rounded { border-radius: 15px 15px 15px 15px; }








/* USER PROFILE */

/* This is how we right-align the ProfileWidget div so we can accommodate all user name widths (without using jQuery) */
#ProfileWidgetContainer 
{ 
	position:relative;
	align:right;
	margin-top:4px;	/* From the top of the window */
    margin-right:40px;	/* From the right of the window */
	
    color: #FFFFFF;
    float:right;
    display:inline-block;
}

#ProfileWidget  
{
	/*width:310px;*/
	/*position:relative;*/
	
	
	padding-right:20px;
	background-color: rgba(0, 0, 0, 0.35);
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    font-size: 10px;
    
    
    white-space:nowrap;
    padding-top:4px;
    padding-bottom:3px;
}



#ProfileWidget p { margin-bottom:0px; margin-top:0px; }
#ProfileWidget .Avatar { float:left; padding-left:3px; max-height:30px;  max-width:30px; margin-bottom:3px; }
#ProfileWidget a, #ProfileWidget a:link, #ProfileWidget a:visited { color:#FFFFFF; text-decoration:underline; }
.SignedInText { margin-left:43px;  }
.SignedInText span { margin-bottom:2px; display:block; }

.NotSignedInText { padding: 10px 9px 0; font-size:1.2em; float:left; display:block; font-weight:bold; }
.NotSignedInLinks { padding:0 9px 9px; display:block; margin-top:35px; }