/****************************/
/* Column Layout Stylesheet */ 
/****************************/

/* colors definition:

light blue (nav buttons, body background) : #E7F1F8
lighter blue (panel background): #f7fcfe
dense blue (active buttons, borders): #84a2d4 
medium dard blue (findStep): #6373B5
dark blue (bolded text); #4d5aaf

orange (button hover): #FFA826
orange (user name):  #FF8429 (was #f08300)
orange light (banter text): #FF9C4A

green (links): #218429

dark grey (text): #666

purple medium (welcome dialog background): #9C7BBD
purple medium-dark (user display name ): #B552AD
purple dark (greeting, signout, mymap header): #7B52A5
lila (Join button hover): #DE5AAD
lila light: #E78CC6 (banter text)

gold (app title) : #e6b422
gold (brighter, button hover) :#fcc800
gold brown (display name): #a16d5d
*/


html,body,form{margin:0;padding:0;
/* \*/
  height:100%;   
/* Last height declaration hidden from Mac IE 5.x */
}


body {background:#E7F1F8;color: #666;font: 71.999% Sans-serif, Arial;}	 

#superWrapper {width:100%;height:100%;}

/* app container */ 
#wrapper{width:100%;height:100%;/*border:1px solid #000000; */}

.inputText {font-family: Verdana, Arial, Sans-Serif;font-size:95%;}    

/* Site branding */
#appTitle { z-index:4; position:absolute; top:12px;left:17px; color: #e6b422; font-weight:bold;
         font: 280% Verdana, Arial, sans-serif, Helvetica; }

.smallTitle {color:#84a2d4;}

#banterText { position:absolute; width:100%; top:5px; text-align:center; font: bold 120% Arial, Sans-serif; color:#e6b422; }

#greeting {z-index:4;position:absolute;top:75px;left:20px;font: bold 115% Arial, Sans-Serif;color:#84a2d4;}   
#greeting a {text-decoration:none;color:#84a2d4;}
#greeting a:hover {color:#7B52A5;}

#divLogOut {z-index:4;position:absolute;top:75px;right:25px;font: bold 115% Arial, Sans-Serif;display:none;}  

#divLogOut a{ text-decoration:none; color:#84a2d4;}
#divLogOut a:hover{color:#7B52A5;}


#logo {z-index:8;position:absolute;top:2px;left:20px}	
 
/* Menu bar buttons */ 
div#menu{float:left;width: 100%;padding-top:74px;padding-bottom:3px;background: white}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{margin-left:270px;width:850px}
ul#nav li{float:left;margin-right: 3px;text-align: center;}
ul#nav a{float:left;width:14em;padding:4px 0;background:#E7F1F8;text-decoration:none;color:#666; font-weight:bold; font-size:106%}
ul#nav a:hover{background: #fcc800;color: #FFF;}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #84a2d4;color: white;}

.navIcon {vertical-align:middle;padding-right:5px; text-decoration:none; border:0px;}
.tinyIcon {margin-left:10px;}

/* Menu bar buttons */ 
div#menu1{padding-bottom:20px;background: white; text-align:center;}
ul#nav1,ul#nav1 li{list-style-type:none;margin:0;padding:0}
ul#nav1 li{float:left;margin-right: 3px;text-align: center;}
ul#nav1 a{float:left;width:3em;padding:4px 0;text-decoration:none;background: #84a2d4;color: white; font-weight:bold; font-size:106%}
ul#nav1 a:hover{background: #fcc800;color: #FFF;}
ul#nav1 li.activelink a,ul#nav li.activelink a:hover{background: #84a2d4;color: white;}

/* button styles */

.divBut {text-align:center;position:relative;background:transparent;
         clear:both;  /*needed for Firefox */  
/*padding-bottom:20px;  this eliminates nifty corners next to the button on a blue background (ex: right pane) */
}

.but{padding: 2px 5px; margin-right: 3px; color:white; background: #84a2d4;     /* anchor <a> needs to float left for firefox correct display */
     width:4em; text-decoration:none; text-align:center; font-weight:bold; font-size: 110%;}    
.but:hover{background: #fcc800;}

.tempButton {font-size: 105%; color:#84a2d4;}

.link {font-family: Verdana, Arial, Sans-Serif;font-size: 10px;text-decoration:none;color: #218429;font-weight:normal;}    
.link:hover {text-decoration:underline;color:#218429;}

.update {color:#84a2d4; padding-top:7px; font-family:Verdana; font-weight:bold; font-size:80%;}
.update span {font-size:95%; color:ThreeDShadow; font-weight:normal; font-family:Arial, Sans-Serif;}

.loadingDiv{padding:10px;text-align:center;}
.loadingImg{margin-right: 5px; vertical-align:middle;}

/* Container for the map */
#ctner{margin:0 0 0 0px;width:100%;height:80%;z-index:1; clear:both;}
 
#mapDashboard{position:relative; float:right;bottom:65px;width:247px;z-index:5;} 

#ftr {/*position:absolute;*/z-index:1;width:100%;height:100px;background:white;text-align: center;padding-top: 10px;}

#ftr a {text-decoration:none; color:#666;}
#ftr a:hover {text-decoration:underline;}

#ftrPinDisclaimer {margin-bottom: 8px; color:#84a2d4; font-family:Verdana, Arial, Sans-Serif;font-size:90%;}

.leftPane{
 position:absolute;
 top:110px;
 left:8px;
 z-index:5;
 background: #84a2d4; /*#EAA000; */  
 padding:2px;   /*border width of the pane */
 padding-top:0px;
 /*background:white;
 color: #333333;
 border:1px solid #000000;
 padding:3px;
 /*display:none;*/
 }
 
 .centerPane{
 position:absolute;
 left: 325px;
 top: 150px;
 z-index:5;
 background: #84a2d4; /*#EAA000; */  
 padding:2px;   /*border width of the pane */
 padding-top:0px;
 /*background:white;
 color: #333333;
 border:1px solid #000000;
 padding:3px;
 /*display:none;*/
 }

.paneTitleDiv{text-align:center; }  

.paneTitle{color:white;padding-top:3px;padding-bottom: 3px;padding-left: 15px;font-weight:bold;/*font-family:  Verdana, Arial, Sans-Serif;*/font-size: 120%; }

.closeBut
{
float:right;
text-decoration:none;
color:#E7F1F8;
padding-top:2px;
padding-right:4px;
font-weight:bold;
font-family:  OCR A Extended, Arial Rounded MT Bold, Arial, Sans-Serif;
font-size: 140%; 
}
.closeBut:hover{color:white;}
  
.closeInfoBut
{
float:right;
text-decoration:none;
color:#84a2d4;
margin-top:-8px;
margin-right:-2px;
margin-left:5px;
font-weight:bold;
font-family:  OCR A Extended, Arial Rounded MT Bold, Arial, Sans-Serif;
font-size: 140%; 
}
.closeInfoBut:hover{color:#4d5aaf;}

.paneBody
{
 background-color:white;   /*older light blue: #E7F1F8, newer light blue (lighter) #f7fcfe */ 
 padding-left: 10px;
 padding-right:10px;
 padding-bottom:12px;
 padding-top:10px;
 /*font-family:  Verdana, Arial, Sans-Serif;
 font-size: 11px;*/
}


.rightPane
{
 position:absolute;
 top:110px;
 right:7px;
 width:250px;
 z-index:5;
 background: #e6b422; /*#52B552 #7BC66B (green);#E7F1F8; #EAA000; */  
 padding:2px;   /*border width of the pane */
}

#rightPaneContent
{
  background: white;/*#E7F1F8;*/
}

#rightPaneTitle
{
  font-size:130%;
  font-weight:bold;
  text-align:center;
  color: white;/*#4d5aaf;*/   
}   

#welcomePane{display:none;z-index:4;}
#welcomePane div.paneTitle {background:transparent;color:white;font-weight:bold}
#welcomePaneTitleA {color:white;}

#rightPaneText
{
   font-size:110%;
   /*padding-top: 5px;*/
}

#rightPaneText ul {margin:0px; padding: 10px 10px 10px 28px;}
#rightPaneText ul li{padding-bottom: 3px;color:#e6b422;}
#rightPaneText ul li span{color:#666;}

#rightPaneBut{background-color:#e6b422;}
#rightPaneBut:hover {background-color:#fcc800;}

.UIText
{
 font-family:Arial, Sans-Serif;
 font-size: 11px; 
}


#divBox
{
 display:none;
 z-index:15;
 left: 350px;
 top: 200px;
 font: 105% Arial, sans-serif;

}

#divBoxContent
{
  text-align:center;

}

#divPhotoBox
{
 width: 325px;
 display:none;
 z-index:9;
}

#divPhotoBoxContent
{
 text-align:center;
}


#joinPane {width: 280px; display:none; z-index:6;}

#joinPaneContent {padding-left:15px;padding-top:5px;padding-right:15px;}

#joinTextSafe {text-align:center;}

#joinEmail{ width:140px; }
#joinPassword{width:140px;}
#joinPasswordRepeat{ width:140px; }
#joinDisplayName{width:140px;}

#joinPaneContent2{display:none;}
#newUserLoc{margin-left:10px; width:140px}

#joinTOUdiv {padding: 5px 0px;}
#joinTOUdiv a {text-decoration:none; color:#218429}
#joinTOUdiv a:hover {text-decoration:underline;}


#loginPane
{
 width:450px; 
 display:none;
 z-index:6;
}

#loginEmail{ width:140px; }
#loginPassword{width:140px;}

#loginBut
{
    clear:none;  /* cancels clear:both from .divBut, otherwise shows in the middle of the sign-in/join pane  */
}

#managePhotoPane
{
 width:350px; 
 display:none;  
}


#notRegistered {float:right;padding:5px 10px; width:180px; background:#E7F1F8; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#f7fcfe', startColorstr='#E7F1F8', gradientType='0');}
#notRegisteredTitle {font-weight:bold; color: #e6b422; padding-top:5px; padding-bottom:5px;padding-left:3px;}
#notRegisteredText {padding-left:3px;}

#forgotPwdLink
{ 
    text-align:right;

 }
 

#forgotPwdLink a
{
    padding-right:15px;    

 }
 
.icon
{
    vertical-align:middle; 
    margin-left:5px;
    margin-right:5px;
}


#profilePane
{
 width:405px; 
 display:none;

}

#sendToFriendPane
{
 width:305px; 
 display:none;
 z-index:6;
}

#forgotPasswordPane
{
 width:280px; 
 display:none; 
}

#FPemail {width:200px;}
#FPtext {text-align:center;}
#FPemailDiv {text-align:center;}

#feedbackPane {width: 270px; display:none;}
#feedbackIntro{padding: 4px 7px 0px 7px;}
#feedbackText {width: 230px; margin-left:7px;} 

#touPane {width: 400px; display:none;}
#touTitle {margin-left: 7px}
#touContent {padding: 0px 7px 7px 7px; height:400px; overflow:auto;} 

#privacyPane {width: 400px; display:none;}
#privacyTitle {margin-left: 7px}
#privacyContent {padding: 0px 7px 7px 7px; height:400px; overflow:auto;} 

#locationPane {width: 400px; display:none;}
#newLocation {margin-left:10px; width:300px}

#mbrPane {display:none;width:120px;z-index:3;}
.mbrBlockDiv {width: 100px; margin-bottom:5px; overflow:hidden;}
.mbrPhoto { vertical-align:middle; border:0px;}
.mbrDisplaySpan {padding-left:5px; font:110%; font-weight:bold;}