/*
Yellow:                 #faba1a
Light Yellow:           #ffe9af
Red:                    #b70000
Green:                  #6ea34c
Blue:                   #cbece8
Medium Blue             #92d1bc
Medium Pink (Eraser)    #e98a9c
Light Pink (Eraser)     #ffdce3
*/

/* Reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, 
fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; }
html, legend { color: #000; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
del, ins { text-decoration: none; }
li { list-style: none; list-style-type:none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
abbr, acronym { border: 0; font-variant: normal; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
*:focus { outline:0; }

body { 
  font-family:Georgia, serif;
  color:#333;
  background: url(../images/paper_background.gif) repeat -715px 0;
}

.button { cursor:pointer; }

a { color:#b70000; text-decoration:none; line-height:29px; }
a:link { }
a:visited { }
a:hover { 
    text-decoration:underline;
}
a:active { }

a.disabled:hover { text-decoration:none; cursor:default; }

p { margin:0 0 29px 0; }

input.empty { color:#999; }

li.error textarea,
li.error input { background:#ffdce3; border:2px solid #b70000; }
li.error b { background:#ffdce3; }
ul.errorlist li { color:#b70000; }

#wrapper {
  margin:0 auto;
}
#header, #footer, #bottom, #top { clear:both; }
#wrapper, #header, #center, #footer, #bottom, #top { width:970px; }
#header, #left, #center, #right, #footer, #bottom, #top { float:left; }

#center h1,
#center h2,
#center p,
#right h1,
#left h1,
#left p { margin:0 0 29px 0; }
#center h1,
#left h1,
#right h1 { font-size:30px; }
#center p { line-height:29px; }

#center blockquote { 
  float:right; font-size:22px; padding:18px; color:#333; clear:right; width:400px; margin:0 0 29px 29px; text-align:center; background:#cbece8; 
}
#center blockquote small { color:#666; display:block; font-size:11px; margin:6px 0 0 0; line-height:16px; font-weight:bold; text-transform:uppercase; }
#center h2,
#right h2 { font-size:24px; }

#left { width:260px; }
#right { width:680px; margin:0 0 0 20px; }

/* Header */
#header { margin:0; }
#header a { line-height:0; }
#header img.logo { }
#header a, #header ul.nav, #header .social { float:left; }
#header .search { float:right; }
#header a { padding:0; margin:0; }

#header div.logo,
#header a.promo { width:446px; }
#header div.logo { float:left; padding:0; }
#header div.top { float:left; height:22px; width:970px; }
#header img.tagline { float:right; margin:8px 0 0; }

/* Donors Choose Promo */
#header a.promo { height:37px; margin:8px 0 0; }
#header a.promo { background:url(../images/header/donors_choose_gift_certificate.png); }

/* Top-Level Search */
#header .search { width:328px; padding:30px 0 11px 0; }
#header .search .input { background:url(../images/header/search_input.png) no-repeat; float:left; }
#header .search .input input { border:0; background:none; padding:16px 8px 16px 16px; font-size:12px; width:170px; }
#header .search .submit { background:url(../images/header/search_button.png) no-repeat; width:130px; height:46px; float:left; cursor:pointer; }
#header .search { font-size:14px; }

/* Facebook & Twitter */
#header .social { padding:0 34px; }

.form .social { text-align:center; }

/* Main Nav */
#header ul.nav { width:970px; z-index:12; }

/* Footer */
#footer { margin:22px 0 19px; padding-bottom:19px;   line-height:18px; background:#fff; }
#footer ul { float:left; }
#footer ul li { display:inline; }
#footer ul,
#footer ul li a { line-height:12px; }
#footer ul li a { font-size:12px; }

#footer p { line-height:12px; float:right; padding:0 8px; margin:0; }

#footer p small,
#footer ul li a { color:#62b2c6; }
#footer p small { font-size:10px; }
#footer ul li a { font-size:12px; padding:0 8px; }

/* Error */ 
.error #left { width: 538px; height:200px; text-align:center; padding:29px 0; }
.error #right { width:412px; }
.error #right h1 { font-size:76px; color:#faba1a; padding-top:45px; margin-bottom:12px; text-shadow: 1px 2px 0.05em #999; }
.error.error-404 #right h1 { padding-top:0; margin-bottom:0; }
.error.error-404 #right .search { margin:28px 0 0; }
.error.error-404 #right .search input.keywords { width:250px; height:19px; padding:3px 6px 2px; }
.error #right h2 { font-size:24px; line-height:29px; width:350px; }

/* Home */
.home #top { margin:0; height:510px; }
.home #left { width:610px; height:406px; }
.home #bottom { margin:35px 0 5px; }

.home #right { float:right; width:338px; margin:22px 0 0; }
.home #right { z-index:10; }
.home #right p { position:relative; font-size:22px; line-height:29px; margin-bottom:29px; z-index:10; }
.home #right ul.buttons { padding:0; }
.home #right ul.buttons li { margin:14px 0; }

.home #bottom div a.heading { font-size:22px; color:#333; text-decoration:underline; font-weight:bold; display:block; padding:0 0 10px; }

.home #bottom div.twitter,
.home #bottom div.stories,
.home #bottom div.blog { float:left; margin:0 19px 0; }

.home #bottom div.twitter { margin-left:0; }
.home #bottom div.blog { margin-right:0; }

.home #bottom .twitter { width:278px; background:url(../images/home/twitter_blur_bg.png) repeat-y; }
.home #bottom .stories { width:285px; }
.home #bottom .blog { width:317px; background:url(../images/home/blog_blur_bg.png) repeat-y -5px 0; }

.home #bottom a { color:#186f84; }
.home #bottom .twitter ul.tweets { }
.home #bottom .twitter ul.tweets li { margin:0 0 18px; }
.home #bottom .twitter ul.tweets li b { font-weight:bold; }
.home #bottom .twitter ul.tweets li em { font-size:11px; }
.home #bottom .twitter ul.tweets li a { display:inline; }
.home #bottom .twitter ul.tweets li a.author { font-style:italic; }
.home #bottom .twitter ul.tweets li p { margin:0; }
.home #bottom .twitter ul.tweets li p,
.home #bottom .twitter ul.tweets li p a { line-height:18px; }

.story #right .related ul li.story { float:left; width:280px; height:82px; background:#faba1a; margin:0 8px 8px 0; border:1px solid #ff9601; }
.story #right .related ul li.story a.thumbnail { width:120px; height:67px; overflow:hidden; margin:7px 0 0 7px; border:1px solid #faba1a; }

.home #bottom ul.stories { overflow:hidden; height:360px; overflow-y:scroll; }
.home #bottom ul li.story { float:left; width:280px; height:82px; background:#faba1a; margin:0 8px 8px 0; border:1px solid #ff9601; }
.home #bottom li.story a.thumbnail { width:120px; height:67px; overflow:hidden; margin:7px 0 0 7px; border:1px solid #faba1a; }

.home #bottom ul.posts li { width:300px; margin:0 0 18px; }
.home #bottom ul.posts li em,
.home #bottom ul.posts li a { line-height:18px; }
.home #bottom ul.posts li em { font-weight:bold; color:#666; font-style:italic; }
.home #bottom ul.posts li a { }

/*
.home #footer { margin-top:14px; }
*/

/* Content Slider */
/*
.slidercontrols { position:absolute; top:80px; left:830px; }
.slidercontrols .previous,
.slidercontrols .next { position:absolute; cursor:pointer; width:30px; height:30px; }
.slidercontrols .previous:hover,
.slidercontrols .next:hover { text-decoration:none; }
.slidercontrols .previous { background:url(../images/previous_30x30.png) transparent; }
.slidercontrols .next { background:url(../images/next_30x30.png) transparent; left:100px; }
.slidercontrols li { display:block; }
*/

/* Video */
#video .loading { position:absolute; width:460px; height:260px; background:#000; z-index:25; top:124px; left:100px; text-align:center; }
#video .loading em { display:block; margin:110px; color:#ccc; }
#video .playhead { position:relative; left:402px; top:110px; font-weight:normal; color:#fff; font-size:12px; width:100px; font-family:monospace; }
#video .controls { position:relative; top:135px; left:150px; }
#video .button { float:left; width:30px; height:30px; cursor:pointer; margin:0 10px; }
#video .button.mute { background:url(../images/video/mute_30x30.png); }
#video .button.mute.on { background:url(../images/video/mute_30x30.png); }
#video .button.mute.off { background:url(../images/video/unmute_30x30.png); }
#video .button.playback { background:url(../images/video/play_30x30.png); }
#video .button.playback.play { background:url(../images/video/play_30x30.png); }
#video .button.playback.pause { background:url(../images/video/pause_30x30.png); }
#video .button.fullscreen { }
#video .onscreenplay {
  position:absolute;
  width:50px;
  height:50px;
  background:url(../images/video/play_50x50.png) no-repeat;
  text-align:center;
  z-index:20;
  top:230px;
  left:305px;
}

#video .afterplay { display:block; position:absolute; width:160px; height:160px; top:175px; left:245px; }
#video .afterplay .button { position:relative; width:75px; height:75px; margin:0 0 5px 5px; }
#video div.embed { position:absolute; width:300px; height:170px; background:#ffe9af; top:157px; left:170px; padding:12px; }
#video div.embed textarea { font-size:11px; font-family:monospace; width:100%; height:100px; border:0; }
#video div.share { position:absolute; width:300px; height:100px; top:195px; left:170px; padding:12px; background:#ffe9af; }
#video .share ul { margin:0 0 0 10px; }
#video .share ul li { float:left; margin:0 10px; }

#video div.share,
#video div.embed { -moz-border-radius:6px; -webkit-border-radius:6px; }

#video div.share p,
#video div.embed p { text-align:center; padding:0 32px; }

#video .afterplay #afterplay_share { background:url(../images/video/afterplay_share.png) no-repeat; }
#video .afterplay #afterplay_browse { background:url(../images/video/afterplay_browse.png) no-repeat; }
#video .afterplay #afterplay_embed { background:url(../images/video/afterplay_embed.png) no-repeat; }
#video .afterplay #afterplay_replay { background:url(../images/video/afterplay_replay.png) no-repeat; }

#video .embed a.close { position:absolute; left:295px; top:15px; }
#video .share a.close { position:absolute; left:295px; top:15px; }

/* Story */
li.story { line-height:12px; }
li.story a, 
li.story em { width:130px; margin-left:8px; float:left; }
li.story a { font-size:14px; color:#8f4618; line-height:14px; margin-top:8px; }
li.story em { font-size:12px; margin-top:3px; }

.story #disqus_thread { padding:14px; background:#edf5e9; margin:0 0 0 14px; }
.story #left { width:550px; }

#video { 
  position:relative;
  width:661px;
  height:507px;
  background: url(../images/story/video_background.png) no-repeat; 
  z-index:9;
  left:-40px;
  top:-40px; 
}
#video #player { position:relative; left:100px; top:124px; }

#left div.title,
#left div.subtitle { position:relative; }
#left div.title { top:24px; left:16px; z-index:11; }
#left div.title h1, 
#left div.title h2 { width:440px; margin:0; }
#left div.title h1 { font-size:22px; }
#left div.title h2 { font-size:14px;}

#left div.subtitle { top:-89px; left:158px; width:415px; z-index:14; }
#left div.subtitle h3 { float:left; margin:0 18px 0 0; }
#left div.subtitle ul { float:left; }
#left div.subtitle ul li { font-size:12px; line-height:12px; width:214px; }
#left div.subtitle ul li a { line-height:12px; }
#left div.subtitle ul li address { display:inline; font-weight:bold; }

.story #right { float:right; width:310px; margin:0; }

.story #right .ad {
  position:relative;
  width:372px;
  height:204px;
  background:url(../images/story/be_someones_hero_background.png) no-repeat;
  top:-40px;
  left:-55px;
  text-align:center;
}
.story #right .ad h3 { padding:72px 0 14px 8px; color:#fff; font-size:22px; }

.story .info { position:relative; top:28px; left:-60px; z-index:9; }
.story .info .header { position:relative; width:393px; height:97px; background:url(../images/story/about_background.png) no-repeat; }

.story #right .info .description { position:relative; width:310px; padding:0 0 18px 0; top:-15px; left:38px; background:url(../images/story/about_description_background.png) repeat-y; }
.story #right .info .description h1,
.story #right .info .description p,
.story #right .info .description h4,
.story #right .info .description ul.charities,
.story #right .info .description small { margin:0 0 0 12px; width:290px; }
.story #right .info .description h1 { font-size:24px; margin-bottom:12px; padding:0; }
.story #right .info .description p { line-height:18px; font-size:14px; }
.story #right .info .description small { font-size:12px; color:#666; }
.story #right .info .description h4 { line-height:12px; font-size:12px; margin-top:29px; margin-bottom:14px; text-transform:uppercase; color:#666; }
.story #right .info div.share { top:-15px; left:-1px; position:relative; width:393px; height:97px; background:url(../images/story/about_share_background.png) no-repeat; }

.story #right .info .share ul { margin:0 0 0 70px; }
.story #right .info .share ul li { float:left; margin:0 8px 0 0; }
.story #right .info .retweet { 
  background:url(../images/story/share/share_retweet.png) no-repeat;
  width:105px;
  height:65px;
  position:absolute;
  left:210px;
  top:-17px;
  z-index:10;
}
a.retweet b { position:relative; display:block; left:45px; top:26px; width:58px; text-align:center; font-size:12px; font-family:monospace; }
a.retweet:hover { text-decoration:none; }

ul.charities { margin:12px 0; }
ul.charities li a { color:#008eb7; font-size:18px; font-weight:bold; line-height:18px; }

.story #right .related { position:relative; display:inline-block; background:#faf698; top:-46px; left:-24px; text-align:center; padding:8px 0; }
.story #right .related ul { margin:10px 0 0; padding:0 0 0 15px; }
.story #right .related ul li { border:0; text-align:left; }

/* Forms */

.form ul { float:left; }
.form ul.half { float:left; width:320px; }
.form ul.half input,
.form ul.half label { width:300px; }
.form ul textarea { width:596px; padding:12px 12px 15px; height:202px; }
.form ul li.option { margin:0 20px 0 0; }

.form fieldset { display:block; width:640px; margin:0 0 29px; }
.form fieldset.footer { }
.form fieldset.footer input { float:right; }
.form fieldset legend { font-size:16px; margin:10px 0; }
.form fieldset p { color:#666; font-size:14px; margin:0; padding:0; }
.form fieldset ul { text-align:left; margin:0; }
.form fieldset ul li { float:left; padding:0; line-height:29px; }
.form fieldset ul li input { padding:2px 0; margin:0; }
.form fieldset ul li label { display:block; padding:0 8px 0 0; }
.form fieldset ul li select { margin:0 8px 0 0; padding:0; }

/* Stories By */
.stories.by #left { width:680px; }
.stories.by #right { width:270px; }
.stories.by #left,
.stories.by #left .story.summary p,
.stories.by #left .story.summary a,
.stories.by #left .story.summary { float:left; clear:none; }
.stories.by #left .story.summary { padding:0 0 11px; width:660px; background:#cbece8; margin-bottom:.6em; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; }

.stories.by #left .story.summary.last { margin:0; }
.stories.by #left .story.summary p { font-size:13px; line-height:14px; width:510px; color:#666; }
.stories.by #left .story.summary p,
.stories.by #left .story.summary a.title { margin:0 0 0 8px; }
.stories.by #left .story.summary a.title { margin-top:6px; line-height:26px; }
.stories.by #left .story.summary a.thumbnail { margin:9px 0 0 11px; width:120px; height:67px; overflow:hidden; }
.stories.by #top ul { 
  margin:0 0 29px 0;
}
.stories ul.pagination { float:left; width:660px; text-align:center; }
.stories ul.pagination li { display:inline; }
.stories ul.pagination li b, 
.stories ul.pagination li a { padding:0 4px; line-height:29px; }

#id-filter_submit { background:#658987; color:#fff; padding:0 8px; -moz-border-radius:6px; -webkit-border-radius:6px; font-weight:bold; border:1px solid #fff; }

.stories #top ul li { float:left; margin:0 18px 0 0; line-height:29px; font-size:12px; }
.stories #top ul li em { color:#666;  }
.stories.by #left p { line-height:29px;   }

.stories #top { padding:0; width:970px; height:115px; margin:0 0 29px; background:url(../images/browse_sort_filter_background.png) no-repeat; }
.stories .sort,
.stories .filter { float:left; margin:29px 0 0 0; }
.stories .sort { width:140px; margin-left:29px; }
.stories .sort li label,
.stories .filter li label { margin:0 8px 0 0; }
.stories .filter { width:775px; }
.stories .sort h2,
.stories .filter h2 { font-size:14px; line-height:29px; font-weight:bold; color:#658987; }

/* Share : Story */

#id_1-teacher_last { width:224px; }
#id_1-school_name { width:240px; }
#id_1-city { width:173px; margin-right:8px; }
#id_1-state { width:30px; }
#id_1-teacher_salutation { }
#id_1-description { margin-bottom:-4px; }

.clickall:hover { border-color:#ffce54 !important; background:#ffdb80 !important; cursor:pointer !important; }
.clickall:hover a { text-decoration:none; }
.clickall:hover a.thumbnail { border-color:#ffce54 !important; }

/* Schools */
.school #left { width:680px; }
.school #right { width:270px; }

.school #left .info { float:left; width:424px; line-height:29px; }
.school #left .info h1 { margin:0; }

.school .twitter { background:#cbece8; padding:8px; -moz-border-radius:6px; -webkit-border-radius:6px; }
.school .twitter ul { width:250px; }
.school .twitter ul li { font-size:13px; margin:15px 0 0; }
.school .twitter ul li, .school .twitter ul li a { line-height:14px; }
.school #right .twitter h2 { font-size:16px; margin:0 0 16px; line-height:16px; }

.school .location { float:right; }
.school .location address { margin:0; line-height:29px; font-size:18px; }
.school .location img.map { border:1px solid #333; }

.school .stories, .school .nostories { float:left; width:424px; }
.school .stories h2 { font-size:22px; line-height:29px; }

.school #left .story.summary p,
.school #left .story.summary a,
.school #left .story.summary { float:left; clear:none; }
.school #left .story.summary { padding:0 0 11px; width:424px; background:#cbece8; margin-bottom:.6em; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; }
.school #left .story.summary.last { margin:0; }
.school #left .story.summary p { font-size:13px; line-height:14px; width:280px; color:#666; }
.school #left .story.summary p,
.school #left .story.summary a.title { margin:0 0 0 8px; }
.school #left .story.summary a.title { margin-top:6px; line-height:26px; }
.school #left .story.summary a.thumbnail { margin:9px 0 0 11px; width:120px; height:67px; overflow:hidden; }

.story.unpublished { background:#ddd !important; border-color:#ccc !important; }
.story.unpublished a.thumbnail { border-color:#f4f4f4 !important; }

.messages { background:#b70000; text-align:center; border-bottom:1px solid #670000; color:#fff; margin:0 0 29px; }
.messages span { display:block; width:970px; margin:0 auto; padding:8px 0 9px; }
.messages h1 { margin:0; padding:0; }
.messages a { color:#fff; font-weight:bold; padding:0; }
.messages p { font-size:14px; margin:0; padding:0; }