/*
	Title: ColorStyles1.css
	Date: 9/15/2014
*/

/* ============================================================== */
/* STYLES */
/* See StyleSheetX.css */
/* 
/* FONTS */
/* See FontStylesX.css */
/* 
/* COLORS */
/* See ColorStylesX.css */
/* ============================================================== */

/* HTML */
/* ============================================================== */
/* @group General Styles -------------
- Body styles
- Resets
- Links
- Headings
- Other elements
/* ============================================================== */

* {
	padding:0;
	margin:0;
}

body { }

/* @group Helper Styles --------------
- Forms
- Notifactions and errors
- Consistent Items
----------------------------------------*/

/* @group Page Structure -------------
- Headers, footers, and navigation
- Layout
- Other page furniture (furniture?)
---------------------------------------*/
	
/* ============================================================== */
/* Main */
/* ============================================================== */
	
#main
{
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6
{

}

#main p
{
	padding:10px;
}


/* ============================================================== */
/* Article */
/* ============================================================== */

.article_introduction
{
	width:620px; 
	margin:15px;
	padding: 25px;
	overflow:hidden;

}

article.article_introduction h1, 
article.article_introduction h2, 
article.article_introduction h3, 
article.article_introduction h4, 
article.article_introduction h5, 
article.article_introduction h6 
{

}

article.article_introduction h4 
{ }

article.article_introduction p 
{ }

.article_introduction_section
{
	width:600px; 
	overflow:hidden;
	margin-top:20px;
}

.page_article
{
	width: 825px;
	margin: 15px;
	padding-bottom: 20px;
	clear:both;
}


/* ============================================================== */
/* Section */
/* ============================================================== */

.page_article_section
{
	width:810px; 
	overflow:hidden;
	margin-top:20px;
}

.section_article
{
	width: 800px;
	margin: 0px;
	margin-bottom: 20px;
	padding: 0px;
	padding-bottom: 20px;
	
}

section.section_list_row
{
	padding-top:5px;
	overflow:hidden;
}

section.section_list
{
	width:150px;
	margin: 10px;
	padding-top:5px;
}

section.section
{
	width: 810px;
	margin: 15px;
	padding: 30px;
	padding-bottom: 20px;
}

section.section ul li {

}

section.section ol li {

}

section.section h1, .section h2, .section h3, .section h4, .section h5, .section h6 
{

}




.subsection
{
	overflow:hidden;
}

.subsectionHeight
{
	height: 240px;
}

.subsection h1, .subsection h2, .subsection h3, .subsection h4, .subsection h5, .subsection h6 
{ }

.subsection ul
{

}

.subsection li
{
	padding-left: 10px;
	padding-top: 10px;
}

.page p.caption,
.caption
{
	padding: 3px 0px 0px 0px;
	float:left;
}

header .byline
{
	padding-right: 10px;
}

footer .byline
{
	padding-right: 10px;
	clear:both;
}

/* ============================================================== */
/* mainCategorySection */
/* ============================================================== */

.mainCategorySection
{
	margin-left:155px;
}

#featuredArticles
{
	width:135px;
	height:1700px;	
	padding:5px 0px 5px 0px;	
}

#featuredArticles li
{
	margin-left:10px;
}
#featuredArticles a
{

}


/* ============================================================== */
/* Nav */
/* ============================================================== */

nav.navList
{
	width:150px;
	margin: 10px;
	padding-top:5px;
}

section.navListRow
{
	padding-top:5px;
	overflow:hidden;
}


/* ============================================================== */
/* Right columns */
/* ============================================================== */

.rightcolumn, .leftcolumn 
{
	width:220px;
	margin:10px;
	padding-bottom:10px;
	clear:right;
}

.leftcolumn
{
	clear:left;
}
.rightcolumn  p, .leftcolumn p 
{
	margin: 0px 10px 0px 10px;
}
.rightcolumn  h1, .rightcolumn  h2, .rightcolumn  h3, .rightcolumn  h4, .rightcolumn  h5, .rightcolumn  h6 
{
	margin-bottom: 5px;
	padding: 5px 0px 5px 0px;
}
.leftcolumn h1,  .leftcolumn h2,  .leftcolumn h3,  .leftcolumn h4,  .leftcolumn h5,  .leftcolumn h6  
{
	padding: 5px 0px 5px 0px;
}

.localNavColumn
{
	width:170px;
	margin:10px;
	clear:right;	
}

.unOrderedNavList
{
}

h6.localNavTitle,
.localNavColumn h1, .localNavColumn h2, .localNavColumn h3. .localNavColumn h4, .localNavColumn h5, .localNavColumn h6 
{
	padding:5px;
}

.localNavColumn p
{
	margin:10px;
}

.localNavColumn ul li, .localNavColumn ol li, 
{

}

li
{
	margin-left:20px;
}

/* ============================================================================================================================ */
/* a tags */
/* ============================================================================================================================ */

/* ----------------------------------
- Rollovers - General
------------------------------------*/
a:link {}      /* unvisited link */
a:visited {}  /* visited link */
a:hover {}  /* mouse over link */
a:active {}  /* selected link */ 

/* ----------------------------------
- Rollovers - contentColumn
------------------------------------*/
.contentColumn a:link {}      /* unvisited link */
.contentColumn a:visited {}  /* visited link */
.contentColumn a:hover {}  /* mouse over link */
.contentColumn a:active {}  /* selected link */ 

/* ----------------------------------
- Rollovers - conditionalNav 
- Main nav MENU buttons across the top
------------------------------------*/
/* .conditionalNav a:link {color:rgb(44,180,49); text-decoration:none;}      /* unvisited link */
.conditionalNav a:link {}      /* unvisited link */
.conditionalNav a:visited {}  /* visited link */
.conditionalNav a:hover {}  /* mouse over link */
.conditionalNav a:active {}  /* selected link */ 

/* ----------------------------------
- Rollovers - .localNav 
- local nav buttons down the right)
------------------------------------*/
/* .localNav a:link {color:rgb(44,180,49); text-decoration:none;}      /* unvisited link */
.localNav a:link {}      /* unvisited link */
.localNav a:visited {}  /* visited link */
.localNav a:hover {}  /* mouse over link */
.localNav a:active {}  /* selected link */ 

/* .localNavColumn a:link {color:rgb(44,180,49); text-decoration:none;}      /* unvisited link */
.localNavColumn a:link {}      /* unvisited link */
.localNavColumn a:visited {}  /* visited link */
.localNavColumn a:hover {}  /* mouse over link */
.localNavColumn a:active {}  /* selected link */ 


/* ============================================================== */
/*	NavBars */
/* ============================================================== */

li.conditionalNav
{
	margin: 3px;
	padding: 5px 10px 5px 10px;
	display: inline;
}


li.localNav
{
	margin: 3px;
	padding: 0px 5px 0px 5px;
	display: block;
}

li.localNav a
{
	display:block;
}

/* ============================================================================================================================ */
/* ============================================================================================================================ */

/* ============================================================== */
/* Headlines */
/* ============================================================== */

.headlineColor, h1, h2, h3
{  }

.headlineBackColor, h1, h2, h3
{  }

.subHeadColor, h4, h5, h6
{  }

.subHeadBackColor, h4, h5, h6
{  }

/* ============================================================== */
/* Paragraphs */
/* ============================================================== */

.paragraphColor, p
{ }

.paragraphBackColor
{ }

/* ============================================================== */
/* Bullets */
/* ============================================================== */

.listItemColor, li
{ }

.listItemBackColor, li
{ }

/* ============================================================== */
/* Dictionary */
/* ============================================================== */

.dictionaryTermColor, dt
{  }

.dictionaryTermBackColor, dt
{  }

.dictionaryListingColor, dl
{  }

.dictionaryListingBackColor, dl
{  }

/* ============================================================== */
/* Tables */
/* ============================================================== */

.tableCaptionColor, caption
{ color: black; }

.tableHeadColor, th
{ color: black; }

.tableHeadBorder, th
{ border: 1px solid green; }

.tableHeadBackColor, th
{ background-color: none; }

.tableCelColor, td
{ color: black; }

.tableCaptionBorder, caption
{ border: 1px solid green; }

.tableCaptionBackColor, caption
{ background-color: none; }

.tableRowBorder, td
{ border: 1px solid green; }

.tableRowBackColor, td
{ background-color: none; }


/* ============================================================== */
/* AFG */
/* ============================================================== */

.outer
{
	margin: 0 auto;
	width:900px;
}

.inner
{
	background-color: white;
		margin: 0 auto;
}

/* ============================================================== */
/* Floats */
/* ============================================================== */

.floatleft
{
	float:left;
}
.floatright
{
	float:right;
}

/* ============================================================== */
/* Page Structure */
/* ============================================================== */
/* Banner */
/* ============================================================== */

.section_banner
{	
	height: 520px;
	margin: 0 auto;
	margin-bottom:20px;
	overflow:hidden;
	padding:5px;
}

.section_banner h1, 
.section_banner h2, 
.section_banner h3, 
.section_banner h4, 
.section_banner h5, 
.section_banner h6
{ }

.section_banner #indexBannerLogo
{
	width: 100px;
	height: 75px;
	margin:10px 20px 10px 5px;
	float: left;
}

.section_banner #otherBannerLogo
{
	width: 150px;
	height: 100px;
	margin:0px 20px 0px 0px;
	float: left;
}

.section_banner #address
{	
	width:200px;
	margin:20px 10px 10px 0px;
	padding-bottom:10px;
	clear:right;
}

.section_banner_message
{	
	margin-top:20px; 
	padding-top: 20px; 
	clear:both; 
	border-top: 2px solid darkgray;
}


/* ============================================================== */
/*  BannerBox */
/* ============================================================== */

#bannerBar
{

}

.bannerBox
{
	width:460px;
	padding:2px 8px 6px 8px;
}

#LogoBox.bannerBox
{
	float:left;
	clear: left;
}

#Slogan
{
}

#BannerSubHead
{

}

/* ============================================================== */
/* Section Labels */
/* ============================================================== */

#Categories
{
	margin: 0 auto;
	padding: 10px;
}

.categorySectionLabel
{
	padding:4px;
}




/* ============================================================== */
/* Page/contentcolumn */
/* ============================================================== */


.contentColumn
{
	width:620px;
	
	margin:0px;	
	padding:10px;

	overflow:hidden;
}

/* Used by Landing Pages  */
.contentColumn a
{
	margin-right:3px;
	margin-top: 3px;
	
	padding:3px;
	padding-right:8px;
	padding-left:9px;

	font-size:0.8em;
	text-decoration:none;
}

.title
{

}

.contentColumn h2
{

}

.contentColumn h3
{
	padding:5px; 
}

.contentColumn h4
{
	padding:5px; 
}

.contentColumn p
{
	margin: 5px 0px 0px 10px;
}


.contentSection
{
	margin-bottom:10px;
}

.contentSection h4
{
	/* background-color:rgb(44,180,49); */
	background-color:darkgreen; 
	color: white;
}

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

.contentSubSection
{
	margin: 0px 0px 20px 0px;
}

.contentSubSection p, .contentSubSection h4 
{
	margin-left: 10px;
}

.contentArticle
{
	margin-top:10px;
}

.contentArticle h3
{
	margin-left: 10px;
}

.contentArticle h4
{
	margin-left: 10px;
}

.contentArticle h5
{
	margin-left: 10px;
}

.contentArticle h4, .contentArticle p
{
	margin-left: 10px;
}

/* ============================================================== */
/* Page/article */
/* ============================================================== */

.page
{
	overflow:hidden;
	margin-bottom:20px;
}

.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 
{

}

.page h6.localNavTitle
{
	padding:5px;
}

.page p
{

}

.leftArticle
{ }

.rightArticle
{ }

article
{
	margin-right: 10px;
	margin-top: 5px;
	padding: 5px 20px; /* top+bottom left+right */	
	float:left;
}

header
{
	margin-top: 15px; 
	margin-bottom: 15px;
}

footer
{
	margin-top:20px;
}

figure
{
	margin-left: 20px; 
	margin-bottom: 20px; 
}

/* ============================================================== */
/* photos */ 
/* ============================================================== */

.photoDiv
{
	margin:10px;
	padding:10px;
}

/* ============================================================== */
/* footer 

	Potential Footer Link Stuff:
		Company Info
			Annual Report
			Blog/Vlog
			About Us
			Meet the Staff/Instructors
			Meet the Team
			Careers & Jobs
			Press Releases
			Digital Newsroom/News & Media
			Leadership & Staff Biographies
			Community Outreach
				Foundation
				Philanthropy
				Volunteering
			Diversity, Inclusion & Belonging
			Company History
			Military Support
			Senior Citizen Support
		AdChoices
		Advertise
		Article Archive
		Audio & Voice
			Transcripts
			License Footage
		Charities & Donations
		Classes
			Tutorials
			Tips and Tricks
			Trade Shows
			Schedules
			Seminars/Webinars
			Events
			Workshops
		Classifieds
		Closed Captioning
		Community/Social Media
		Customer Service
			Contact Us
			Contact Support
			Check Order Status
			Return & Exchange Policy
			Repairs
			International Customers
		Departments
		Help/FAQ
		Locations
			Hours
			Address
			Phone/Email
		Payment Methods
		Permissions
		Privacy & Security Policy
			Info We Collect
			Do Not Sell My Personal Information
		Resources
			Catalog
			Manuals & Documents
			Safety Data Sheets
			Warranty
			FAQ/International FAQs
			Mobile Apps
			Mobile User Agreement
			Newsletters
			RSS
		Site map
		Store & Services
			Find a Store
			Location Map
			Store Directory
			Brand Directory
			Store Services
			DIY Workshops
			Services For Pros
		Subscriptions
			Membership
			Register/Sign in, sign up
			Subscribe
			My Account
			Member Discounts
			Store Deals, Coupons, Discount Codes
		Terms and Conditions
			Guarantees & Warranty
			Returns & Exchanges
			Order Cancellation
			Shipping Methods
			Delivery Policies
			In-store Delivery
			Rebates & Discounts
			Gift Cards
			Credit Services
			Product Recalls
			Rentals
			Installation Policies
  		Terms of Use

		© 2020 Company Name All Rights Reserved.
		Products
		General Policy
    Privacy 
*/
/* ============================================================== */

#footer
{
	margin: 0 auto;
	margin-bottom: 20px;
	padding: 10px;	
	clear:both;
	overflow: hidden;
}

#footer ul li
{ }

.footer
{ 
	width:870px;
}

.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 
{ }

.footer p
{ }

/* ============================================================== */
/* Client footer */
/* ============================================================== */


.footer#footer .section_list
{
	width:150px;
	margin: 10px;
}

.footer#footer .section_list #title,
.footer#footer .section_list h1,
.footer#footer .section_list h2,
.footer#footer .section_list h3,
.footer#footer .section_list h4,
.footer#footer .section_list h5,
.footer#footer .section_list h6
{

}

.footer#footer .section_list h6.localNavTitle
{
	padding:5px;
}


.footer#footer .section_list li  
{

}

.footer#footer .section_list p  
{

}

.footer#footer .copyrightnotice  
{
	clear:both;
}

.footer div#Products
{
}

.footer div#Members
{
}

/* ============================================================== */
/* Products */
/* ============================================================== */

.productSection
{ }

.productSectionTitle
{
	height: 220px;
}

.productAdRow
{ 
	margin-top:20px;
}

.productAd
{
	width:33%; 
	float:left;
 	padding-top:10px;
 }

.productAd h1, .productAd h2, .productAd h3, .productAd h4, .productAd h5,.productAd h6 
{ }

.productAd a
{ }

.productAd p
{ }


.transparentbox {
  margin: 30px;
}

div.transparentbox p {
  margin: 5%;
}


.product
{ }

.product h1, .product h2, .product h3, .product h4, .product h5, .product h6
{ }

.product p
{ }

#ProductSectionTitle.sectionTitle
{
	margin-top:20px; 
}

.product subtitle
{ }

.product description
{ }

.product price
{ }

.product photoDiv
{ }

.product p.caption
{ }

.product .photo
{ }

.product .productDescriptionDiv
{ }

.productIcon
{
	width: 50px;
	height: 50px;
}

/* ============================================================== */
/* Services */
/* ============================================================== */

#ServiceSection.seection
{ }

.serviceDiv
{ 
	width: 900px;
}

#ServiceSectionTitle.sectionTitle
{

}

#ServiceAdRow.adRow
{ 
	margin-top:20px;
}

.serviceAd
{
	float:left;
 	padding-top:10px;
	padding:10px;
	margin:20px;
 }

.serviceAd h1, .serviceAd h2, .serviceAd h3, .serviceAd h4, .serviceAd h5,.serviceAd h6 
{ }

.serviceAd a
{ }

.serviceAd p
{ }

.service
{ }

.service h1, .service h2, .service h3, .service h4, .service h5, .service h6
{ }

.service p
{ }

.service serviceTitle
{ }

.service subtitle
{ }

.service description
{ }

.service price
{ }

.service photoDiv
{ }

.service p.caption
{ }

.service .photo
{ }

.service .serviceDescriptionDiv
{ }

.serviceIcon
{
	width: 50px;
	height: 50px;
	margin:20px;
}

/* ============================================================== */
/* ad */
/* ============================================================== */

.ad 
{ }

.ad h1, .ad h2, .ad h3, .ad h4, .ad h5, .ad h6  
{ }

.wholeRow
{ width:100%;}

.halfRow
{ width:50%;}

.thirdRow
{ width:33%;}

.quarterRow
{ width:25%;}

.fifthRow
{ width:25%;}

/* ============================================================== */
/*  Ad Bar */
/* ============================================================== */

#adbar
{
	clear:both;
}

div#ad1, div#ad2, div#ad3
{
	width:31%;
	height: 250px;
	padding:8px;
	float:left;
	clear:left;
}

div#ad2
{
	float:left;
	clear:right;
}
div#ad3
{
	float:left;
	clear:right;
}

/* ============================================================== */
/*  Instructions */
/* ============================================================== */

#instructions
{ }

#instructions p
{ }

#instructions li
{
	padding-left: 20px;
}

#instructions h3
{ }


/* ============================================================== */
/* Art Mediums */
/* ============================================================== */


.art_Medium 
{ 
	margin-bottom:10px;
	padding:5px;
}

ul.art_Medium li
{ }


ul.art_Medium li a
{ }

/* ============================================================== */
/* CLIENT SPECIFIC */
/* ============================================================== */

.companyName 
{ 
	color: black; 
}

.companyNameBanner
{ 
	color: black; 
}

/* ============================================================== */

/* ============================================================== */
/* Responsive Design */
/* ============================================================== */


@viewport {
  width: device-width ;
  zoom: 1.0 ;
} 

@-ms-viewport {
  width: device-width ;
} 


@media screen and (max-width: 200px) {
	
  /* comes into effect for screens less than or equal to 320 pixels */
  #page {
    width: 200px ;
  }
  
    #upper {
    width: 200px ;
  }
  
    #lower {
    width: 200px ;
  }
  
  #leftColumn {
    width: 200px ;
  }
  
 #rightColumn {
    width: 200px ;
  }
  
    #ImageA {
    width: 200px ;
  }
  
	#ImageB {
    width: 200px ;
  }
  
}


@media screen and (max-width: 320px) {
	
  /* comes into effect for screens less than or equal to 320 pixels */
  #page {
    width: 320px ;
  }
  
    #upper {
    width: 320px ;
  }
  
    #lower {
    width: 320px ;
  }
  
  #leftColumn {
    width: 140px ;
  }
  
 #rightColumn {
    width: 140px ;
  }
  
    #ImageA {
    width: 120px ;
  }
  
	#ImageB {
    width: 120px ;
  }
  
}

@media screen and (min-width: 321px) and (max-width: 480px) {
  /* comes into effect for screens between 321 and 480 pixels (inclusive) */
  #page {
    width: 355px ;
  }
  
    #upper {
    width: 355px ;
  }
  
    #lower {
    width: 355px ;
  }
  
  #leftColumn {
    width: 345px ;
  }
  
 #rightColumn {
    width: 345px ;
  }
  
    #ImageA {
    width: 340px ;
  }
  
	#ImageB {
    width: 340px ;
  }
}
@media screen and (min-width: 481px) {
  /* comes into effect for screens larger than or equal to 481 pixels */
  #page {
    width: 900px ;
  }
  
    #upper {
    width: 900px ;
  }
  
    #lower {
    width: 900px ;
  }
  
  #leftColumn {
    width: 310px ;
  }
  
 #rightColumn {
    width: 310px ;
  }
  
    #ImageA {
    width: 300px ;
  }
  
	#ImageB {
    width: 300px ;
  }
}



/* ============================================================== */
/* ============================================================== */
/* ============================================================== */