/* Copyright © 2009-2010, José Pablo Fernández */

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: white url(/content/images/html_bg.gif?v=2) 0 124px repeat-x;
}

body, textarea {
  font-family: Arial, Sans-Serif;
}

.clearer {
  clear: both;
  height: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
}


#WholePageContainer {
  width: 880px;
  margin: 0 auto;
  font-size: 14px;
}

/*------*/

.small { font-size: 80%; }
.big { font-size: 120%; }
.large { font-size: 140%; }
.green { color: Green; }
.red { color: Red; }

a img {
  border: none;
}
a {
  color: #57a3e5;
}

hr {
  height: 1px;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  margin: 15px 0 5px;
}

p {
  margin: 15px 0 5px;
}

.field-validation-error {
  color: #ff0000;
}
.input-validation-error {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}

.validation-summary-errors {
  font-weight: bold;
  color: #ff0000;
}
span.validation-summary-errors {
  display: block;
  margin-top: 10px;
}
ul.validation-summary-errors {
  margin: 0px 0 0px 0;
  padding: 0;
  list-style-type: none;
}

/*===========================================================================
                                   Header
===========================================================================*/

#header {
  margin-top: 20px;
  height: 178px;
  position: relative;
}

#header #logo {
  position: absolute;
  display: block;
  top: 20px;
  left: 10px;
}

#header #slogan {
  position: absolute;
  left: 490px;
  top: 46px;
  width: 378px;
  height: 44px;
  text-indent: -3000px;
  background: transparent url(/content/images/header_slogan.gif) 0 0 no-repeat;
}

#header #header_vsep {
  display: block;
  left: 465px;
  top: 36px;
  position: absolute;
  width: 4px;
  height: 49px;
  background: transparent url(/content/images/header_vsep.gif) 0 0 no-repeat;
}

#header #menu {
  position: absolute;
  width: 100%;
  bottom: 30px;
  height: 28px;
  margin: 0;
  padding: 0 0 0 7px;
}

#header #menu li {
  display: block;
  float: left;
  height: 22px;
  margin: 0 2px;
  font-size: 15px;
  padding: 6px 10px 0;
  background-color: #2678bf;
  color: White;
  border-top-left-radius: 4px; -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px; -moz-border-radius-topright: 4px;
}

#header #menu li.home { padding-left: 15px; padding-right: 15px; }
#header #menu li.lowPriority a { color: #b2bfda; }
#header #menu li.lowPriority a:hover { color: #eee; }
#header #menu li.selected { background-color: #57a3e5; }
#header #menu li.selected a { color: white; }


#header #menu li a {
  color: White;
  text-decoration: none;
}
#header #menu li a:hover {
  text-decoration: underline;
}

/*===========================================================================
                                   Footer
===========================================================================*/

#footer {
  margin-top: 20px;
  height: 70px;
  background: white url(/content/images/html_bg.gif?v=2) 0 -42px repeat-x;
}

/*===========================================================================
                                    Main
===========================================================================*/

#main {
  width: 610px;
  float: left;
  padding: 0 10px;
  margin-top: 30px;
  border-right: 1px solid #f0f0f0;
}

#main h1 {
  font-size: 30px;
  margin: 0;
  padding: 0;
  color: #f17529;
  font-weight: normal;
}


/*===========================================================================
															Right Column
===========================================================================*/

#rightColumn {
  float: left;
  width: 220px;
  margin-top: 30px;
  padding: 0 10px;
}

#rightColumn h2 {
  margin: 0 0 10px 0;
  padding: 0 0 0 34px;
  background: transparent url(/content/images/h2.gif) top left no-repeat;
  height: 28px;
  color: White;
  font-size: 12px;
}

#rightColumn h2 span {
  display: block;
  background: transparent url(/content/images/h2.gif) top right no-repeat;
  height: 24px;
  padding-top: 6px;
}

#rightColumn h2 a {
  color: white;
  text-decoration: none;
}

#rightColumn > div {
  padding-bottom: 15px;
}

/*------------------------------------*/

#LatestBlogPosts { margin-top: 15px; }

#LatestBlogPosts .LatestBlogPost {
  padding: 8px 0 11px 0;
  background: transparent url(/content/images/h_sep.gif) bottom left repeat-x;
}

#LatestBlogPosts .LatestBlogPost .PostDate {
  font-size: 12px;
  display: block;
  padding-bottom: 2px;
  color: #999;
}

#LatestBlogPosts .LatestBlogPost .PostTitle {
  font-size: 14px;
  text-decoration: none;
}
#LatestBlogPosts .LatestBlogPost .PostTitle:hover {
  text-decoration: underline;
}

/*------------------------------------*/

#Social .buttons {
  text-align: center;
}

#Social #LatestTweets .LatestTweet {
  padding: 8px 0 11px 0;
  background: transparent url(/content/images/h_sep.gif) bottom left repeat-x;
  font-size: 12px;
  text-decoration: none;
  color: #555;
}


/*===========================================================================
															Contact Forms
===========================================================================*/

.ContactForm {
  margin: 10px 0;
}

.ContactForm fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.ContactForm fieldset legend {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 20px;
  color: #2b85d3;
}

.ContactForm fieldset label {
  display: block;
  margin-top: 10px;
  padding-bottom: 3px;
}

.ContactForm fieldset .textbox {
  border: 1px solid #ccc;
  width: 250px;
  font-size: 19px;
  padding: 2px;
}

.ContactForm fieldset textarea {
  border: 1px solid #ccc;
  width: 500px;
  font-size: 19px;
}

.ContactForm fieldset .imagebutton {
  display: block;
  margin-top: 10px;
}

.ContactForm .message {
  background-color: #fff9a1;
  padding: 4px;
  margin-right: 50px;
  text-align: center;
  font-size: 14px;
}


#rightColumn .ContactForm fieldset .textbox, #rightColumn .ContactForm fieldset textarea {
  width: 180px;
}
#rightColumn .ContactForm fieldset .textbox {
  margin-right: 0;
}


/*===========================================================================
																  Home
===========================================================================*/

.Content-Index {
}

.Content-Index #main { width: 590px; }
.Content-Index #rightColumn { width: 240px; }

.Content-Index .HomeMainParagraph {
  font-size: 17px;
  margin: 15px 0 15px 0;
  width: 580px;
}


.Content-Index #FeaturedPostsContainer {
  padding: 1px 0 20px 0;
}

.Content-Index div.FeaturedPost {
  position: relative;
  width: 490px; height: 120px;  
  margin: 20px 0 30px 0;
}

.Content-Index div.FeaturedPost img.BlogImage {
  position: absolute;
  top: 0; left: 0; width: 60px; height: 60px;
  -ms-interpolation-mode:bicubic;
}
.Content-Index div.FeaturedPost .Right {
  margin-left: 75px;
  padding-top: 0;
  width: 360px;
}

.Content-Index div.FeaturedPost span.SiteTitle {
  font-size: 14px; color: black;
  font-weight: bold;
  margin-bottom: 1px;
}
.Content-Index div.FeaturedPost span.SiteTitle a { color: black; text-decoration: none; }
.Content-Index div.FeaturedPost span.SiteTitle a:hover { text-decoration: underline; }

.Content-Index div.FeaturedPost span.SiteOwner {
  font-size: 12px; margin-left: 1px;
}

.Content-Index div.FeaturedPost span.PostTitle {
  display: block;
  font-weight: bold; font-size: 17px; color: #57A3E5;
}
.Content-Index div.FeaturedPost span.PostTitle a { color: #57A3E5; text-decoration: none; }
.Content-Index div.FeaturedPost span.PostTitle a:hover { text-decoration: underline; }


.Content-Index div.FeaturedPost span.PostMetaData { color: #666; font-size: 11px; display: block; }

.Content-Index div.FeaturedPost div.Player {
  width: 300px;
  margin: 3px 0 0 -6px;
}

.Content-Index div.FeaturedPost div.Player .AudioDuration { color: #666; font-size: 11px; position: relative; bottom: 6px; }

.Content-Index div.FeaturedPost div.SubscribeButtons {
  margin-top: 2px;
  font-size: 11px;
  color: #666;
}

.Content-Index div.FeaturedPost div.SubscribeButtons img { width: 16px; }

.Content-Index div.FeaturedPost div.SubscribeButtons span {
  position: relative;
  bottom: 2px;
  margin-right: 5px;
}

/*------*/

.Content-Index .HomePanel ol { 
  margin: 0; padding: 0; 
  margin-top: 20px;
}

.Content-Index .HomePanel li {
  padding: 7px 0 0 80px;
  color: #999;
  font-size: 17px;
  font-family: Trebuchet MS;
  list-style-type: none;
  background: transparent url(/content/images/home_panel_readers_1.png) 0 0 no-repeat;
  height: 73px;
}

.Content-Index .HomePanel li a { color: #999; }

.Content-Index .HomePanel li .ordinal {
  position: relative; 
  display: block; float: left;
  font-size: 17px;
  margin-right: 5px;
  font-weight: bold;
  color: #f17529;
  height: 40px;
}

.Content-Index .PanelReaders li.Step1 {
  cursor: pointer;
  background-position: 10px 0;
}
.Content-Index .PanelReaders li.Step1 a { text-decoration: none; }

.Content-Index .PanelReaders li.Step2 {
  background-image: url(/content/images/home_panel_readers_2.png);
}
.Content-Index .PanelReaders li.Step3 {
  background-image: url(/content/images/home_panel_readers_3.png);
  background-position: 5px 0;
}


/*===========================================================================
									Bloggers / Readers / Narrators
===========================================================================*/

.Content-ForBloggers img.Character {
  float: right;
  margin: 45px 11px 0 28px;
}
.Content-ForReaders img.Character {
  float: right;
  margin: 40px 42px 0 30px;
}
.Content-ForNarrators img.Character {
  float: right;
  margin: 50px 28px 0 31px;
}

/*===========================================================================
															Advertisers
===========================================================================*/

.Content-ForAdvertisers h2 {
  margin-top: 30px; margin-bottom: 0;
}
.Content-ForAdvertisers p { margin-top: 5px; margin-bottom: 15px; }

.Content-ForAdvertisers p,
.Content-ForAdvertisers li { color: #444; }

/*===========================================================================
															Resources
===========================================================================*/

.ResourcesRSSIcon {
  margin: 30px 20px;
  text-align: center;
}
.ResourcesRSSIcon img {
  display: block;
  margin: 0 auto 10px;
}

/*===========================================================================
																About Us
===========================================================================*/

.Content-AboutUs p.SubTitle {
  font-size: 18px;
  color: #444;
  margin: 4px 0 20px 0;
}

.Content-AboutUs .Panel {
  width: 280px;
  float: left;
  padding-right: 20px;
  font-size: 15px;
}

.Content-AboutUs .Panel h2 {
  margin: 0 0 10px 0;
  border-bottom: 1px solid #999;
  color: #2b85d3;
  padding-bottom: 2px;
  text-transform: uppercase;
  font-size: 16px;
}

/*----------*/

.Content-AboutUs .TeamMember {
  height: 100px;
  width: 90px;
  position: relative;
  padding-left: 120px;
}
.Content-AboutUs .TeamMember img {
  position: absolute;
  top: 0;
  left: 0; /* just to take it out of the flow */
}

.Content-AboutUs .TeamMember .Name {
  font-weight: bold;
  display: block;
}

.Content-AboutUs .TeamMember .Position {
  font-size: 15px;
}


/*===========================================================================
															Sites And Posts
===========================================================================*/

.site {
  margin: 40px 0 0 0;
  padding-bottom: 1px; /* somehow, i need this for margins to be respected */
}

.site .site-image {
  float: left;
  margin: 0 15px 10px 0;
}

.site h2.SiteTitle {
  font-size: 20px;
  margin: 0 0 4px 0;
  font-weight: normal;
  color: Black;
}
.site h2.SiteTitle a { color: Black; }

.site .SiteOwner { font-size: 13px; display: block; }

.site a.OriginalSiteLink {
  color: black;
  font-size: 12px;
  text-decoration: none;
}

.site .SiteDescription {
  font-size: 12px;
  color: #666;
}

.site .SubscribeIcons {
  float: right;
  height: 35px;
  width: 275px;
  margin: 10px 20px 0 0;
  position: relative;
}

.site .SubscribeIcons span {
  position: relative;
  bottom: 5px;
}

/*------*/

.posts {
  clear: both;
  margin-left: 30px;
}

.post {
  margin: 25px 20px 45px 0;
  width: 450px;
}
.Posts-FullContent .post { width: auto; }

.Sites-Index .post { padding-left: 64px; }
.Sites-Show .post { padding-left: 64px; }
.Posts-Show .post { padding-left: 64px; }


.post .PostTitle { margin: 15px 0 5px 0; font-size: 16px; }
.post .PostTitle a {
  text-decoration: none;
}
.post .PostTitle a:hover { text-decoration: underline; }

.post .Player {
  background: transparent url(/content/images/logo-bullet.gif) 0 0 no-repeat;
  padding: 3px 0 3px 39px;
  margin-left: -40px;
}

.post .AudioDuration { font-size: 11px; position: relative; bottom: 6px; margin-left: 6px; }
.post a.AudioLink { font-size: 11px; color: #F17529; position: relative; bottom: 6px; margin-left: 6px; }

.post .PostMetaData { color: #666; font-size: 11px; display: block; }
.post .OriginalPostLink { color: #666; }
.post .PostExcerpt { color: #999; font-size: 11px; margin: 5px 0 5px 0 }

.post .postLinks {
  margin: 25px 0 0 0;  
}
.post .postLinksTitle { font-size: 14px; margin: 5px 0; color: #666; }
.post .postLinks ul { margin: 0; padding: 0 0 0 0; }
.post .postLinks li { 
  list-style-type: none;
  background: url(/content/images/h_sep.gif) 0 8px no-repeat;
  margin: 0 10px 5px 0;
  padding: 0;
  font-size: 12px;
}

.Sites-Index .olderPosts {
  padding-top: 20px;
  text-align: center;
}

/*---------*/

#rightColumn .BlogDirectory ul,
#rightColumn .PostList ul,
#rightColumn .PostList ol {
  margin: 0;
  padding: 0;
}

#rightColumn .BlogDirectory li,
#rightColumn .PostList li {
  list-style-type: none;
  background: url(/content/images/h_sep.gif) 0 8px no-repeat;
  margin: 0 10px 5px 10px;
  padding: 0 0 0 10px;
}

#rightColumn .BlogDirectory li a { text-decoration: none; }
#rightColumn .BlogDirectory li a:hover { text-decoration: underline; }
#rightColumn .PostList li a { text-decoration: none; }
#rightColumn .PostList li a:hover { text-decoration: underline; }

.Favicon {
  width: 16px;
  height: 16px;
}

/***** Sites and posts *****
 ***************************/



/***** new home ****/

.Content-NewIndex div.FirstPost {
  position: relative;
  width: 606px;
  height: 200px;
  margin-bottom: 25px;
}

.Content-NewIndex div.FirstPost img.Background {
  float: left;
  width: 200px;
  height: 200px;
}

.Content-NewIndex div.FirstPost div.Title {
  font-weight: bolder;
  text-align: center;
  font-size: 17px;
}

.Content-NewIndex div.FirstPost div.Player {
  margin-top: 20px;
  position: absolute;
  bottom: 90px;
  left: 200px;
}

.Content-NewIndex div.FirstPost div.SiteTitle {
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  position: absolute;
  bottom: 50px;
  left: 300px;
  width: 200px;
}

.Content-NewIndex div.FirstPost div.SubscribeButtons {
  position: absolute;
  bottom: 5px;
  right: 5px;
}


.Content-NewIndex div.Post {
  float: left;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 3px 3px 0;
}

.Content-NewIndex div.Post img.Background, .Content-NewIndex div.Post canvas.Background {
  width: 200px;
  height: 200px;
  z-index: -1;
  position: absolute;
}

.Content-NewIndex div.Post div.Title {
  font-weight: bolder;
  text-align: center;
  font-size: 17px;
}

.Content-NewIndex div.Post div.Player {
  margin-top: 20px;
  position: absolute;
  bottom: 90px;
}

.Content-NewIndex div.Post div.SiteTitle {
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  position: absolute;
  bottom: 50px;
  width: 200px;
}

.Content-NewIndex div.Post div.SubscribeButtons {
  position: absolute;
  bottom: 5px;
  right: 5px;
}



/*===========================================================================
													Blogger Control Panel
===========================================================================*/

.BloggerPanel #rightColumn {
  padding-right: 0;
  width: 230px;
}
.BloggerPanel #WholePageContainer { width: 890px; }

.BloggerPanel #rightColumn > div { padding-bottom: 0; }

/*------------------------------------------*/

.BloggerPanelReportTable {
  font-size: 13px;
  border-collapse: collapse;
}
.BloggerPanelReportTable th { text-align: left; padding: 0 8px; }
.BloggerPanelReportTable td { 
  border: 1px solid #ccc; 
  padding: 2px 5px;
}
.BloggerPanelReportTable .Totals td { font-weight: bold; text-align: right; }

.ReportFilter { font-size: 12px; display: block; margin-bottom: 5px; }

.FilterLinks { font-size: 11px; }
.FilterLinks a { margin: 0 5px; }



/*------------------------------------*/

#rightColumn h2.BloggerPanel {
  color: #F17529;
  background: none;
/* border-bottom: 1px solid #AAA;*/
  padding: 0 0 5px 0;
  margin-bottom: 0;
  font-size: 20px;
  height: auto;
}

/*------------------------------------*/

.BloggerTask { margin-top: 25px; }

.BloggerTask h3 { font-size: 14px; margin-bottom: 0; }
.BloggerTask h3.Done { color: #999; }

.BloggerTask .checkMark { font-size: 120%; margin-right: -2px; }

.BloggerTask p { color: #666; font-size: 90%; margin-top: 0; margin-bottom: 10px; }

.BloggerTask input { display:block; 
  font-size: 80%; 
  padding: 0 5px; 
  margin-top: -2px; 
  background-color: #ddd;
  border: 1px solid black;
}

/*------------------------------------*/

.BloggerPanel-RSS h2 { color: #F17529; font-size: 20px; margin-top: 30px; margin-bottom: 0; }
.BloggerPanel-RSS .Links h3 { margin-bottom: 9px; margin-top: 35px; color: #666; }
.BloggerPanel-RSS .Links span { display: block; }
.BloggerPanel-RSS .Links a.Feed { border: 1px solid #666; background: #f6f6f6; padding: 6px; }

/*------------------------------------*/

.BloggerPanel-Widget p { margin-right: 40px; }
.BloggerPanel-Widget textarea {
  display: block;
  margin: 10px 0;
  font-size: 12px;
  width: 550px;
  border: 1px solid black;
}




/*===========================================================================
																  Learn English
===========================================================================*/

.LearnEnglish-Index #main { width: 590px; }
.LearnEnglish-Index #rightColumn { width: 240px; }

.LearnEnglishPosts { margin-top: 40px; }

.LearnEnglishPosts .post {
  position: relative;
  height: 50px;
  margin: 22px 0;
  width: 530px;
}

.LearnEnglishPosts .post img.BlogImage {
  position: absolute;
  top: 0; left: 0; width: 50px; height: 50px;
  -ms-interpolation-mode:bicubic;
}
.LearnEnglishPosts .post .Right {
  margin-left: 65px;
  padding-top: 0;
}

.LearnEnglishPosts .post span.SiteTitle {
  font-size: 14px; color: black;
  font-weight: bold;
  margin-bottom: 1px;
}
.LearnEnglishPosts .post span.SiteTitle a { color: black; text-decoration: none; }
.LearnEnglishPosts .post span.SiteTitle a:hover { text-decoration: underline; }

.LearnEnglishPosts .post span.PostTitle {
  display: block;
  margin: 0;
  font-weight: bold; font-size: 15px; color: #57A3E5;
}
.LearnEnglishPosts .post span.PostTitle a { color: #57A3E5; text-decoration: none; }
.LearnEnglishPosts .post span.PostTitle a:hover { text-decoration: underline; }

.LearnEnglishPosts .post span.PostTitle span.AudioDuration {
  color: #666; font-size: 11px; font-weight: normal; position: relative; bottom: 0;
}

.LearnEnglishPosts .post span.PostMetaData { color: #666; font-size: 11px; display: block; }