/* Global styles */
html, body, p, textarea { margin: 0px; padding: 0px; font-size: 14px; font-family: Arial, Verdana, sans-serif;}
h3 { margin: 0px; padding:0px; }
textarea { margin: 5px 0px;}
input { font-family: Arial, Verdana, sans-serif;}
a, img { border: none; }
a { color: #0033CC; text-decoration: none; }
a:hover { text-decoration:underline;}
.tag {display: block; float: left; overflow: hidden;}
.geotag_text, .tag_text { background: url(/images/tag_wedge_white.png) center right no-repeat #05C; }
.geotag_text { background-color: #016c1c; }
a.tag:hover { text-decoration: none; }
.tag_text, .geotag_text {display: block; color: #fff; margin-left:-68px; padding: 7px 2.2em 8px 0.5em; position:relative; right:-68px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

.geotag { background: url(/images/geotag_trap.png) center left no-repeat;}
a:hover .tag_text { text-decoration: none; background-color: #03A !important;}
a:hover .geotag_text { text-decoration: none; background-color: #015c0c !important;}
.tag_text { background-color: #05C; }
.geotag_text { background-color: #016c1c; }

.create { overflow: visible !important;}
.secondary { font-weight: normal;}
.create #also_tagged { clear: none !important; float: none !important;}

.error { color: red; }
.success { color: green; }

.star { width: 16px; height: 35px; display: inline; background: url("/images/icons/star.png") no-repeat scroll center center transparent; cursor: pointer; padding: 0px 10px; }
.result .star { height: 16px; padding: 0px 15px;}
.fav { background-image: url('/images/icons/grey_star.png'); }

/* Frame out the components of the page  */
#container { padding-left: 255px; padding-right: 255px; }
#container .column { float: left; }
#left_nav { width: 200px; position: fixed; left: 0px; height: 100%; padding: 15px; z-index: 1;}
#center { width: 100%; position: relative; z-index: 1000; min-width: 400px; height: 100%; background: #FFF;}
#right_nav { width: 200px; position: fixed; right: 0px; height: 100%; padding: 0 15px; text-align: right; z-index: 2;}

/*/////////////////////////////////
/* Styles for the left hand nav   /
/////////////////////////////////*/

#left_nav { background: url('/images/left_nav_bg.png') center right repeat-y #BBBBBB; border-right: 1px solid #666; }
#left_nav_header { width: 100%; text-align: center; font-size: 14px; }
#left_nav_footer { position: absolute; bottom: 10px; text-align: center; }
#left_nav h3 { clear: both; float: left; }
#left_nav h3.button { width: 165px; }
#left_nav h3.heading { margin: 15px 0px 5px 0px;}
#logo { }
#search_tags, #search_button { height: 15px; float: left; border: 0px; margin: 0; padding: 0; background: #FFF; }
#search_tags { width: 155px;}
#search_button { width: 20px; float: right; background: url("/images/search_button.png") no-repeat scroll 0 -6px transparent; cursor: pointer;}
#search_box { margin: 5px 0px; padding: 3px; border: 1px solid #999; display: block; background: #FFF; height: 15px; width: 180px;}
#search_tags:focus {outline: none;}
#tagline { margin: 2px; font-weight: bold;}
/* Left Nav Tags */
#left_nav .tag { margin-bottom: 5px; clear: left; font-size: 12px; margin: 0 0 5px 0; }
#left_nav .big_tag { font-size: 16px; }
#left_nav .big_tag .tag_text { padding-right: 4.5em;}
#left_nav .mid_tag { font-size: 14px;}
#left_nav .mid_tag .tag_text { padding-right: 5.0em;}
#left_nav .tag_text, #left_nav .geotag_text { background: url(/images/tag_wedge_grey.png) right center no-repeat; padding: 4px 5.5em 4px 0.5em; margin-left: -53px; right: -53px;}
#left_nav .tag_text { background-color: #05C; }
#left_nav .geotag_text { background-color: #016c1c;}

/*********************************/
/* Styles for the right hand nav  /
/*********************************/

/* Right Nav Tags */
#right_nav .tag { margin: 0 0 5px 0; clear: right; float: right; font-size: 12px; }
#right_nav .tag_text, #right_nav .geotag_text { background: url(/images/tag_wedge_grey.png) left center no-repeat; padding: 4px 0.5em 4px 5.5em; margin-right: 15px; left: 15px;}
#right_nav .tag_text { background-color: #05C; }
#right_nav .geotag_text { background-color: #016c1c;}
#right_nav h3.button { width: 165px; }
#right_nav h3.heading { margin: 15px 0px 5px 0px;}

/* Styles for the right hand nav */
#right_nav { background: url('/images/right_nav_bg.png') center left repeat-y #BBBBBB;  }
#right_nav_header { width: 100%; text-align: right; font-size: 14px; clear: right; margin: 15px auto}
#right_nav_middle { top: 140px; position: absolute; right: 15px}
#right_nav_footer { width: 100%; position: absolute; bottom: 10px; text-align: center; }

#right_nav .chicklet { font-size:0.6em; vertical-align: middle; }

#ipiqi_intro { padding-left: 20px; }
#ipiqi_intro { font-size: 14px; font-weight: bold; margin-top: 50px;}
#ipiqi_intro h2 { font-size: 17px; }
#right_nav h3 a {float: right;}
#right_nav h3 { float: right; clear:both;} 
a.FB_Link img { border:medium none; float:right; margin:3px; }

#favorite_discussions { clear: both; }
#favorite_discussions ul { list-style: none; }

ul#saved_searches { list-style: none; margin: 15px 0px 5px 0px; display: inline; clear: both;}

/****************************/
/* Styles for autocomplete */
/****************************/
div.auto_complete {z-index: 100;}
div.auto_complete ul { margin: 0px; padding: 0px;}
div.auto_complete ul li { background-color: #0055CC; border-bottom: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999;color: #FFF; font-size: 10px; padding: 5px; list-style-type:none; display:block; margin:0; cursor:pointer; }
div.auto_complete ul li.autocompleteResult_tag { background-color: #0055CC; }
div.auto_complete ul li.autocompleteResult_geotag { background-color: #016c1c; }
div.auto_complete ul li.autocompleteResult_user { background-color: #0055CC; }
div.auto_complete ul li.selected { background-color: #333333; color: #DEDEDE;}
div.auto_complete { left: 15px; top: 122px; position: absolute; width: 200px;}

/************************************************/
/* Styles for top section with tag information */
/**********************************************/
#center #top { background: url('/images/meta_bg.png') bottom center no-repeat; top: 0px; z-index: 10000000; font-size: 12px; margin: 0px 15px; }
#center #top #metabox { padding: 5px 0px; overflow: hidden; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-top: 15px; position: relative;}
#center #top h1#the_tag { margin: 0px; width: 605px; font-size: 50px;}
#center #top h1#the_tag .tag, #center #top h1#the_tag .geotag { padding-right: 15px;}
#center #top h1#the_tag .geotag { background: url(/images/tag_wedge_white.png) right center no-repeat #016c1c; padding-left: 0px;}
#center #top #also_tagged { clear: left; float: left; margin-top: 5px; vertical-align: middle; height: 20px;}
#center #top #also_tagged p { margin: 3px 0px; float: left; font-weight: bold;}


#center #top #number_of_users { width: 75px; height: 75px; background: #DDD; display: block; position: absolute; top: 0px; right: 0px; margin: 5px;text-align: center; font-size: 10px; overflow: hidden;  -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#center #top #number_of_posts { width: 75px; height: 75px; background: #DDD; display: block; position: absolute; top: 0px; right: 85px; margin: 5px;text-align: center; font-size: 10px; overflow: hidden;  -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#center #top #number_of_posts strong, #center #top #number_of_users strong { font-size: 24px; clear: both; display: block;}
#center #top #actions { text-align: right; font-size: 14px; clear: both; overflow: hidden;}
#center #top #actions h3 { margin: 0px; }
#center #top #actions a { text-decoration: underline; }
#center #top #actions #left_actions { float: left; }
#center #top #actions #right_actions { float: right; }
.tagsList { display: inline; }
#also_tagged .tag, .tagsList .tag { margin: 0px 0px 5px 5px; }
.tagsList .tag_text, .tagsList .geotag_text, #also_tagged .tag_text, #also_tagged .geotag_text { background: url(/images/tag_wedge_white.png) right center no-repeat none; padding: 4px 5.5em 4px 0.5em; margin-left: -53px; right: -53px;}
.tagsList .tag_text, .tagsList .geotag_text, #also_tagged .tag_text, #also_tagged .geotag_text { }
.tagsList .tag_text, #also_tagged .tag_text { background-color: #86A3CA; }
.tagsList .geotag_text, #also_tagged .geotag_text { background-color: #86CAA3; }
#also_tagged.secondary .tag_text { background-color: #05c; }
#also_tagged.secondary .geotag_text { background-color: #016c1c; }


/*********************************/
/* Styles for actual discussion */
/*******************************/
#ipiqiThread { margin-bottom: 130px; }
#center #content { position: relative; }
h1#postTitle { margin: 0px 0px 0px 0px; font-size: 30px;}
.originalPost {  border-bottom: 1px solid #DDD; margin: 0px; padding: 0px; position: relative; font-size: 18px;}
.comment {padding: 0px; margin: 0px; position:relative;}
.post_content { position: relative; padding: 15px; border-bottom: 1px solid #CCC;}
.post_content .body { margin: 0.5em 0; position: relative;}
.username { font-weight: bold;}
.post_actions { position:relative; font-size: 14px;}
.originalPost #post_sash { background: url('/images/sash_white.png'); width: 75px; height: 75px; top: 0px; right: 0px; position: absolute;}
#post_sash { background: url('/images/sash_white.png'); width: 75px; height: 75px; top: 0px; right: 0px; position: absolute;}
.editLink { display: inline; }
.piqs { padding: 5px;}
.piqstatus { 	margin: 5px;	z-index: 100000; 	float: right;	position: relative; }
.piqType { display:block; text-align: center; margin: 5px;}

#discussion_reply_button { border: 1px solid #DDD; font-size: 18px; font-weight: bold; margin: 3px; cursor: pointer;}
.button, .editor_ok_button { -webkit-box-shadow: 0 0 1px #000000; -moz-box-shadow:0 0 1px #000000; background:none repeat scroll 0 0 #CCCCCC; border-color:rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.05); border-style:solid; border-width:1px; color:#000000; cursor:pointer; font-size:18px; font-weight:bold; margin:0; padding:5px 10px 6px; }
.button a, a.button { text-decoration: none !important; color: #000;}

/* Styles for creation of discussion */
h1#postTitle input, #postTitle-inplaceeditor .editor_field { font-size: 30px; height: 36px; font-weight: bold; width: 80%; }
.create_tip { background: url(/images/create_tip_bg.png) no-repeat 100% 20px; height: 45px; width: 175px; left: -175px; top: 0px; position: absolute; display: none;}
.create_tip p{ background: #3f4c80; color: white; padding: 10px; margin: 9px; }
#create_tags { width: 250px; color: #707070; }
#create_title {color: #707070; }
#create_body { width: 99%; font-family: Arial; font-size: 12px;}

.create_instruction { }
.create_instruction p { font-size: 10px;}

#create_tags_auto_complete { z-index: 100; }

.addTagSpan { width: 360px; }
#geotagCheckMessage {background:none repeat scroll 0 0 #FFFFAA; margin:15px auto; padding:3px 3px 3px 10px; position:relative; text-align:center; width:500px; float: none !important;}

/*********************************/
/* Styles for results page       */
/*********************************/
ul#results { list-style: none; margin: 15px; padding: 0px; position: relative; }
ul#results li { border-bottom: 1px solid #CCC; position: relative; padding: 0.515em 0px; overflow: hidden; }
ul#results h2 { margin: 0px 0px 1px 0px; font-size: 1.2em; overflow: hidden; height: 1.3em;}  /* 1.2 = 17px, 1.0 = 14px, 0.95 = 12px */
ul#results li.secondary h2 { font-weight: normal;}
ul#results .intro { margin: 2px 0px 5px 0px; overflow: hidden; font-size: 0.95em;}
ul#results .intro .username a { font-weight: bold; color: #444;}
ul#results .intro .first { font-size: 1em; clear: both; display: block; height: 1.2em; overflow: hidden; margin-bottom: 0.35em; }
ul#results .intro .last { clear: both; display: block; height: 1.2em; overflow: hidden; }
ul#results .intro .last img { vertical-align: middle; margin-right: 3px; }
ul#results .intro a { color: #000; }
ul#results .byline {background:none repeat scroll 0 0 #FFFFFF; float: right; margin-right:0; padding: 0.2em 0px 0.2em 5px; min-width: 60px; text-align: right; position:absolute; right: 0px; top: 0.55em; }
.byline div, .byline div a { display: inline; color: #444; font-size: 1em;}
ul#results li.secondary .byline, ul#results li.secondary .byline div, ul#results li.secondary .byline div a { color: #888; }
ul#results li#noMoreResults { border-bottom: none; padding: 15px 0px; text-align: center;}
ul#results li#noMoreResults .intro { margin: 10px auto 100px auto; width: 290px; height: 50px;}

.chicklet { font-size: 0.9em; font-weight: bold; color: #fff; margin: 1px; padding: 0.25em 1em; background: #444; -moz-border-radius: 10px; -webkit-border-radius: 10px; cursor: pointer;}

ul#results .number_of_read, ul#results .number_of_unread{ position: relative; color: #000; }
a.chicklet:hover { text-decoration: none; cursor: pointer;}
ul#results li.secondary .number_of_read { background: #FFF; color: #000;}

ul#results .number_of_posts { position: absolute; top: 2em; right: 0px; margin: 0.25em 0px; background: #FFF; padding: 0 0 0 5px; height: 3em; min-width: 60px; text-align: right; }

ul#results .number_of_unread { background: #444; color: #FFF;}
ul#results .number_of_unread a { color: #FFF; }
.number_of_read .posts_text, .number_of_unread .posts_text { color: grey; font-size:0.75em; font-weight:normal; position:absolute; right: -30px; top: -0.4em; width: 25px; height: 1.1em; background: #FFF; padding: 3px 2px; }



/*********************************/
/*Styles for help page           */
/*********************************/
h1#the_tag { margin: 0px; width: 605px; font-size: 50px;}
#helpBody {font-family: Arial;  margin: 20px auto; padding-bottom: 100px;}
.faq { padding: 0px; }
.question {font-weight: bold; padding-top: 5px; padding-bottom: 5px; font-size: 17px;}
.question a {text-decoration: none; color: black;}
.answer {padding: 0px; line-height: 1.3em; padding-bottom: 20px;}

/*************************************/
/*styles for login and signup pages */
/***********************************/
#splashMessage { font-size: 16px; font-family: Arial; margin: 15px auto; }
#splashMessage h2 { margin:0px; padding: 0px; }
#splashMessage h3 { margin: 15px 0px 0px;}
#splashMessage input {font-size: 28px; font-family: Arial; padding: 3px; margin: 5px 0;}
#splashMessage input[type="text"], #splashMessage input[type="password"] { border: 1px solid #333333; height: 30px; width: 300px;}
#splashMessage input[type="submit"] { background: #DEDEDE; height: 40px; }
#splashMessage input#recaptcha_response_field { height: 16px;}
#splashMessage textarea { width: 300px; border: 1px solid #333333; padding: 3px;}
#splashMessage .column {width: 45%; float: left; padding: 0 30px 0 0px; }
#splashMessage .column .form_row { padding-bottom: 15px;}

.form-row { margin: 10px 0px; }
.form-row label { display: block;}
.floater { float: left; margin: 15px; }
#signupBody { width: 425px;}
#signup_username_tip { background: url(/images/create_tip_bg.png) no-repeat 100% 20px; top: 85px; height: 45px; width: 175px; left: -175px; position: absolute; display: none;}
#signup_username_tip p { background: #3f4c80; color: white; padding: 10px; margin: 9px; }


#invite_leaderboard { padding: 0px; margin: 0px; border-collapse: collapse;}
#invite_leaderboard th, #invite_leaderboard tr, #invite_leaderboard td { border: 1px solid black; padding: 5px; text-align: center;}
#invite_leaderboard tr.blank, #invite_leaderboard tr.blank td { border: none;}
#invite_leaderboard tr.highlight { font-weight: bold; font-style: italic;}

/* styles for geotagging interface */
#createPost #geoTagPanel { margin: auto;}
#createPost #geotag_actions { width:500px; margin: 0 auto; text-align: center; }

#createPost #geoTagPanel ul { list-style: none; padding: 0px; margin: 0px;}
#createPost #geoTagPanel ul#geoTagList { border: 1px solid black; float: left; clear: left;}
#createPost #geoTagPanel ul#geoTagList li { border-bottom: 1px solid #aaaaff; padding: 3px 5px;}
#createPost #geoTagPanel ul#geoTagList li.listItem_0 { background: #ffffff; }
#createPost #geoTagPanel ul#geoTagList li.listItem_1 { background: #ffffff; }
#createPost #geoTagPanel ul#geoTagInput { background: #ffffff; 	border: 1px solid black; float: left;padding: 3px 5px; list-style: none; margin: 0px;}
#createPost #geoTagPanel ul#geoTagInput li label { text-align: left; width: 70%; display: block; clear: both; }
#createPost #geoTagPanel ul#geoTagInput li { margin-bottom: 5px; }
#createPost #geoTagPanel ul#geoTagInput li input[type="text"] { width: 175px; }
#createPost #geoTagPanel #map_canvas { width: 200px; height: 200px; margin: 3px; padding: 3px; border: 1px solid black; float: left; }
#createPost #geoTagPanel #geotagRightDetails { width: 235px;  overflow: hidden; }
#createPost #geoTagPanel #geotagRightDetails ul#geotagTabs { list-style: none; padding: 0px; margin: 0px;}
#createPost #geoTagPanel #geotagRightDetails ul#geotagTabs li { width: 50px; background: #ddd; border: 1px solid black;  float: left; margin:0px 4px 0px 0px; padding: 2px; }
#createPost #geoTagPanel #geotagRightDetails ul#geotagTabs li.active { background: #fff; border-bottom: 0px; cursor: default; position: relative; top: 1px}
#createPost #geoTagPanel #geotagRightDetails ul#geotagTabs li.inactive { background: #DDD; border-bottom: 1px; cursor: pointer;}


/* style for profile page form */
.formLayout { padding: 10px; width: 600px; }
#leftProfile { display: block; width: 200px; float: left; }
#rightProfile { display: block; width: 200px; float: right; }
#blurb { width: 300px; }

/* style for headings on left and right navs */
.heading { text-transform: uppercase; }
.heading a { text-transform: none; }
.heading a:hover { text-decoration:underline; }
.form_error { color: #d8732f; }


/*************************************/
/*styles for dashboard */
/***********************************/
#dashboard { margin: 15px 15px;}
#dashboard .component { margin-bottom: 30px;}
#dashboard .column {width: 45%; float: left; padding: 0 30px 0 0px; }
#dashboard .column .form_row { padding-bottom: 15px;}
#dashboard ul#results { padding: 5px 0px; font-size: 12px; clear: both; margin: 0px;}
#dashboard .tag {padding-right: 15px;}
li.more_results { float: right; border-bottom: none !important;}

@media screen and (max-width: 1150px) {
  #dashboard .column {
    width: 100%;
  }
}