/********************************************
    Stylesheet for Fairfield

    -===== INTRODUCTION  =============

    Use Yahoo's YUI library as base. Refer to
    YUI css related tutorials for a start. 

    -====== FILE STRUCTURE ===============
    * General: general font, heading, link styles. 
    * Layout: layout structure, borders,
    * Header, Content, Footer 
    * Misc
    * Hacks 

    -====== CODING STANDARD ===============
    1. Use `under_line` for class and id naming.
    2. Group related concepts together
    3. Use comment notation to indicate sections
        1) `=UPPERCASE` for style categories
        2) `-lowercase` for each style group
    4. Annotate 'magic numbers'
    5. Use 'em' for width and heights that might change
        when user changes the font-size; but use 'px'
        for padding/margin. When 'em' is used, always
        gives out the corresponding 'px' value as reference.

*******************************************/

/* Override settings in styels.css */
h1,h2,h3,h4,h5,h6{line-height:105%;color:#222;}
body{min-height:300px;font-size:13px;color:#333;}
a{color:#356AA0;}
p{margin:5px 0;}
header{margin-bottom:2em;}
footer{clear:both;border-top:1px solid #ccc;font-size:13px;}
footer p{color:#8c9c9c;}
footer nav a{color:#356AA0;}
footer nav a:hover{background:none;text-decoration:underline;}
strong{color:#333;}
ul{list-style:none;padding-left:0;}

/**************************************
=GENERAL 
***************************************/
#empty_result, #syntax_error, #search_result{display:none;font-size:13px; }
#empty_result p, #syntax_error p { margin: 5px 0;}
#content {float:right;min-height:300px;width:650px; }

/* -links */
a { text-decoration:none; color:#356AA0; outline:none; }
a:hover { text-decoration:underline; color:#cf6530; }
a:focus { outline:none; border:none; }
a.selected { color:#cf6530; background-color:white; }

/* -headings */
h1, h2, h3 { overflow:hidden; text-shadow: white 0px 1px 0px; }
h1 { color:#cf6530; font-size:20px; }
h1 span { font-weight:bold; }
h2 { font-size:13px; font-weight:bold; color:#333; padding:3px 0 5px 5px; margin: 20px 0 11px; background-color:#E6F2FA; border-top:#0E8ECF 1px solid; }
h3 { font-size:13px; font-weight:bold; border-bottom:1px solid #ccc; padding-bottom:5px; margin:20px 0 8px 0;}

/* -common elements */
.error { color:#cf6530; display:none; }
.red{color:#cf6530;}
.gray { color:#999 !important; }
.gray:hover { text-decoration: none; }
.note { color:#999; font-size:13px; }
.highlight { background-color:#f5ca39; font-weight:bold; }
.clear{clear:both;display:block;}

/* -tooltip
 * as suggested in this link:
 * http://meyerweb.com/eric/css/edge/popups/demo.html */
a.tooltip { color:black; }
a.tooltip:hover { text-decoration: none; }
a.tooltip span { display:none; }
a.tooltip:hover span {font-size:13px; display: block;
   position: absolute; width: 150px;
   padding: 15px; margin: 11px; z-index: 1000;
   border:3px solid #ccc;
   color: #333; background: white;
}

/* -header */
#hd { overflow: hidden; }
#hd div { overflow:hidden; }
#hd #profile { color:#666; font-size:13px; margin-bottom:5px; }
#hd #usertools a { padding-left:5px; }
#hd #type { float:left; }
#hd #usertools { float:right; } 
#hd #menu { background-color: #eee; padding: 5px; }
#hd #search { float:right; }
#hd #search input[type=text] { width: 211px; height: 14px; }
#hd #search a { font-size:13px; margin-left:5px; padding:6px; }
#hd #search a:hover { text-decoration:underline; color:#cf6530; }
#hd #logo { float:left; margin-top:3px; }


/* -filters */
#filters {float:left; width:225px !important; }
#filters h3 { border-bottom:0;margin:11px 0 0 0;padding-left:11px; font-size: 12px; font-weight:bold; }
#filters ul { margin-bottom:5px;padding-left:0px;margin-top:3px; }
#filters ul.more { border-bottom: 1px dotted #999; padding-bottom: 11px;  }
#filters li { padding:0 0 0 8px;list-style:none;font-size:13px; }
#filters li span { float:right; padding-right:7px; }
#filters ul#towns { min-height:30px; }
#filters .box { border:1px solid #999; margin:30px 0; }
#filters .box h2 { padding-left:11px; margin-top:0px; background-color:#eee; border-top:none; border-bottom:1px solid #ccc; }
#filters .box input[type=checkbox] { margin-right:3px; }
#filters .box ul.nocounter label span { display:none; }
#filters .box input[type=text] { margin:0 0 11px 11px; width:107px; }

/* -advanced */
#advanced div{margin:11px 0;}
#advanced label{width:150px;}
#advanced input.long[type="text"] { width:444px; }
#advanced input.short[type="text"] { width:130px; }

/* -content */
#anonymous_cta{color:#BAD8E7;font-size:14px;background-color:#1a3a4a;padding:10px 15px;overflow:hidden;margin-bottom:15px;}
#anonymous_cta h1{color:white;text-shadow:1px 1px 1px #666;}
#anonymous_cta > a{display:block;float:right;margin:25px 10px 25px 20px;}

#trending { margin-top: 11px; }
.sentiment { display:none; }
/* http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
#status { z-index:9999; position:fixed; font-size:13px; 
    background-color:white; border:5px solid #999; color: #333; opacity:0.95; 
    width:600px; height:18px; display:block; 
    top: -5px; left: 45%; margin-left: -325px; 
    text-align:center; padding:15px 70px;
    font-family: 'Lucida Grande', arial, serif;}
#status span { display:none; }
#status span.loading { display:inline; }
#status span a { color:#cf6530; }

/* -people */
.people { overflow: hidden; padding:11px 0 0px 0; border:1px solid #fff; 
    margin-top:0px; border-top:1px dotted #ccc; color:#666; font-size:13px; }
.people .avatar { float:left; margin-right:11px; min-height:90px;  }
.people .name { font-size:13px; font-weight: bold; color:#333; }
.people .name span { font-size:13px; display:block; font-weight:normal; }
.people .description { font-size:13px; margin-top:3px; width:520px;  }
.people .tweets { margin:15px 0 0 60px; width:450px; }
.people .tweets li { color:#000; padding:5px 0; border-top:1px dotted #ccc; }
.people .tweets li .info { display:block; color:#666; }
.people a.details  { padding-left:11px; }
.people .score { width:50px; height:50px; float:right; font-family:Georgia; font-weight:bold; text-align:center; font-size:26px; background-color:#e6f2fa; }
.people .score span { background: #333; color: #ccc; width:50px; font-size:11px; display:block; font-weight:normal; }
.people .score a { text-shadow: white 0px 1px 0px; color:#333; }


/* -tweet */
.tweet { display:block; overflow:hidden; 
    padding:5px 0; margin:11px 0; 
    border-top:1px dotted #999; }
.tweet .avatar { float:left; margin-right:11px; }
.tweet .avatar img { width:32px; height:32px; border:1px solid #eee; }
.tweet .status { margin-left:46px; color:#999; }

.result .more { text-align: center; border-top:1px dotted #ccc; padding-top:11px; }

/* -monitor */
.monitor { display:block; overflow: hidden; padding:11px 0 0px 0; border:1px solid #fff; 
    margin-top:0px; border-top:1px dotted #ccc; color:#666; font-size:13px; }
.monitor .user { font-size:13px; font-weight: bold; color:#333; }
.monitor .query { font-size:13px; margin-top:3px; width: 400px;  }
.monitor .time { float:right; }

#result .more { text-align: center; border-top:1px dotted #ccc; padding-top:11px; }


/* -sidebar */
#sidebar { width:30% !important; font-size:13px;  }
#sidebar h2 { border-top: none; font-size:13px; }

/* -word_cloud */
#word_filters { height:24px; background-color:#eee; margin-bottom: 8px; width: 640px; border:1px dotted #ccc; }
#word_filters .note { background-color:white; color:#666; }
#word_filters div { background-color:#575757; color:white; float:left; margin: 2px 0 0 15px; padding: 1px 5px; font-size:12px; }
#word_filters div span { padding: 0 5px; }
#word_filters div.word:hover { cursor:pointer; border:1px solid #eee;}

#word_cloud { overflow:hidden; clear:both; }
#word_cloud .word { height: 20px; border-bottom:1px dotted #ccc; width: 160px; float:left; margin-right:30px; padding:2px 6px; }
#word_cloud .word span { display:block; float:right; color:#555; font-size:11px; padding-top:2px; }
#word_cloud .word span.text { float:left; color: #333; font-size:13px;}
#word_cloud .word span.add { color:white; margin-top:-2px; padding-right:5px; font-weight:bold; font-size:110%; float:left; }
#word_cloud .word:hover { background-color:#575757; color:white; cursor:pointer; }
#word_cloud .word:hover a, #word_cloud .word:hover span { color:white; text-decoration:none; }
#word_cloud .word:hover span.add { text-shadow:#ccc 0 1px 0; }

/* -content */
#suggestions { margin-top:1em; font-size:13px; }

#summaries { height:88px; overflow:hidden; }
#summaries div { font-size:13px; color:#333; width:100px; float:left; text-align:left; border-right: 1px solid #ccc; padding-left:12px; }
#summaries div.right { float:right; text-align:right; padding-right:12px; }
#summaries div#meter { padding-left:0px; }
#summaries div.last { margin-right:0px; }
#summaries div em { font-style:normal; font-family:Georgia; text-shadow:#ccc 0 1px 0; font-size:25px; color:#333; display:block; font-weight:bold; }
#summaries div strong { display:block; }
#summaries .up, #summaries .down {font-family:Georgia; text-shadow:0 1px 0 #ccc; }
#summaries div .up { color:green; }
#summaries div .down { color:#cf6530;}

#filters #loyalty { margin-left:5px; height:111px;  }
#filters #loyalty > div { color:#999; padding-top: 45px; text-align:center; }
#filters #loyalty tr.title { border-bottom:1px dotted #999; margin-bottom:5px; }
#filters #loyalty tr { height:18px; }
#filters .score { width:50px; height:50px; float:right; font-family:Georgia; font-weight:bold; text-align:center; font-size:26px; background-color:#e6f2fa; }
#filters .score span { background: #333; color: #ccc; width:50px; font-size:13px; display:block; font-weight:normal; }
#filters .score a { text-shadow: white 0px 1px 0px; color:#333; }

#referrals { margin-left:5px; }
#referrals li { padding:3px; }



/*******************************************
=TOOLS
*******************************************/
/* -menu */
#tools { float:right;margin:11px 0; }
#user_menu { color: #333;border:5px solid #eee; padding:5px 15px; }
#user_menu strong { margin-right: 5px; }
#user_menu a { color: #356AA0; margin: 0 5px; padding:5px; }
#user_menu a:hover { color: #cf6530; text-decoration:none; }
#user_menu a.selected { color: #cf6530; background-color: white; }

/* -toolbox */
.toolbox { margin-top:-5px; display:none; 
    width: 277px; padding: 5px 15px 15px 15px; 
    border:5px solid #eee; border-top:none; background-color: white; 
    position: absolute; z-index:999; }
.toolbox tr { height: 28px; }
.toolbox tr.command { margin-top:5px; line-height: 35px; border-top: 1px solid #eee; }
.toolbox td.fields { font-weight:bold; padding-right: 5px; width:80px; }
.toolbox h2 { background-color:white; border-top:none; margin-bottom: 1em;
    color:#cf6530; margin-top:0px;
    padding-bottom:0.2em; padding-left: 0px; border-bottom:1px solid #cf6530; }
.toolbox input[type="text"] { width:180px; }


/*******************************************
=USER
*******************************************/
/* -userhome */
#user_home{width:570px;min-height:300px;overflow:hidden;}
#user_home section{margin-bottom:2em;}
#search{}
#search input[type="text"]{width:335px;font-size:13px;}
#search input[type="submit"]{width:80px;font-size:13px;}
#search a{margin-left:15px;}
#saved_search{}

#rhs{float:right;width:230px;overflow:hidden;}
#rhs #twitter_update_list li{list-style:none;padding-bottom:10px;}
#rhs h3+div{margin-bottom:33px;}

/* -account */
#account{overflow:hidden;}
#plan_detail{width:350px;float:left;}
#change_plan{width:150px;float:right;}
#change_plan li{margin:7px 0;}


/* -contact */
#contact label{font-weight:bold;display:block}
#contact textarea{margin-bottom:15px;}
#contact input{display:block;margin-bottom:15px;}
#contact input[type="text"]{width:250px}
#contact #bots{display:none;}


/*******************************************
=REPORTS
*******************************************/

/* -profile */
.usage_list { padding-left:3px; margin:0.3em 2em 0 0;width:100%; overflow:hidden; float:left; }
.usage_list .usage { margin:0 0 1em 0.5em; }
.usage_list div{margin:10px 0;}
.usage { overflow:hidden; }
.usage > a { font-size: 12px; font-weight:bold; }
.usage_list .control { float:right; font-size:13px; padding-right:5px; }
.usage_list table { margin-left: 1em; margin-top:0.5em; display:none; }
.usage_list th { font-weight:bold; }
.usage_list td { padding:3px; }
.usage_list td.field { font-weight:bold; }
.usage_list td a { background-color:#356aa0; color:white; 
    text-decoration:none; padding:1px 5px; width:11px;  }
.usage_list td a:hover { background-color:white; color:#356aa0; border:1px solid #356aa0; }
.usage_list tr { font-size:13px; border-bottom: 1px dotted #eee; }
.usage_list input[type="checkbox"] { margin-right:3px; }