/* @override http://learn2grow.com/styles/Article.css */

/* @override http://learn2grow.com/styles/Article.css */

/* @override http://www.learn2grow.com/styles/Article.css */

/* @override http://www.learn2grow.com/styles/Article.css */

/* 

Color palette:  #8A006C == purple 
                #52A300 == green
                #E4E4E4 == grey
                #F8F6EF == beige
                #FFFFFF == white
                #E6E6FA == lavender, table row shading
*/

/* General Stuff */

#articleWrapper h1 { color: #8A006C; font-weight: bold; font-size: 1.2em; }
#articleWrapper h2 { background-color: #8A006C; color: #ffffff; font-weight: bold; font-size: 1em; padding: 2px; }
#articleWrapper h3 { color: #52a300; font-weight: bold; font-size: 1.2em; }

/* TODO: The plant image is simply too tall... the first line of text on the LI element is vertically 
         aligned with the bottom of the image.  If we align it with the top, the 2nd line of text
         ends up with a gap above it... ugly. */

#articleWrapper ul { margin-left: 15px; padding: 0 0 15px 15px; /* list-style-image: url(/images/plant_leaf.gif); */ }
#articleWrapper ol { margin-left: 15px; padding: 0 0 15px 15px; }
#articleWrapper .name { font-size: 1.3em; font-weight: bold; }
#articleWrapper .description { }

/* Used in /layouts/category.ascx */

#articleWrapper .whatsInside { position: relative; }
#articleWrapper .whatsInside .subcat { float: left; margin-bottom: 20px; }
#articleWrapper .whatsInside .subcat .descriptionColumn { float: left; width: 350px; font-size: 1.1em; }
#articleWrapper .whatsInside .subcat .descriptionColumn .name { color: #52A300; font-weight: bold; }
#articleWrapper .whatsInside .subcat .thumbnailColumn { float: left; padding-right: 0; margin-top:3px;}
#articleWrapper .whatsInside .subcat .thumbnailColumn img { float: right; }

#articleWrapper .topStories { position: relative; }
#articleWrapper .topStories .story { float: left; margin: 0; width: 125px; }
#articleWrapper .topStories .story .title { color: #52A300; font-size: 1em; font-weight: bold; }
#articleWrapper .topStories .separator { float: left; width: 31px; }

/* Used in /Layouts/Section.ascx */

#articleWrapper .category { width: 300px; }
#articleWrapper .category img { position: relative; float: left; }
#articleWrapper .category .categoryText { position: relative; float: left; margin: 0 20px 0 0; width: 170px; }
#articleWrapper .category .categoryText .categoryTitleLink { margin-left: 10px; }
#articleWrapper .category .categoryText ul { list-style-type: disc; list-style-image: none; }
#articleWrapper .category .categoryText ul li { font-size: 0.9em; }
#articleWrapper .category .categoryText ul li a { font-weight: normal; }

/* Used in /Layouts/SubSection.ascx */

#articleWrapper a.title { font-weight: bold; font-size: 1.2em; color: #52a300; }
#articleWrapper .thumbnail { margin-right: 10px; }

/* Used in /layouts/article.ascx */

#articleWrapper .articleColumn { float: left; width: 595px; margin-right: 25px; }
#articleWrapper .articleColumn .articleBody p { margin-bottom: 15px; font-size: 1.1em; }
#articleWrapper .articleColumn .about_category { font-size:1.1em;}
#articleWrapper .articleColumn .name { font-size: 1.5em; font-weight: bold; line-height:1.5em;}
#articleWrapper .extrasColumn { float: left; width: 298px; }

#articleWrapper .header { background: #8A006C; color: #FFFFFF; padding: 10px 10px 5px 15px; margin-bottom: 0px; }
#articleWrapper .header h1 { color: #FFFFFF; margin-bottom: 10px; font-size: 2em; font-weight: normal; }
#articleWrapper .authorName { font-size: 1.0em; font-weight: normal; }

#articleWrapper .copyrightHolder { }
#articleWrapper .article_first_graph { font-weight: bold; font-size: 1.1em; margin-top: 20px; }

/* Marquee images - includes caption and credit additions - September 30, 2011 */
#articleWrapper .article_marquee { margin-top: 1px; color: #636363; }
#articleWrapper .article_marquee p.article_marquee_caption { font-size: 1.0em; line-height: 1.2em; margin: .25em 0 0 0; }
#articleWrapper .article_marquee p.article_marquee_credit { font-size: .85em; line-height: 1.2em; margin: 1em 0; text-align: right; }

/* Restore ol numbering - October 25, 2011 */
#articleWrapper .articleBody .article_marquee ol {list-style: decimal;	}

/* Compact lists - September 30, 2011 */
#articleWrapper .articleColumn ul.list_compact { margin-left: 2em; padding-left: 0em; list-style: disc; padding-bottom: 1em; }
#articleWrapper ol.list_compact { margin-left: 2em; padding-left: 0em; list-style: decimal; padding-bottom: 1em; }
/* Refined cascade to avoid conflict with normal lists - October 17, 2011 */
#articleWrapper .articleColumn .list_compact li { margin-bottom: .12em; }

/* Restore bullets for article main content - October 17, 2011 */
#articleWrapper .articleColumn ol { list-style-type: decimal; margin-left: 2em; padding-left: 0em; font-size: 1.1em; line-height: 1.5em; }

/* Restore double spacing for bullets for article main content - October 17, 2011 */
#articleWrapper .articleColumn ol, #articleWrapper .articleColumn ul { margin-bottom: 0em; padding-bottom: 0; }
#articleWrapper .articleColumn ol li, #articleWrapper .articleColumn ul li { margin-bottom: 1em; }

/* Nested list control font size and margins - October 25, 2011*/
#articleWrapper .articleColumn ol li li, #articleWrapper .articleColumn ul li li { font-size: .90em; margin-bottom: 1em; margin-top: 1em; }

#articleWrapper #pagingBottom { clear: both; }
#articleWrapper .extraTitle { clear:both; color: #8A006C; font-size: 1.2em; font-weight: bold; margin: 0; padding: 5px; border: 1px solid #E4E4E4; background: #F8F6EF; }
#articleWrapper .extraList { margin: 0 0 20px 0; padding: 15px 10px 15px 5px; list-style: none; list-style-type: square; border-left: 1px solid #E4E4E4; border-right: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; }
#articleWrapper .extraList li { margin-left: 20px; padding: 5px; }

#articleWrapper .nextStepTitle { color: #8A006C; font-size: 1.2em; font-weight: bold; margin: 0; padding: 5px; border: 1px solid #E4E4E4; background: #F8F6EF; }
#articleWrapper .nextStepList { margin: 0 0 20px 0; padding: 15px 10px 15px 5px; list-style: none; list-style-type: none; border-left: 1px solid #E4E4E4; border-right: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; }
#articleWrapper .nextStepList li { margin-left: 0; padding: 5px; }
#articleWrapper .nextStepList li .articleTitle { font-size: 1.1em; }
#articleWrapper .nextStepList a { color: #52A300; }

/* blobs for section landing pages */

#articleWrapper .landingPageContent { float: left; margin-bottom: 20px; }
#articleWrapper .bodyImage { width: 610px; height: 369px; display: block; }

#articleWrapper .section_landing.blob { overflow: hidden; float: left; position: relative; width: 305px; height: 369px; margin: 0; }
#articleWrapper .section_landing.blob.odd { background: #8A006C; }
#articleWrapper .section_landing.blob.even { background: #F8F6EF; }

#articleWrapper .section_landing.blob .blobSubtitle { position: relative; display: block; top: 238px; width: 275px; font-size: 1.1em; margin-left: 15px; }
#articleWrapper .section_landing.blob.odd .blobSubtitle { color: #FFFFFF; }
#articleWrapper .section_landing.blob.even .blobSubtitle { color: #8A006C; }

#articleWrapper .section_landing.blob .blobBody { position: relative; top: 238px; padding: 0 15px 6px 15px; margin: 0; }
#articleWrapper .section_landing.blob.odd .blobBody { color: #FFFFFF; }
#articleWrapper .section_landing.blob.even .blobBody { color: #000000; }
#articleWrapper .section_landing.blob .blobImage { position: absolute; top: 0px; width: 305px; }

#articleWrapper .main.blob { float: left; width: 589px; height: 349px; padding-top: 20px; }
#articleWrapper .main.blob .blobTitle { color: #000000; top: 0px; font-size: 1.8em; padding: 0 15px 0 15px; }
#articleWrapper .main.blob .blobSubtitle { font-size: 1.5em; color: #000000; padding: 0 15px 0 15px; }
#articleWrapper .main.blob .blobByline { color: #52A300; padding: 0 15px 0 15px; }

/* Increase section main blob font-size - October 17, 2011*/
#articleWrapper .main.blob .blobBody { top: 0px; font-size: 1.15em; padding: 10px 15px 0 15px; }

/* Right aligned Read More paragraph for Section main blob - October 17, 2011 */
#articleWrapper .main.blob .blobBody p.more { text-align: right; color: #8A006C; }

/* Bullet for section main blob - October 17, 2011*/
#articleWrapper .main.blob .blobBody ul { list-style-type: square; margin-left: 2em; font-size: 1em; padding-left: 0em; }
#articleWrapper .main.blob .blobBody ul li { margin-bottom: 1em; }

/* Restore bullets for article main content - October 17, 2011 */
#articleWrapper .articleColumn ul { list-style-type: disc; margin-left: 2em; padding-left: 0em; font-size: 1.1em; line-height: 1.5em; }
#articleWrapper .articleColumn ol { list-style-type: decimal; margin-left: 2em; padding-left: 0em; font-size: 1.1em; line-height: 1.5em; }

/* Adjust font size in paragraphs inside of lists - November 9, 2011*/
#articleWrapper div.articleColumn div.articleBody ol li p, #articleWrapper div.articleColumn div.articleBody ul li p { font-size: .95em; }

/* Section main blob image - October 17, 2011 */
#articleWrapper .main.blob .blobBody img { float: right; margin: .4em 0 .5em 1em; width: 150px; height: 150px; }

/* Section blobs font-size - October 17, 2011 */
#articleWrapper .section_landing.blob.odd, #articleWrapper .section_landing.blob.even { font-size: 1.1em; }

/* Category list at bottom of Section Landing Pages */
#articleWrapper .categoryList { clear: both; }
#articleWrapper .categoryList .title { font-size: 1.2em; font-weight: bold; padding: 5px 5px 5px 15px; margin-bottom: 0; color: #F8F6EF; background: #8A006C; }
#articleWrapper .categoryList .categories { width: 100%; padding:10px; font-size: 1.0em; font-weight: bold; color: #8A006C; background: #F8F6EF; }
#articleWrapper .categoryList .categories table { width: 100%; }
#articleWrapper .categoryList .categories table td {width: 25%; }

/* These classes are embedded in the Sitecore article data! */

/* Article right side images */

#articleWrapper .article_image_container { float: right; width: 225px; text-align: right; padding-left: 35px; color: #636363; }
#articleWrapper .article_image_container img, #articleWrapper .article_image_right { float: right; width: 225px; margin: 0 0 15px 1em; }
#articleWrapper .article_image_container p.article_image_caption, #articleWrapper .article_image_caption { font-size: 1em; line-height: 1.2em; margin: .8em 0 5px .8em; }
#articleWrapper .article_image_container p.article_image_credit, #articleWrapper .article_image_credit { font-size: .85em; line-height: 1.2em; margin: 1em 0 1.5em 1.0em; }

/* Article Steps */

#articleWrapper .article_step_container { width: 100%; clear: both; padding-bottom: 2em; }
#articleWrapper .article_step_container img { float: left; margin: 0 1em 15px 0em; padding: 0em 1em 0em 0em; width: 300px; }
#articleWrapper .articleColumn .articleBody .article_step_container .article_step_caption h4, #articleWrapper .articleColumn .articleBody .article_step_container h4 { color: #000000; font-size: 1.2em; float: left; width: 266px; padding-top: 0em; margin-top: 0; }
#articleWrapper .articleColumn .articleBody .article_step_container .article_step_caption, #articleWrapper .articleColumn .articleBody .article_step_container p, .article_step_container .article_step_caption p { float: right; text-align: top; width: 268px; font-size: 1.1em; text-align: left; padding-top: 0px; clear: right; margin-bottom: 15px; }
/* Article Step Second Paragraphs - April 5, 2012 */
#articleWrapper .articleColumn .articleBody .article_step_container .article_step_caption p { float: right; text-align: top; width: 268px; font-size: 1em; text-align: left; padding-top: 0px; clear: right; margin-bottom: 15px; margin-top: 7px;}

#articleWrapper .articleColumn .articleBody .article_step_container .article_step_credit, #articleWrapper .article_step_container p.article_step_credit { font-size: .90em; line-height: 1.2em; text-align: right; margin: 0 0 1.5em 0; padding-top: 1em; width: 245px; color: #636363; float: right; clear: right; }

#articleWrapper h3.step_heading { display: block; margin: 1em 0; clear: both;}

#articleWrapper .article_table { width: 100%; border: 1px solid black; border-collapse: collapse; margin-bottom: 20px; }
#articleWrapper .article_table th { background: #8A006C; color: #ffffff; font-weight: bold; padding: 5px; text-align: center; border: 1px solid black; }
#articleWrapper .article_table tr.shade { background: #E6E6FA; }
#articleWrapper .article_table td { padding: 5px; border: 1px solid black; }