/*

Colors:
    Header Grey: 4d4a4d
    Dark Grey: 5f5d5f
    Blue:           #3a809b
    Red:            #be5a19
    Grey:           #6b6967
    Pale grey:      #f8f6ed
    Beige:          #fcfedd
    Facebook blue:  #3b5998


*/

/*********************************************
                Site-wide 
*********************************************/
/* Site-wide Elements */
 * {margin: 0;}

html, body { height:100%; /**/	font-family:Arial, Helvetica, sans-serif; font-size:12px; }

a {text-decoration: none; color: #3b7ebd;}
a:hover {text-decoration: underline;}

ol { counter-reset: item }
li { display: block; }

/* Clears/utilities */
.clearboth { clear:both; }
.clearleft { clear:left; }
.clearright { clear:right; }

/* Generic Style Classes */
.wrapper { min-height:100%; height:auto !important; height:100%; margin:0 auto -3.7em; /**/ }
.horizontalLine { clear:left; height:1px; width:100%; margin:5px 0px; 
                  border:0px; background:#e1e1e1; }
.horizontalLine_grey { clear:left; height:1px; width:100%; margin:5px 0px; 
                       border:0px; background:grey; }
.horizontalLine_black { clear:left; height:2px; width:100%; margin:80px 0px 0 0; 
                        border:0px; background:black;}
.bold { /**/ font-weight:bold; }
.push { height: -3.7em; /**/ }
.headerLarge { font: 24px Helvetica, Arial, sans-serif; }
.headerLargeText { float:left; margin-bottom: 10px;
                   font:30px "raleway", Helvetica, sans-serif;text-transform: uppercase; }
.headerMed { /**/ font-size:16px; font-weight:bold; }
.headerMed2 { /**/ font-size:16px; font-weight:bold; }
.numeral { float:left; margin:0 5px 0 0; /**/ font-size:18px; }
.shadow {
  /* offset left, top, thickness, color with alpha */
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  /* IE */
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  /* slightly different syntax for IE8 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
.innerShadow { 
    border: 1px solid #d4d4d4; padding:5px;  
    -moz-box-shadow: inset 2px 2px 5px #e3e2e2; /* for Firefox 3.5+ */
    -webkit-box-shadow: inset 2px 2px 5px #e3e2e2; /* for Safari and Chrome */ 
    box-shadow: inset 0 0 10px #e3e2e2; /* CSS 3 Spec */
}
.radius5 { /**/ -moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px; }
.buttonGradient {
    background: #DDD; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#DDD'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #DDD); /* for firefox 3.6+ */ 
}
x:-moz-any-link, x:default { position:absolute; top: 8px; right: 0px; /**/ } /* fuck you firefox */

/***************** CSS Tooltip *****************/
a.tooltip span { margin-left:0px; width:136px; margin-top:-25px;
                 font-size:12px; padding:5px 7px; border:1px solid #ccc; display:none;
                 -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; }
a.tooltip:hover span{ position:absolute; 
                      background:black; border:1px solid #cccccc; color:white; display:inline;
                      opacity:0.4;filter:alpha(opacity=40);}


/**************************************************
*               Homepage - Base.html              *
***************************************************/

/********************* Index Base Header ***************/
div#indexHeader { height: 65px; /**/ background-color:white; color:grey; font-family:Arial, Helvetica, sans-serif; }
div#indexHeader .error { position:relative; right:340px; top:-28px; width:420px; float:left;
                      background-color:#fdf9d9; border:1px solid #ece59b; color:#5f5d5f; padding:5px 5px 5px 8px; }
div#indexHeader .contain { height: 65px; /**/ border-bottom: 2px solid black; }
div#indexHeader .background { margin-top:-9px; } 
div#indexHeader .logo { margin-top: 12px; margin-left: -2px; /**/ }
div#indexHeader .loginLinks { float:right; text-align:right; margin:26px 0 0 0; 
                           color:black; font-family: georgia; }

/***************** Index Base Footer *******************/
div#indexFooter { height:56px; clear:both; height: -3.7em;
                  background:black; font-size:14px; border-top:3px solid #878587; font-family:georgia; } 
div#indexFooter a { /**/ color:#E9E9E9; text-decoration:none; } 
div#indexFooter a:hover { /**/ color:white; text-decoration:underline; } 
div#indexFooter .name { margin-top:20px; /**/ }
div#indexFooter .links { margin-top:20px; /**/ font-family:georgia; text-align:right; font-size:14px; }
div#indexFooter .links > div { float:right; margin:0 0 0 55px; /**/ }


/**************************************************
*           Homepage - Index.html                 *
***************************************************/

/***************** Index Content ******************/
div#indexContent { height:100%; }

/***********  Index Page Call to Action ***********/
div#indexActionCall { margin-top:40px; margin-bottom:45px;
                      font-size:23px; font-weight:bolder; text-shadow:#e2e1e1 0px 1px; }
div#indexActionCall .header { margin-left: 2px; margin-bottom: 10px; 
                              color:black; font-weight: normal; font-size: 26px; font-family: georgia; }
div#indexActionCall .featureListContain { /**/ padding:5px 0 0 0; }
div#indexActionCall .featureList { height: 20px;
                                   color:grey; font-size:16px; font-weight:normal; padding:0 0 0 3px; text-shadow:none; }
div#indexActionCall .actionCall { margin-top:15px; margin-left:3px;
                                  color:black; font-family:georgia; font-size:16px; font-weight:normal }
div#indexActionCall .loginButtonContain { margin-top: 20px; margin-left: 5px; /**/ }
div#indexActionCall .button { cursor:pointer; float:left; width:138px; /**/ }
div#indexActionCall .left { margin-left:-3px; /**/ }
div#indexActionCall .right {  margin-left:10px; margin-top:2px; /**/ }
div#indexActionCall .makePrivate input { float:left; margin-left:0px; margin-top:15px; /**/ }
div#indexActionCall .makePrivate span { font-size:11px; font-weight:normal; float:left; margin-top:17px; margin-left:4px;
                                        color:#5f5d5f; }

/***********  Index Page Example Map Vis ***********/
div#indexExampleMap { margin-top: 40px; /**/ font-size:23px; font-weight:bolder; text-shadow:#e2e1e1 0px 1px; }
div#indexExampleMap .exampleContain { width: 500px; margin-top: 0px; margin-left: 5px; 
                                      border: solid 2px #ccc;
                                      -moz-border-radius: 2px;-webkit-border-radius: 2px; border-radius: 2px; }
div#indexExampleMap .exampleView a { float:right; margin: 5px -50px 0 0; /**/ font-weight:normal; font-size:14px; text-shadow:none; }

/***********  Index Page New Feature Promo ***********/
div#indexNewFeatures { margin:10px 0 10px 0; float:left; width:290px;
                       font-size:23px; font-weight:bolder; text-shadow:#e2e1e1 0px 1px; }
div#indexNewFeatures .header { height: 37px; width:290px; float:left; margin-top:7px; margin-bottom:10px;
                               color:black; border-bottom:2px solid black; font-family:georgia; font-size:18px; 
                               font-weight:normal; text-shadow:none; }
div#indexNewFeatures .featureList { margin-top:10px; width:300px; float:left;
                                    font-size:14px; text-shadow:none; font-weight:normal; color:#5F5D5F; font-family:georgia; }

/***********  Index Page Mentions Promo ***********/
div#indexMentions { margin:10px 0px 10px 45px; float:left; width:290px; /**/ }
div#indexMentions .header { height:37px; width:290px; float:left; margin-top:7px; margin-bottom:3px;
                            color:black; border-bottom:2px solid black; font-family:georgia; font-size:18px; font-weight:normal; text-shadow:none; }
div#indexMentions .arrow { margin:3px 0 -4px 5px; /**/ }
div#indexMentions .mentionList { width:274px; float:left; margin-top:4px; font-size:14px; 
                                 padding:8px 8px 8px; background:#efefef; text-shadow:none; font-weight:normal; color:#5F5D5F; font-family:georgia; }
div#indexMentions .mentionList p { margin-left:10px; width:233px; float:left; /**/ font-family:georgia; }
div#indexMentions .mentionImage { float:left; width:30px; /**/ }
div#indexMentions .mentionImage img { width:30px; float:left; margin-right:5px; /**/ } 

/***********  Index Page New Profiles Promo ***********/
div#indexNewProfiles { margin:10px 0px 10px 45px; float:left; width:290px; /**/ }
div#indexNewProfiles .header { height: 37px; width:290px; float:left; margin-top:7px; margin-bottom:10px;
                               color:black; border-bottom:2px solid black; font-family:georgia; font-size:18px; 
                               font-weight:normal; text-shadow:none; }
div#indexNewProfiles .profileList { margin-top:10px; width:300px; float:left; 
                                    font-size:14px; text-shadow:none; font-weight:normal; color:#5F5D5F; font-family: georgia; }
div#indexNewProfiles .profileList p { margin-left:10px; width:243px; float:left; /**/ font-family:georgia; }
div#indexNewProfiles .profileImage { float:left; width:30px; /**/ }
div#indexNewProfiles .profileImage img { width:30px; float:left; margin-right:5px; /**/ } 

/***********  Index Page Credits ***********/
div#indexCredits .left { clear:left; float:left; margin:10px 0; width:290px; /**/ }
div#indexCredits .middle { margin:10px 0px 10px 67px; float:left; width:215px; /**/ }
div#indexCredits .right { float:left; margin:10px 0 10px 45px; width:330px; /**/ }
div#indexCredits .creditLine { float:left; height:37px; margin-bottom:10px; margin-top:7px; width:349px;
                               border-bottom:1px solid black;color:black; }
div#indexCredits .creditTo { margin-top:37px; float:left; margin-bottom:70px; width:260px; 
                             text-shadow:none; font-size:14px; font-style:italic; font-family:georgia; font-weight:normal; }


/**************************************************
*       GeoProfile - base_geoprofile.html         *
***************************************************/

/********************* Header for GeoProfile ***************/
div#profileHeader { height:25px; width:100%; margin:0px auto;
	                background-color:#DDD; color:#323232; border-bottom:1px solid #d2d1d1; font-family: Arial, Helvetica, sans-serif; }
div#profileHeader .contain { margin-left: auto; margin-right: auto; max-width: 1400px; /**/ }
div#profileHeader .logo { float:left; margin-top:7px; /**/ font-size:12px; }
div#profileHeader .logo a { /**/ color: #323232; }
div#profileHeader .logo a:hover { /**/ text-decoration: none; }
div#profileHeader .logo span { /**/ color: #3bb0e9; }
div#profileHeader .links { float:right; margin:7px 0 0 0; 
                           text-align:right; color:#323232; font-size: 11px; }

/***************** Footer for GeoProfile *******************/
div#profileFooter { height:56px; clear:both; height: -3.7em;
                    background:black; font-size:14px; border-top:3px solid #878587; font-family:georgia; } 
div#profileFooter a { /**/ color:#E9E9E9; text-decoration:none; } 
div#profileFooter a:hover { /**/ color:white; text-decoration:underline; } 
div#profileFooter .name { margin-top:20px; /**/ }
div#profileFooter .links { margin-top:20px; /**/ font-family:georgia; text-align:right; font-size:14px; }
div#profileFooter .links > div { float:right; margin:0 0 0 55px; /**/ }


/*****************************
    Geo profile
*****************************/
/***********  GeoProfile Map/Info Container (top of page) ***********/
div#profileInfoContain { width:1000px; height:200px; margin:10px auto 20px auto; /**/ }

/***********  GeoProfile Page Overview info ***********/
div#profileInfo { margin: 0px 0 9px 0; /**/ }
div#profileInfo .lock { margin-top: 10px; /**/ }
div#profileInfo .ownerName { margin:10px 0 5px 0; /**/ font-size:16px; font-weight: bold; color:#3b5998; }
div#profileInfo .userTitle { /**/ font-size: 42px; font-family: georgia; }
div#profileInfo .viewCount { float:left; margin:25px 0 0 10px; 
                             font-size:11px; font-style:italic; color:#807e7e; }
div#profileInfo .shareButton { float:right; cursor:pointer; margin:14px 5px 0 0px;
                               font-size:10px; border:1px solid #ccc; padding:2px 2px 7px 6px; text-decoration:none; 
                               height:12px; color:#323232; opacity:0.5; }
div#profileInfo .shareButton:hover { z-index:10; 
                                     background:#37B1E4; border:1px solid #37B1E4; color:white; 
                                     opacity:1; }
div#profileInfo .shareText { float:left; margin:3px 3px 0 0; /**/ }
div#profileInfo .shareText a { /**/ text-decoration:none; }
div#profileInfo .shareLogo { float:left; margin-top:-3px; margin-right:-2px; /**/ }
div#profileInfo .shareButtonTwitter { float:right; cursor:pointer; margin:14px 0 0 0px; height:12px; 
                                      color: #ccc; text-decoration:none; }
div#profileInfo .shareButtonTwitter img { width: 22px; /**/ opacity: 0.5; }
div#profileInfo .shareButtonTwitter img:hover { /**/ opacity: 0.9; }

/***********  GeoProfile Map - flashmap and filters ***********/
div#profileMap { width:100%; height:100%; 
                 border:8px solid #ddd; padding-bottom:40px; background:#141414; }
div#profileMap .share { float:right; position:relative; /**/ padding: 6px 6px 0 0; opacity: 0.9; }
div#profileMap .share:hover { /**/ opacity: 1; }
div#profileMap .dropdownContain { float:right; margin:0px 0px 0px 0; position:relative; width:180px; height:35px; /**/ }
div#profileMap .dropdownWrapper { position:absolute; top:8px; right:0px; /**/ }
div#profileMap .dropdownFilterPrefix { float:right; color:#FFF; 
                                       display:block; padding:15px 10px 15px 10px; }
div#profileMap .dropdown { cursor:pointer; /**/ display:block; padding:0px; background-color:#5f5d5f; }
div#profileMap .dropdownSelected { /**/ padding:5px; color: black; }
div#profileMap .dropdownSelected:hover { /**/ padding:5px; background-color: #37B1E4; }
div#profileMap .dropdown img { position:absolute; top:3px; right:5px; /**/ } /* image on top */
div#profileMap .headlink { width:180px; 
                           font-size:14px; font-weight:bold; color:#FFFFFF; padding:0px; text-align:left; list-style:none; }
div#profileMap .headlink ul { margin:0px; /**/ font-size:12px; list-style:none; padding:0px; display:none; }
div#profileMap .headlink:hover ul { /**/ display: block; }
div#profileMap .headlink ul li { margin:0px; /**/ font-size:12px; padding:5px 0px 5px 0px; }
div#profileMap .headlink ul li span { margin:5px; /**/ color:#999999; text-decoration:none; }
div#profileMap .headlink ul li:hover { /**/ background-color: #37B1E4; }
div#profileMap .headlink ul li:hover span { /**/ color:#FFFFFF; }

/***********  GeoProfile Data Container (bottom of page) ***********/
div#profileDataContain { margin:7px auto 50px auto; width:1000px; /**/ font-size:12px;}

/***********  GeoProfile Data - Status and Activity ***********/
div#profileData { float:left; width:600px; /**/}
div#profileData .checkins { background:white; min-height:300px; /**/ padding:5px 0px; }
div#profileData .header { float: left; width:100%; /**/ }

/***********  GeoProfile Data - Status of Profile Services ***********/
div#profileStatus { float:right; width:230px; margin:-13px 0 0 0; /**/ font-size:12px; }
div#profileStatus .synced { float:right; /**/ }
div#profileStatus .synced img { float:right; /**/ }
div#profileStatus .notSynced { float:right; margin:0 20px 0 0; width: 114px; /**/ }
div#profileStatus .notSynced img { margin-right:-55px; margin-top:0px; float:right; /**/ }
div#profileStatus .syncedCaption { margin:0 0 3px 3px; /**/ }
div#profileStatus .addSync { float:right; 
                             border:1px solid #bebebe; padding:5px 29px 4px 5px; color:grey; margin-top:-1px;
                             -webkit-border-radius: 5px; -moz-border-radius: 5px; }
div#profileStatus .addSync:hover { /**/ background:#ddd; color:grey; border:1px solid #bbb; }

/***********  GeoProfile Data - Status of Profile Services ***********/
div#profileFriends { float:right; width:370px; margin:0 0 0 20px; /**/  }
div#profileFriends .checkin { height:50px; width:370px; /**/ padding:0px; }
div#profileFriends .checkin img { float:left; clear:right; height:35px; /**/ padding:3px; }
div#profileFriends .checkinData { width:325px; /**/ padding:3px 0 0 45px; }
div#profileFriends .checkinDisplay { /**/ padding:0 0 6px 0; }
div#profileFriends .checkinDisplay a { /**/ font-size:13px; color:black; }
div#profileFriends .checkinMetaData { /**/ color:#70767A; font-size:11px; }
div#profileFriends .checkins { background:white; min-height:300px; /**/ padding:5px 0px; }
div#profileFriends .dateDiff { float:right; /**/ }
div#profileFriends .list { width:370px; /**/ }
div#profileFriends .list img { height:30px; float:left; /**/ padding:0 2px 4px; }
div#profileFriends .listHeader { margin:0 0 6px 2px; /**/ font:14px Helvetica, Arial, sans-serif; }

/***********  GeoProfile Data - Checkin/Event Activity Summary ***********/
div#profileActivity .singlePost { margin:0 0px 15px; padding-bottom: 15px; /**/ border-bottom: 1px solid grey; }
div#profileActivity .addComment { float:right; width:120px; margin:10px 5px 5px 0; /**/ color:#6f6f6f; font-size:12px;}
div#profileActivity .addComment img { margin-top:-5px; /**/ }
div#profileActivity .addComment div:hover { /**/ text-decoration: underline; }
div#profileActivity .addCommentCaption { float:right; margin:0 0 0 3px; /**/ }
div#profileActivity .addCommentPanel { float: left; width: 100%; /**/ }
div#profileActivity .answerPost { margin:10px 0 10px 60px; /**/ padding:9px; background:#efefef; 
                                  -moz-border-radius: 3px; -webkit-border-radius: 3px; }
div#profileActivity .answerPost img { float:left; height:30px; /**/ }
div#profileActivity .bodyContainer { width:85%; float:left; margin:0 0 0 10px; /**/ }
div#profileActivity .checkinCommentInput { float:right; height:19px; width: 70%; margin:8px 0 0 0px; 
                                           font-size:16px; padding-top:5px; border:1px solid #aaa; font-family:arial, sans-serif; 
                                           color:grey; }
div#profileActivity .checkinDate { float:right; margin-top:9px; margin-right:12px; /**/ font-size:12px; color:#6f6f6f;}
div#profileActivity .desc { margin:14px 0 0 0px; 
                    font-size:18px; color:grey; border:1px solid #ddd; padding:8px 8px 8px 12px;
                    -webkit-border-radius:5px; -moz-border-radius:5px; }
div#profileActivity .desc a { /**/ color:grey; }
div#profileActivity .desc a:hover { /**/ color:grey; }
div#profileActivity .friendsCaption { float:left; margin:15px 0 0 10px; /**/ }
div#profileActivity .friendsList { margin:14px 0 0 5px; float:left; /**/ }
div#profileActivity .friendsList img { float:left; height:30px; /**/ }
div#profileActivity .friendName { /**/ font-size:12px; }
div#profileActivity .friendName a { /**/ color: #239bcd;}
div#profileActivity .header { /**/ background:white; font-family: georgia; }
div#profileActivity .logo { float:right; margin-top: 19px; /**/ }
div#profileActivity .postedDate { float:right; /**/ font-size:11px; color:#6f6f6f; }
div#profileActivity .quotearrow { margin-bottom:-15px; margin-left:10px; }
div#profileActivity .shoutHint { margin-top:-2px; /**/ font-size:12px; color:grey; }
div#profileActivity .shoutHint a:hover { /**/ font-size:12px; color:white; }
div#profileActivity .shoutinput { width:630px; float:left; border:none; margin-left:3px; 
                                  color:grey; font-size:18px; text-decoration:underline; font-family:georgia; }
div#profileActivity .submit { float:right; height:31px; width:104px; margin:8px 0 10px 10px; cursor: pointer;
                              background:url('/media/images/commentSubmit.png'); }
div#profileActivity .submitShout { float:right; width:26px; height:15px; margin:0px 0 0 0px; cursor:pointer;
                                   border:1px solid #DDD; background-color:white; color:grey; padding:5px 8px 3px; font-size:13px;
                                   -moz-border-radius:5px; -webkit-border-radius:5px; }
div#profileActivity .submitShout:hover { /**/ color:white; background-color:#BBB;}
div#profileActivity .venue { margin: 1px 0 0 0px; /**/ padding-top: 15px; font-size:28px;}
div#profileActivity .commentimg { }

/***********  GeoProfile Data - Checkin/Event Activity Summary ***********/
div#profileShareModal { /**/ padding: 15px; }
div#profileShareModal label { clear:left; float:left; /**/ padding:24px 0 12px 0; font-size:18px; }
div#profileShareModal .header { /**/ font-size:22px; border-bottom:1px solid #000; padding-bottom:10px; }
div#profileShareModal .formField { width:350px; /**/ }
div#profileShareModal .formInput { clear:left; float:left; 
                                   border:2px solid #d4d4d4; color:#5f5d5f; font-family:Arial, sans-serif; font-size:14px; padding:10px;
                                   -moz-box-shadow: inset 2px 2px 5px #e3e2e2; /* for Firefox 3.5+ */ 
                                   -webkit-box-shadow: inset 2px 2px 5px #e3e2e2; /* for Safari and Chrome */ 
                                   box-shadow: inset 0 0 10px #e3e2e2; /* CSS 3 Spec */ }
div#profileShareModal .shareModalSubmit { clear:left; float:left; /**/ padding-top:12px;}
div#profileShareModal .title { width:365px; height:18px; /**/ }
div#profileShareModal .description { width:365px; height:80px; /**/ }

/***************** InfoWindow Box *****************/
div#profileLoginModal .login { margin-top:10px; margin-left:10px; width:335px;
                               color:#5f5d5f; font-size:16px; border-bottom:1px solid #ccc; padding-bottom:5px; font-weight:bold; 
                               text-shadow:#e2e1e1 0px 1px; }
div#profileLoginModal .loginDescription { margin-left:10px; margin-top:5px; /**/ font-size:12px; color:#5f5d5f; }
div#profileLoginModal .loginButtons { float:left; width:200px; margin-left:10px; margin-top:15px; /**/ }
div#profileLoginModal .foursquareButton { cursor:pointer; /**/ }
div#profileLoginModal .facebookButton { margin-top:9px; cursor:pointer; /**/ }
div#profileLoginModal .divide {  margin-top:8px; margin-left:5px; /**/ font-size:14px; color:#5f5d5f; }
div#profileLoginModal .noLogin a { float:right; margin-top:82px; margin-right: 15px;
                                   border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; color: grey; 
                                   -moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px; }
div#profileLoginModal .noLogin a:hover { /**/ text-decoration: none; background-color: #ddd; }


/*********************
    Fonts
***********************/

@font-face {
    font-family: "Raleway";
    src: url('/media/fonts/raleway_thin.eot');
    src: url('/media/fonts/raleway_thin.otf');
    src: local('Raleway'), local('Raleway'),
    url('/media/fonts/raleway_thin.otf') format('opentype');
}
/* not needed for now */
/* 
@font-face {
    font-family: "Miso";
    src: url('/media/fonts/miso-webfont.eot');
    src: url('/media/fonts/miso.otf');
    src: local('Miso'), local('Miso'),
    url('/media/fonts/miso.otf') format('opentype');
} 
*/