/*
   base.css
   Overall styling for the site.
   
   Created by Jeff Pollard on 2008-04-20.
   Copyright 2009 Lost+Found. All rights reserved.
*/


/*************************************************************************************
 PAGE LAYOUT
 This mostly uses the Yahoo User Interface library for structuring
 http://developer.yahoo.com/yui/
*************************************************************************************/
#header { height: 85px; background: transparent; position: relative; color: red; }
#logo { position: absolute; bottom: 15px; left: 15px; }
#art-by { position: absolute; top: 10px; left: 10px; color: #7A7A7B; text-decoration:none; }
	#art-by:hover { color: #FFF; text-decoration: underline; }
#login-state { color: #FFF; padding: 8px 10px; margin: 0; top: 0; text-align: right;}
	#login-state a { color: #FFF; }

ul#navigation { background: transparent; text-transform: uppercase; padding-left: 8px; height: 31px; }
	ul#navigation li { float: left; margin: 0 8px; }
	ul#navigation li a { display: block; padding: 10px 13px 8px 13px; text-decoration: none; font-weight: bold; }
	
#header, #navigation { line-height: 1;}
#content { padding: 20px 0; background-color: #FFF;}
#yui-main .yui-b { padding: 0 0 20px 20px }
#supplement { border-left: solid 1px #C7C3C2; padding: 0 20px; margin-left: 0px; }
.wrapper { padding: 0 20px; }

#footer { background: #201F1D url(base/footer_bg.gif) repeat-x top; color: #fff; text-align: left; padding: 35px 0; line-height: 1.3;}
#footer .container { width: 950px; margin: 0px auto;}
#footer h3 { font-weight: normal; font-size: 2em;}
#footer h3 small { color: #6B696A; }
#footer p { font-size: 1.1em; }
#footer ul { padding: 1em; background: #000; margin: 1.5em 0px;}
#footer li { display: inline; font-size: 1.1em; text-transform: uppercase; }
#footer li + li { margin-left: 2em; }
#footer li a { color: #999; text-decoration: none;}
#footer p.citations { color: #5F5F5F; }


/*************************************************************************************
 NAVIGATION SWITCHES
 These controll the active switches for each of the site sections
*************************************************************************************/
body#home ul#navigation li#nav-home a,
body#finds ul#navigation li#nav-finds a,
body#photos ul#navigation li#nav-finds a,
body#submit ul#navigation li#nav-submit a,
body#about ul#navigation li#nav-about a,
body#contact ul#navigation li#nav-about a,
body#profile ul#navigation li#nav-profile a
{ background: #FFF; padding-top: 9px; margin-top: 2px; color: #000; }


/*************************************************************************************
 DEFAULT PAGE STYLING
 These are the global settings for the page site, mostly for specific HTML elements,
 but also for the default content styling.
*************************************************************************************/
body { background: #E5E5A8 url(base/body_bg.gif) repeat-x scroll center -37px; font-family: "Helvetica", "Arial", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif; }
a { color: #666; text-decoration: none;}
a:hover {text-decoration: underline;}
h1, h2 { font-weight: bold; color: #0E0E0E}
strong { font-weight: bold; }
dt {float:left; font-weight:bold; margin-right:0.4em; text-align:right; width:90px;}
p + p { margin-top: 1em }

#navigation { font-family: "Trebuchet MS", sans-serif; }


/*Default table styling*/
table { width: 100%; margin: 1em 0; }
th { padding: 8px 6px 7px 6px; background: #111; text-align: left; color: #FFF; }
tr { border-bottom: solid 1px #E4E1DF; }
td { padding: 5px; }

/*Default page element styling*/
#content h1 { font-size: 275%; letter-spacing: -0.05em; margin-bottom: .25em; }
h2 { font-size: 170%; letter-spacing: -0.04em; margin-bottom: .75em;}
h2 strong { color: #333; }
p + h2 {margin-top: .75em;}
h3 { font-size: 110%; letter-spacing: -0.03em; font-weight: bold; }
h3.sub { color: #888; font-size: 100%; text-transform: uppercase; }
h3.notice { color: #666; margin: 1em 0; font-style: italic;}
h3 small { color: #999; }
h3 small a { color: #888; }
h4.empty { font-style: italic; color: #666; font-weight: bold; border: none; font-size: 110%;}

.paging div { display: inline; }
#flash
.spaced { margin: 1em 0; }
.list-bookend { border-bottom: solid 1px #D4DBAC; border-top: solid 1px #D4DBAC; padding: .25em 0; }
a.more { float: right; margin-top: 10px; font-size: 90%; }

p.abstract { font-size: 130%; }

/*Flash Messaging*/
.message { font-weight: bold; padding: 7px 9px; margin: 0 20px 15px 20px; background: #EFEFEF; border: solid 1px #C4C4C4;}
  .message .closer { float: right; margin-left: 10px; text-decoration: none; color: #222;}
#flashMessage, #authMessage { background-color: #FBFFD9; border-color: #5E440B;  color: #5E440B; }
#errorMessage { background-color: #FFDEDE; border-color: #871414;  color: #871414; }

/*Default form styling*/
form { margin: 1em 0; }
form h2 { margin: .5em 0; }
legend { font-size: 160%; letter-spacing: -0.04em; font-weight: bold; }
fieldset { padding: 1em 0; }
label { display: block; font-weight: bold; }
.input { padding: .75em 0; margin-top:1.25em; }
.input + .input { border-top: solid 1px #E4E1DF;}
.input input, .input textarea, .input select { border: solid 1px #AFAFAF; padding: 4px; color: #333; background: #F3F3F3; margin: .1em 0; }
.input input:focus, .input textarea:focus { background: #FAFAFA; border-color: #555; }
.input small { display: block; color: #666; font-size: 90%; }

.submit input, a.button { background: #333528; border: 0; solid #999; solid #EFEFEF; color: #EFEFEF; padding: 6px 10px; text-transform: uppercase; -moz-border-radius: 5px;, -webkit-border-radius: 5px; font-weight: bold; }
a.button { text-decoration: none; }
#find-photos a.button, #find-reviews a.button {float: right; font-size: 80%; padding: 6px 10px 4px 10px;}
a.button:hover { color: #FFF; background-color: #222;}

.error-message { font-weight: bold; color: red; }
.form-error { background: #FFDDDD !important; }
label:after { content: ":"; }
.required label:before { content: "*"; }

/*Spcecial styling for the inline form*/
form.inline { background: #EFEFEF; padding: 1em; }
form.inline h3 { margin-bottom: 1em; text-transform: uppercase; color: #555; }

#content ul li {
  list-style: disc;
}

/*Any uls or ols marked as rows need no bullet*/
ul.subnav li, ul.rows li, ol.rows li { list-style: none !important; }

/*General setting to space things off the edges*/
.copy p .copy dl { margin: 1em 0; }
.copy p { line-height: 1.5em; }

/*Links right below the title*/
.breadcrumb { margin-bottom: 1.5em; text-transform: uppercase; font-weight: bold; color: #949594; letter-spacing: -0.03em; }

/*Special style for ol rows*/
ul.summary { margin: 0; font-size: 90%; }
	ul.summary li { padding: 0 1em; border-right: solid 1px #C4C4C4; display: inline; }
		ul.summary li:first-child { padding-left: 0; }
		ul.summary li.last { border: none; }

/* Intro section with gray bottom gradient*/
/*.boxed { background: #FFF url(base/boxed_bg.gif) repeat-x bottom; border-bottom: solid 3px #DAD5D4; }*/
.boxed { padding: 20px; }

/*Special variant of .boxed to remove the margin*/
.mast { margin: auto -13px 20px -20px; padding-top: 20px; padding-bottom: 6px; position: relative; }
	.mast p { margin: 0; }
	.mast img { float: left; margin-bottom: 20px; }

/*Section of the page that is padded with a border*/
.section + .section {padding-top: 1.5em; margin-top: 1.5em;}
.section + .section { border-top: solid 1px #E4E1DF; }
.section h2 { margin-bottom: .5em; }

/*Adds spacing and a border to internal blocks that need to be separated */
.divided + .divided { border-top: solid 1px #D4DBAC; margin-top: 1.5em; padding-top: 1.5em;}

/*Over-arching tags style for the whole site*/
ul.tags li { display: inline; }
.tag, .tags a { background: #FFECC3; border-bottom: solid 2px #D5CECB; font-weight: bold; text-transform: uppercase; color: #000; text-decoration: none; font-size: 90%; padding: 2px; margin-right: .1em; color: #333; }
	.tag:hover, .tags a:hover { background: #F9DA98; border-color: #B0A6A3; color: #000; }	

/*Big loader*/
.big-load { color: #888; font-size: 130%; text-align: center; margin: 1em 0; padding: 2em 0; border-top: solid 1px #E4E1DF; border-bottom: solid 1px #E4E1DF;}
	.big-load h3 { font-size: 200%; text-transform: uppercase; }
	
/*Pagination*/
.paging { color: #555; font-size: 90%; margin: 15px 0}
	.paging .control { float: right; }
	
/*Avatar*/
.review .avatar { margin: 2px 0;}
.review .avatar img { width: 40px; height: 40px; }
	
/*************************************************************************************
 Split row styling
*************************************************************************************/	
.split { clear: left; }
	.split .logo { float: left; width: 134px; }
		.split .logo img { width: 134px; height: 100px; }
	.split .main { float: right; width: 454px; }
		.split .main h3 { text-align: left !important; }
	.split .intro { float: left; width: 80px; line-height: 1;}
	.split h3 { font-size: 110%; }
	.split h3.title { font-size: 140%; }
	.split p.copy {margin: 1em 0;}

#finds .split .main { width: 465px; }

/*************************************************************************************
 FORM FIELD OVERRIDES
*************************************************************************************/
#FindCountryId { width: 250px ; }
#FindKeyword { width: 300px; }
#FindName { width: 400px; }
#FindCity { width: 300px; }
#FindDescription { width: 600px; }
#FindAddress { width: 300px; }
#FindPhone { width: 250px; }
#FindHours { width: 450px ; }
#FindDirections { width: 400px; }
#FindWebsite { width: 300px; }
#FindEmail { width: 300px; }
#FindTags { width: 400px; }

#UserName { width: 300px; }
#UserEmail { width: 400px; }
#UserPassword { width: 300px; }
#UserConfirmPassword { width: 300px; }
#UserOccupation { width: 400px; }
#UserBiography { width: 600px; }

#ReviewTitle { width: 550px; }
#ReviewBody { width: 550px; }

#FavoriteCategoryId { width: 400px; }

#ContactEmail, #ContactName { width: 400px; }
#ContactMessage { width: 600px; }

/*************************************************************************************
 SPECIAL STYLES FOR THE SUGGESTIONS VIEW PAGE
*************************************************************************************/
.boxed .description { margin-left: 270px; }
.boxed a#edit { position: absolute; right: 20px; bottom: 20px; font-size: 90%; opacity: .7; text-decoration: none; text-transform: uppercase; }
	.boxed a#edit:hover { opacity: 1; }
.main-image { width: 250px; height: 187px; } /*Again, digicam size*/
dl.supplementary { width: 500px; }
#ReviewAddForm {display: none;}


/*************************************************************************************
 PROFILE PAGE
*************************************************************************************/
#profile #user-info .avatar { float: left; margin-right: 20px;}
#profile #user-info {margin-bottom: 20px;}
#profile .subnav .avatar {float: left; margin-right: 20px;}
#profile #user-info p, #profile #user-info dl {margin-left: 120px;}


/*************************************************************************************
 PHOTO STUFF
*************************************************************************************/
/*Full size styling*/
#full-photo { margin:3em 0; text-align: center; }

/*Thumbnail stlying for photos*/
.thumbnail img { width: 125px; height: 94px; } /* Keeping with digicam proportions (i.e. 800x600)*/
.thumbnail li { display: inline; float: left;}
.thumbnail li a { text-decoration: none; border: solid 1px #EFEFEF;  padding: 3px; display: block; margin: 0 5px; }
.thumbnail li a:hover { border-color: #C4C4C4; }


/*************************************************************************************
 SUPPLEMENTAL STUFF
*************************************************************************************/
#supplement div.container { margin-bottom: 1em; padding: 0 0 0 11px; }
#supplement h2.navigation { background-color: #FFF070; }

#supplement ul.subnav { background: #000; margin 0; border: solid 2px #EFEFEF; color: #FFF; -moz-border-radius: 8px;}
  #supplement ul.subnav a { text-decoration: none; }
  #supplement ul.subnav { padding: 1em; font-size: 110%; }
  #supplement ul.subnav li + li { margin-top: .5em; padding-top: .5em; border-top: 1px solid #2A2A2A; }
  
  #supplement ul#about-index li#about-link a, 
  #supplement ul#about-team li#team-link a, 
  #supplement ul#about-contact li#contact-link a,
  #supplement ul#profile-edit li#edit a,
  #supplement ul#profile-avatar li#avatar a,
  #supplement ul#profile-finds li#finds a
  { color: #FFF; font-weight: bold; font-size: 120%; }	
	
#supplement h2 { font-size: 140%; margin-bottom: .5em; }

#supplement #finds-map a { display: block; text-align: right; }


#supplement .minimal .logo {float: left; margin-right: 10px;}
#supplement .minimal .logo img {width: 50px; height: 50px;}


/*************************************************************************************
 SPECIAL STYLES
*************************************************************************************/
#FindSearchForm .mast p { color: #555; }
#FindSearchForm h2 {margin-top:0;}
#FindSearchForm p {margin-bottom: 2em;}

input.prompt { color: #888; }

.finds form.search { padding: 1em; background: #EFEFEF; border: solid 1px #C4C4C4; }
.finds form.search .submit { float: right; }
.finds form.search h2 { margin-bottom: 0; }
.finds form.search #FindKeyword,  .finds form.search #FindCity { 
	float: left; font-size: 1.55em; width: 400px;
	padding: 0.35em;
}

#about .team { margin-top: 2em; }
#about .team h4 { color: #777; margin-bottom: 1em;}
#about .team li img { float: left; margin-right: 15px; width: 100px; }
#about .team p, #about .team h3, #about .team h4 { margin-left: 115px; }
#about .team li + li { padding-top: 15px; margin-top: 15px;}


/*************************************************************************************
 HOMEPAGE
*************************************************************************************/
#home .hero {
	margin-bottom: 2em;
}


/*************************************************************************************
 FINDS PAGE
*************************************************************************************/
body#finds .abstract {
  margin: .25em 0 1.5em 0;
}

body#finds h1 {
  margin: 0;
}

#finds h2 {
  font-size: 175%;
}

#finds #find > h2 {
  font-size: 180%;
}

#finds #find {
  border-right: 1px solid #C7C3C2;
  float: left;
  width: 58.1%;
}

#finds #find ul.rows {
  margin-right: 20px;
}

#finds #find form {
	background: #F2F2F2;
	margin-top: 0;
	padding: 13px;
	margin-bottom: 20px;
}

#finds #find form #FindKeyword {
  font-size: 115%;
  padding: 3px;
  width: 355px;
}

#finds #find form .submit input {
  float: right;
  margin-top: 0;
}

#finds #find .split .main { width: 350px; }

#finds #share {
  float: right;
  width: 40.1%;
}

/*************************************************************************************
 MOCKED
*************************************************************************************/
.mocked {
  background-color: #DFDFDF;
  color: #999;
  font-size: 250%;
  padding: 60px 20px;
  text-align: center;
}

/*************************************************************************************
 CLEARFIX
*************************************************************************************/
.clearfix:after { 
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}

.clearfix {display:inline-block;} 
/* Hide from IE Mac \*/ 
.clearfix {display:block;} 
/* End hide from IE Mac */