/*  __           __                           ___     __    __     __                      
   |  |_ .---.-.|  |.-----..-----.   .-----..'  _|   |  |_ |  |--.|__|.-----..-----..-----.
   |   _||  _  ||  ||  -__||__ --|   |  _  ||   _|   |   _||     ||  ||     ||  _  ||__ --|
   |____||___._||__||_____||_____|   |_____||__|     |____||__|__||__||__|__||___  ||_____|
                                                                           |_____|       
                            Tales of Things CSS Version 2 */

/* PALETTE

background grey: #e8e8ec
heading blue: #3399cc
base text: #666666

*/

/* Main XHTML Tags */

html{   
    height:100%;
}

body {
    background-color:#e8e8ec;
    margin:0;
    vertical-align:baseline;
    font-family: Arial, Verdana, sans;
    color: #666666;
}


a {
    color: #FF9900;
    text-decoration: none;
}

p {
    font-size: 10pt;
}

/************************************************************/
/* Main Container  and Layout                               */
/************************************************************/
#container {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#FFFFFF url('images/body_background.png') repeat-y scroll 0 0;

}

#footer {
    background-image: url('images/footer_background.jpg');
    background-repeat: no-repeat;
    background-color: #7b7b7b;
}

#button_strip{
    background-image: url('images/button_strip_background.jpg');
    height:34px;
}

#button_container {
    background-image: url('images/button_bar_shadow_background.png');
    height:34px;
}

#title_bar {
    height:84px;
    margin-top:10px;
    background-color:#e8e8ec;
    margin-bottom: 0px;
}

#title_bar img {
    border: 0px;
}

#bluebox {
    height:110px;
    background: #FFFFFF url('images/blue_top_large.jpg') no-repeat scroll 0 0;
    margin-bottom: 10px;
}

.bluebox_bottom {
    margin-bottom: 0px ! important;
}

#tale_left_listing {
    min-height:299px;
    background: #FFFFFF;
    padding-left: 10px;
}

#tale_left_listing_actual {
    min-height:299px;
    padding: 5px;
    width:100%;
    background: #FFFFFF url('images/inner_background_large.jpg') repeat-x scroll 0 0;
}

#tale_left_listing_actual p {
    margin-left: 8px;
}


.group_listings_fixed_large p {
    padding-left: 0.4em;
    text-align: left;
}

#group_invites {
}

#group_invites li {
    display: inline;
    width: 80px;
    height: 110px;
    overflow: hidden;
    float: left;
}

#group_invites li img {
    border: 2px solid #cccccc;
}

#group_invites li div {
    width: 78px;
    text-align: center;
}

.group_invites_pic {
    height: 88px;
}

#tale_right_learn {
    min-height:192px;
    background: #FFFFFF;
    padding-left: 0px;
    padding-top: 5px;
    margin-bottom: 5px;
    background: #FFFFFF url('images/inner_background_learn.jpg') repeat-x scroll 0 0;
    width:370px;
}

#tale_right_learn form {
    margin-top: 4px;
}

#tale_right_extra {
    min-height:192px;
    width:380px;
    margin:0px;
}

#tale_iphone_area{
    min-height:192px;
    background: #FFFFFF url('images/inner_background_iphone.jpg') repeat-x scroll 0 0;
    margin-left: 0px ! important;
    margin-right: 10px ! important;
    width:185px;
}

#tale_tagcloud_area {
    min-height:192px;
    background: #FFFFFF url('images/inner_background_iphone.jpg') repeat-x scroll 0 0;
    width:185px;
    margin-left: 0px ! important;
    margin-right: 0px ! important;
    overflow: hidden;
}

.tale_listings {
    margin: 5px ! important;
    
}

.tale_listings img {
    border: 0px;
}

.tale_listings input {
    margin-left: 0.8em;
}

.tale_listings_fixed_large {
    height: 156px;
    overflow: hidden;
    background-image: url('images/tale_listing_large_background.png');
    border: 1px solid #CCCCCC;
}

.tale_listings_fixed_large p {
    margin-left: 10px ! important;
    text-align: left;
    margin-right: 5px;
}

.tale_listings_fixed_medium {
    height: 146px;
    overflow: hidden;
    background-color: white;
}

.icon {
    border: 0px;
    margin-left: 0.1em;
    margin-right: 0.1em;
    padding: 1px;
    float: right
}



/************************************************************/
/* Title Bar Items                                          */
/************************************************************/

#lamp_logo_bottom {
    float: left;
    display: inline;
}

#signup_area {
    width: 220px;
    color: #FF9900 ! important;
    font-weight: bold;
    font-family: Verdana, arial, sans;
    
    text-align: center;
}

#signup_area a {
     color: #FF9900 ! important;
     font-size: 1.2em ! important;
}

#signup_area p {
    margin-top: 20px;
    margin-left: 30px;
}

#signup_area small {
    font-size: 0.7em;
}


#tagline {
    margin-top:10px;
}

#bluebox_seperator {
    float: left;
    display: inline;
}

#signup_image {
    margin-top: 28px;
    margin-right: 5px;
    float: right;
    border:0px;
}

#bluebox_left {
    width: 680px;
}

/* extras */

#tale_iphone_area img{
    float: left;
    padding: 4px;
    margin-left:4px;
    margin-bottom: 20px;
}


#tale_right_learn object {
    padding: 10px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* Tale Listings */

.tale_header_image{
    margin-left:10px;
    margin-top:10px;
    border: 0px;
}



/************************************************************/
/* General Columns                                          */
/************************************************************/
.tot_left {
    padding: 10px;
    width:100%;
   
}

/* TODO - Eventually replace with such classes for multiple columns */

.greygradient {
    min-height:299px;
    padding: 5px;
    background: #FFFFFF url('images/inner_background_large.jpg') repeat-x scroll 0 0;
}

.tot_left_actual {
    min-height:199px;
    padding-left: 10px;
    padding: 5px;
    background: #FFFFFF url('images/inner_background_large.jpg') repeat-x scroll 0 0;
}


.tot_right {
    width:100%;
    padding-top: 10px;
    margin-left: 0px;
}

.tot_right_actual {
    min-height:192px;
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
    background: #FFFFFF url('images/inner_background_learn.jpg') repeat-x scroll 0 0;
    width: 370px;    
}

.tot_content_header {
    padding: 5px;
    width: 100%;
}


#tale_centre {
    padding-left: 10px;
    padding-right: 10px;
    width:100%;
    width: 920px;
}


#tale_centre_actual{
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
    background: #FFFFFF url('images/inner_background_large.jpg') repeat-x scroll 0 0;
}

#tale_centre_actual p {
    margin-left: 8px;
}

/************************************************************/
/* Typography                                               */
/************************************************************/
.tale_listings h4 {
    color:#3399cc;
    font-size: 0.8em;
    margin-bottom: 0px;
    margin-top: 1px;
    margin-left: 10px;
    margin-right: 5px;  
}

.tot_content_header h4 {
     color:#3399cc;
    font-size: 11pt;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px; 
}

.tot_content_header h4 .faded {
    text-shadow: 0px 1px 1px #fff;  
}

.tot_content_header .faded a {
    color: #3399cc;
}

.tot_content_header .faded a:hover {
    color: #FF9900;
}

#tale_right_extra h3 {
    color:#3399cc;
    font-size: 1.0em;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 5px;
    padding: 5px;
}

h2 {
	font-size: 11pt;
	type-face: bold;
	color :#3399CC;
	margin-bottom: 2px;
    margin-top: 2px;
    /*margin-left: 5px;*/
    margin-right: 5px; 

}

#footer h5 {
    color: white;
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 2px;
    margin-top: 4px;
}

#footer ul {
    list-style: none;
    margin-left: 100px;
    margin-top:5px;
    margin-bottom: 1px;
    padding: 0px;
}

#footer li {
    display: inline;
    font-size: 8pt;
    color: white;
}

#footer li a{
    font-size: 8pt;
    color: #ff9900;
}


#footer p {
    color: white;
    font-size: 7pt;
    text-align: center;
}

.tot_left_actual p {
    margin-left:10px;
}

#bluebox_left p {
    font-size: 9pt;
    margin-top: 0.2em;
}

#bluebox_left h2 {
    font-size: 1.3em;
    font-style: capitalize;
    margin-top: 0.3em;
    margin-bottom: 0.1em;
    color: #2277bb;
    font-family: Verdana, arial, sans;
}

#tale_iphone_area p, .tagbox p {
    font-size: 9pt;
    margin-left: 10px;
    margin-right: 5px;
}

#tale_iphone_area img{
    border: 0px;
}

.tale_listings p{
    font-size: 0.7em;
    margin-left: 5px;
    margin-right: 3px;
    margin-top: 1px;
    margin-bottom: 0px;
}

.tot_tale_story p{
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 0px;
    padding-top: 10px;
    margin-bottom: 0px;
}

.tale_options {
    height: 21px;
    position: absolute;
    top: 12px;
    left: 78px;
    background: white;
    width: 70px;
    display: none;
    border: 1px solid #CCCCCC;
}


.group_options {
    height: 21px;
    position: absolute;
    top: 12px;
    left: 58px;
    background: white;
    width: 90px;
    display: none;
    border: 1px solid #CCCCCC;
}


.seemore {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 8px;
    margin-right: 4px;
    text-decoration: none;
}

.seemore a {
    text-decoration: none;  
}

.seemore a:hover {
    text-decoration: underline;  
}

.tot_tale_meta  {
    position: absolute;
    left: 440px;
    margin-top: 5px;
    font-size: 0.8em;
    color:#006699;
    font-weight: bold;
    background: white;
    border: 1px solid #CCCCCC;
}

.image_quote_left {
    float: left;
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

.image_quote_right {
    float: right;
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

#tale_right_learn p{
    margin-left: 10px;
    font-size: 9pt;
}

small {
    font-size: 8pt;
}

.paginate-pages {
    font-size: 0.8em;
    color: #3399CC;
    margin-left: 10px;
}

.paginate-current {
    font-size: 0.8em;
    color: #006699;
    margin-left: 5px;
}

#tale_right_learn h5, .tot_right_actual h5 {
    font-size: 9pt;
    margin-left: 10px;
}

.tot_right_actual p {
    margin-left: 10px;
}

#geo_dialog p {
    font-size: 8pt;
}

.tale_centre_actual li {
    font-size: 10pt;
}

.centered {
    text-align: center;
}

.statement {
    font-size: 1.1em; 
    padding:20px;
    color: #999999;
    text-shadow: 0px 1px 1px #fff;  
}

/************************************************************/
/* Navigation Bar                                           */
/************************************************************/

#navcontainer{
    width: 540px;
    float: right;
}


ul#navlist{
    white-space: nowrap;
    margin: 0px;
    height: 34px;
    float: right;
    padding-top: 2px;
}

#navlist li
{
    display: inline;
    list-style-type: none;
    padding-top: 2px;

}

#navlist a { 
    border-left: 1px solid black;
    padding-bottom: 12px;
    padding-top: 6px;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 0.7em;
    height:34px;
    font-weight: bold;
} 

#navlist a:link, #navlist a:visited{
    color: #fff;
    text-decoration: none;
}

#navlist a:hover{
    color: #fff;
    background-color: #369;
    text-decoration: none;
    background: url('images/button_tick.png') no-repeat top center;
}

#navlist .active{
    color: #fff;
    background-color: #369;
    text-decoration: none;
    background: url('images/button_tick.png') no-repeat top center;
}

#search_bar_form {
    width: 220px;
    display: inline;
}

#search_bar {
    padding: 5px;
    width: 220px;
    margin-top: 3px;
    float: left;
}


#search_bar input {
    border: 0px;
    width: 186px;
    margin-left: 5px;
    margin-right: 0px;
    float: left;
    height:16px;
}

#search_bar img {
    margin-left:0px;
    float:left;
    border: 0px;
}


/************************************************************/
/* Groups                                                   */
/************************************************************/

.avatar {
    border:1px solid #CCCCCC;
}

.avatar_blank {
    border:0px;
}

.avatar_name {
    font-size: 0.8em;
    font-weight: bold;
    overflow: hidden;
    width: 78px;
    text-align:center;
}
.groups_image_left {
    float: left;
    width: 202px;
    height: 156px;
    padding: 8px;
   
}

.groups_image_left img {
    border: 1px solid #CCCCCC;
}


.group_listings_fixed_large {
    height: 156px;
    overflow: hidden;
    background-image: url('images/group_listing_large_background.png');
    border: 1px solid #CCCCCC;
}

#members li {
	list-style-type: none;
	display: inline;
	
}



/************************************************************/
/* TAG Cloud                                                */
/************************************************************/

.tag-cloud-0 { font-size: 60%; color: #3399CC; }
.tag-cloud-1 { font-size: 70%; color: #3399CC;}
.tag-cloud-2 { font-size: 80%; color: #3399CC;}
.tag-cloud-3 { font-size: 90%; color: #3399CC;}
.tag-cloud-4 { font-size: 100%; color: #3399CC;}
.tag-cloud-5 { font-size: 110%; color: #3399CC;}
.tag-cloud-6 { font-size: 120%; color: #3399CC;}
.tag-cloud-7 { font-size: 130%; color: #3399CC;}
.tag-cloud-8 { font-size: 140%; color: #3399CC;}
.tag-cloud-9 { font-size: 150%; color: #3399CC;}
.tag-cloud-10 { font-size:160%; color: #3399CC;}

/************************************************************/
/* Form Elements                                            */
/************************************************************/


.register_form label{
    width: 150px;
    float: left;
    margin-top: 5px;
    font-size: 10pt;
}

.register_form li {
    width: 400px;
    height: 50px;
}

.register_form input {
    border:1 px solid #999999;
    height:18px;
    width:180px;
}

.register_form .button {
    width: 100px;
    margin-left: 200px;
}

.register_form ul {
    list-style: none;
}

.general_form ul {
    list-style: none;
}

.general_form li {
     margin-top: 5px;
     font-size: 9pt;
}

.general_form .button {
    margin-top 10px;
    margin-left: 30px;
}

.general_form label{
    width: 150px;
    float: left;
    margin-top: 5px;
    font-size: 10pt;
}


#login_header{
   margin-top:32px;
   margin-bottom:0px;
}

#login_header p{
 font-size: 0.9em;
 text-align: right;
 margin: 0px;
}

#login_header_form input[type='submit']{
   /* float: right;*/
    margin-left: 15px;
}

.totform {
    font-size: 0.9em;
}

.totform div{
    font-size: 0.9em;
}

.totform fieldset textinput, .totform fieldset textarea, .totform fieldset input{ 
    line-height:100%; 
    vertical-align: middle; 
    background-color: white; 
    border: 1px solid #CCCCCC; 
    -moz-border-radius: 5px 5px 5px 5px; padding: 3px; 
}

.totform fieldset input:focus, .totform fieldset textarea:focus, .totform fieldset select:focus{
    border:1px solid  black; 
    -moz-border-radius: 5px 5px 5px 5px;
}

.totform ul {
    list-style:none;
    min-height: 2em;
    display: block;
}

.totform li {
    text-align: left;
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

.totform .errorlist {
    font-size: 0.9em;
    color: #FF9900;
}

.totform fieldset input {
   float:left;
   margin-right: 2em;  
}

.totform .privacy input {
    float:none;
    margin-left: 2em;
}

.privacy {
    margin-left: 5em;
}

.taleeditform label{
   width: 10em ! important;
}

.taleeditform input [type='text']{
    width: 30em;
}

.taleeditform textarea {
    width: 30em;
}

.totform form * {margin:0;padding:0;}

.totform legend {
	color:#FF9900;
	*margin-left:-7px;
}
.totform fieldset {
	border:1px solid #dedede;
}

.totform label {
	float:left;
	width:20em;
	font-size: 0.9em;
	margin-left: 2em;
}

.totform label strong {
	
    font-weight: bold;
}

.totform .radio {
	position:relative;
	border:0;
}
.totform .radio span {
	position:absolute;
	top:0;left:0;
	width:5em;
}
.totform .radio ul {
	margin-left:5em; /* Since the legend is out of flow. set margin, so inputs are inline */
	list-style:none; /* Dont want bullets */
}
.totform .radio li {
	position:relative; /* Fix a bug in IE zoom functionality */
	display:inline; /* Display the inputs in a line */
	white-space:nowrap; /* We dont want a label to wrap between the input and label */
}
.totform .radio label, .radio input {
	width:auto; /* Reset the width on the label from the 5em, set earlier */
	float:none; /* Reset the float from left on the label, set earlier */
	vertical-align:middle; /* Align the radio buttons with the inputs */
}


.userform {
    width: 250px;
    overflow: hidden;
    margin-left: 50px;
    font-size: 0.9em;
}


.userform ul {
    list-style:none;
    margin: 0px;
    padding-left: 0.5em;
}

.userform li {
    font-size: 0.9em;
    margin-left: 0px;
    margin-bottom: 0.2em;
}


.userform input[type='text']{ 
    line-height:100%; 
    font-size: 0.9em;
    vertical-align: middle; 
    background-color: white; 
    border: 1px solid #CCCCCC; 
    -moz-border-radius: 5px 5px 5px 5px; padding: 3px; 
}

.userform input[type='text']:focus{
    border:1px solid  black; 
    -moz-border-radius: 5px 5px 5px 5px;
}

.userform input[type='submit'] {
    margin-top: 1em;
}

.userform .errorlist {
    color: #FF9900;
}

.tale_create_textarea {
    float: right;
    margin-bottom: 5px;
    margin-right: 250px;
}

#photo_clear_button{
    margin-left: 5px;
}

#id_description {
    width: 30em;
}

#photo_input {
	position: relative;
	width: 23em;
	display: inline;
}

span.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 25em;
}

#photo_fake_input {
    width:15em;
}

#id_keywords {
    width: 20em;
}

.button_small {
    border-bottom: 1px solid #006699 ! important;
    border-right: 1px solid #006699 ! important;
    border-left: 1px solid #99CCFF ! important;
    border-top: 1px solid #99CCFF ! important;
    background: #3399CC ! important;
    color: white ! important;
    font-weight: bold ! important;
    font-size: 8pt;
}

.button_small {
   font-size: 6pt ! important; 
}

.input_url {
    width: 25em;
}

/************************************************************/
/* Thing / Tale Listings                                    */
/************************************************************/
.tot_tale_complete{
    width: 492px;
    margin-left: 8px;
    margin-bottom: 1em;
    border: 1px solid #CCCCCC;
}

.tot_tale_top {
    width:100%;
    height: 11px;
    background: url('images/tale_list_tri_top.png') no-repeat top center;
}

#medialist {
     list-style-type: none;   
}

.tot_tale_bottom {
    width:100%;
    height: 11px;
    background: url('images/tale_list_tri_bottom.png') no-repeat top center;
}

.tot_tale_story {
    min-height: 50px;
    background-color: white;
    padding-bottom: 10px;
  
}

.tot_tale_story a {
    color: #3399CC ! important;
}


.seemore {
    float: right;
}

.seemore a {
    color: #FF9900;
}

#profile_picture {
    padding: 0px;
     width: 81px;
     height: 94px;
     float: left; 
     margin-left: 0.7em;
     margin-top: 0.1em;   
}

.profile_picture_small {
    padding-left: 3px;
    width: 50px;
    height:50px;
    float: left;
    padding-top: 2px;
}

.profile_picture_small img{
    margin-left: 5px;
    border: 1px solid #cccccc;
}

#profile_picture img {
   border: 1px solid #cccccc;
}

#feature_photo {
    display: block;
    width:354px;
    height: 270px;
    margin-left: 8px;
    margin-top: 2em;
}

#feature_photo img {
    border: 1px solid #cccccc;
}


#feature_group_photo {
    display: block;
    width:354px;
    height: 270px;
    margin-top: 5px;
    margin-left: 8px;
}

#feature_group_photo img {
    border: 1px solid #cccccc;
}

/************************************************************/
/* Errors                                                   */
/************************************************************/

/************************************************************/
/* PAGINATOR                                                */
/************************************************************/

.pager {
    font-size: 10pt;
    text-align: center;
      padding-top: 10px;
      padding-left: 40px;
      padding-bottom: 10px;
}
   
.pager .page a {
      border: 3px solid #EEEEEE;
      margin-left: 1px;
      margin-right: 1px;
      padding-left: 4px;
      padding-right: 4px;
      text-decoration: none;
      color: #000000;
}

.pager .current {
      border: 3px solid #ff9900;
      margin-left: 2px;
      margin-right: 2px;
      padding-left: 2px;
}


/************************************************************/
/* Others                                                   */
/************************************************************/
#map_canvas {
    width: 640px; 
    height: 480px; 
    float:right; 
    margin-bottom: 10px;
    margin-right:10px;
}
    
#trans2 {
    position: absolute;
    top: 0px;
    left:-390px;
    z-index: 20;
    width: 390px;
    height: 224px;
    display: none;
}

hr {
    border: 0;
    width: 80%;
    color: #cccccc;
    background-color: #cccccc;
    height: 2px;
}

.gmnoprint h4 {
    margin-top: 2px;
    margin-bottom: 2px;
}

.print_input {
    margin-left: 10px;
}

.gmnoprint p {
    margin-top: 1px;
    margin-bottom: 1px;
}

.termsandconditions p{
    font-size: 6pt;
}

.termsandconditions li{
    font-size: 6pt;
}


#twitter_follow_us {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 0px;
}


#recaptcha_response_field {
	
	left:0px;
}