@import url('button.css');

/* Copyright 2010 Flint Hills Design, LLC
	Joel Gaeddert
	
	Custom creation for Doors In Motion, LLC

*/

/*==============  Browser reset as recommended by Eric Meyer  ========== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: none; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* ===========================  End of Reset  ==============================*/


/* -------------------------------- Constants -----------------------------
Lavender: #5268A1
	20% Lavender: #BBBDC3
	
Cream: #D5D2CC

Sans-serif: Arial
Serif: Georgia

Font-size: 10pt = 13px = 0.8em = 80%
	Use relative sizes for newer devices (ex. iPhone, Blackberry)
	
Points 	Pixels 	Ems 		Percent
6pt 	8px 	0.5em 		50%
7pt 	9px 	0.55em 		55%
7.5pt 	10px 	0.625em 	62.5%
8pt 	11px 	0.7em 		70%
9pt 	12px 	0.75em 		75%
10pt 	13px 	0.8em 		80%
10.5pt 	14px 	0.875em 	87.5%
11pt 	15px 	0.95em 		95%
12pt 	16px 	1em 		100%
13pt 	17px 	1.05em 		105%
13.5pt 	18px 	1.125em 	112.5%
14pt 	19px 	1.2em 		120%
14.5pt 	20px 	1.25em 		125%
15pt 	21px 	1.3em 		130%
16pt 	22px 	1.4em 		140%
17pt 	23px 	1.45em 		145%
18pt 	24px 	1.5em 		150%
20pt 	26px 	1.6em 		160%
22pt 	29px 	1.8em 		180%
24pt 	32px 	2em 		200%
26pt 	35px 	2.2em 		220%
27pt 	36px 	2.25em 		225%
28pt 	37px 	2.3em 		230%
29pt 	38px 	2.35em 		235%
30pt 	40px 	2.45em 		245%
32pt 	42px 	2.55em 		255%
34pt 	45px 	2.75em 		275%
36pt 	48px 	3em 		300%
--------------------------------------------------------------------------- */



body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#333; background:#a7a4a0; background-image: url('Images/Background2.jpg'); background-position: center; background-repeat: repeat-y; background-attachment: fixed; padding:30px 0; background:#eee; font-size:12px; line-height:1.4em;}

a:link, a:visited { color:#5268A1; text-decoration:none; }
a:hover { color:black; }

/*------------------ Navigation -------------*/
#nav { width:930px; height:45px; margin:20px auto; padding:10px 10px 10px 20px; color:#d5d2cc; line-height:50px; }
#nav { width:940px; height:35px; margin:auto; padding:15px 10px 20px 10px; color:#333; line-height:50px; }
	#nav #logo { float:left; margin-left:10px;}
	#nav ul { padding-right:1em; font-size: 1.2em; font-weight: bold;}
	#nav ul li { float:right; padding-left:2em; font-weight:lighter; }
	#nav ul li a:link, #nav ul li a:visited { color:#D5D2CC; color:#5268A1; text-decoration:none; }
	#nav ul li a:hover { color:#000; }

.NavWithBackground { background:url('Images/NavBackground.jpg'); background-position:bottom; background-repeat: repeat-x; background: white;}


/*------------------ General Containers ------*/
#page { width:960px; margin:auto; padding:0; }
	#main { width:100%; position: relative; top:0; height:350px;}
		#product { width:150px; height:180px; position:absolute; left:0; top:0; padding-top:30px;}
		#mainImg { width:620px; height:350px; position: absolute; left:160px; top:0; border:1px solid #333; }
		#gallery { width:175px; position: absolute; right:0;}
			#gallery img { margin:0 0 4px 3px; border:1px solid #333; }
		#description { width:620px; margin-left:160px; margin-right:180px; clear:both; position: relative; display:block; margin-bottom:30px;}
	
							
/*---------------- General Font Styles ---------*/		
h1 { margin-left:20px; margin-right:20px; font-size:24px; font-weight: bold; color:#5268A1; padding-top:8px;}
	h1.Header, h1.HeaderWithSub { background: #5268A1; color:white; display:block; margin: 0; padding:20px; }
	h1.HeaderWithSub { padding-bottom:10px;}
h2 { margin:10px 20px 10px 20px; font-weight:lighter; font-size:14px; color:#666; font-weight:100;}
	h3 { font-size:14px; font-weight:bold; }
	h4 { }
	h5 { }
	h6 { }
	p { }	
		
						
	.infobox { float:left; position:relative; width:280px; margin:18px; }
		.infobox img { position:relative; z-index:1; }
		.infobox .more { display:none; }
		.infobox:hover .more { display:block; position:absolute; z-index:2; left:0px; top:0px; }
		.infobox h1 { z-index:3; font-size:14px; color:#000; font-weight:bold; padding:20px 10px 0px 10px; }
		.infobox h2 { z-index:3; font-size:12px; font-weight:bold; padding:16px 10px 0px 10px; margin-top:0; margin-bottom:0;}
		.infobox h3 { z-index:3; font-size:12px; color:#000; padding:0px 10px 0px 10px; margin-top:0; }
		.infobox:hover img { opacity:0.2;  /*Firefox & Chrome*/
								filter:alpha(opacity=20);   /* IE */ }	
		.infobox h1 a:link, .infobox h1 a:visited { text-decoration:none; color:black; }										
		.infobox h1 a:hover { text-decoration: underline; }
		.infobox h2 a:link, .infobox h2 a:visited { text-decoration:none; color:black; }										
		.infobox h2 a:hover { text-decoration: underline; }
									
				
				
/*------------------- Basic Container ---------------*/				
.BasicContainer { background:white; border:1px solid #CCCCCC; margin-top:20px; min-height: 400px; }									


/*------------------- Product Features ---------------*/
		
	.featureHeader, .ProductHeader { display:block; width:610px; margin-left:100px; font-family:Georgia; font-size:20px; font-stretch: condensed; font-style: italic; color:#872600; font-weight:100; border-bottom:1px solid #872600; padding-bottom:.1em;}
		.featureHeader .CircleNumbers { float:left; margin-left:-50px; margin-top: -12px; }
	.featureContent, .ProductDescription { display:block; width:610px;margin-left:100px; }
		.featureContent h3 { color:#5268A1; font-family:Georgia; font-size:1.7em; font-weight:100; line-height:1.3em; padding-top:0.5em;}
		.features { }
		.featureContent .HighlightBox {background:#DADECC none repeat scroll 0 0; border:1px solid #999; float:left; margin:4px; min-height:180px; padding:10px 20px; width:156px;}

/*----------------- Sidebar Modules -------------*/
#moduleSidebar { float:right; width:230px; }
.module { width:200px; float:right; clear:right; height:auto; background:#eee; margin:20px 20px 0 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
	.module h2 { color:#872600; font-family:arial; font-size:1.2em; font-weight:bold; border-bottom:1px solid #999; background:#eee; padding:5px 0 0px 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; margin: 0; }
	.module h5 {font-size:.95em; padding:2px 0 2px 10px; margin:0; line-height:1em;}
		.module h5 a { font-size:.65em; color:#666; text-decoration:none; padding-left:.6em;}
	.module h6 { font-size:.8em; padding-left:10px; color:#666; font-weight:lighter;}
	.module p { padding:10px; }
		.module .Testimonial { font-family: Georgia; font-style: italic; }
		.module img .spaced { padding:5px; }
	
	.module #DealerLocatorModule { padding:5px; }
		.module #DealerLocatorModule #ZipCode { font-weight:bold; color:#872600; width:6em; border:none; padding:4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;}
		.module #DealerLocatorModule #DealerLookup { background:#872600; font-weight:bold; border:none; color:white; padding:3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
	
	.module .spaced { float:right; padding:0 10px 5px 0; }
	.module .ModuleList { padding:2px 0 10px 0;}
	.module .ModuleList li { padding:2px 0 2px 10px;}

/*-------------------- Products --------------------*/
.ProductDescription { margin-bottom: 25px; margin-left:275px; }
		.ProductHeader { margin-top:90px; margin-left:275px; font-size:50px; padding-bottom:25px;}
		.ProductHeader a:link, .ProductHeader a:visited { color:#872600; text-decoration: none; }
		.ProductHeader a:hover { color:#333; }


	.HomepageProducts h1 { border-top:1px solid #ccc; }
.ProductModule { background: url('/Images/ProductModule-Background.jpg'); background-repeat: repeat-x; padding:9px 0 0 20px;display:block; width:218px; height:180px; border:1px solid #999; float:left;}
.ProductModule:hover { background:#eee; }

.ProductModule img { bottom:0;}
.ProductModule h3, .ProductModule h3 a:link, .ProductModule h3 a:visited { font-size:20px; color:#5268A1; color:#990000 !important; line-height:1.4em; text-decoration: none; margin:0; font-weight:bold;}
.ProductModule h4, .ProductModule h4 a:link, .ProductModule h4 a:visited { color:#333 !important; font-size:14px; line-height:1.5em; text-decoration: none;}
.ProductModule p, .ProductModule p a:link, .ProductModule p a:visited { color:#333 !important; text-decoration: none;}
#BasicComponents { border:1px solid #999;}
#Components { padding:40px 0 10px 10px; margin:0; clear:both;}

/*-------------------- How to Order -----------------*/		
.orderHeader { margin-top:50px; font-weight:bold; font-size:30px; }
.orderHeader h3 { margin-left:0;font-size:18px;}
#SystemBox { float:right; margin-top: -30px; margin-right:50px;}
		
		
		


/*------------------- Main Pages ---------------------*/	
/*====================================================*/	
/*------------- Series 200 and Series 500 ------------*/		
		
.ContainerBlock { width:960px; margin:auto; clear:both; position: relative; margin-top:20px;}
	.ContainerBlock h2 { display: block; margin:20px 0 10px 20px; color:white;}
	.ContainerBlock h3 { display:block; margin:20px 10px 0px 20px; color:black; }
	.ContainerBlock h4 { margin:4px 20px 4px 20px; color:#333; font-weight:lighter;}
.ContainerBlockLeft360 { width:360px; float:left; position: relative; background:#5268A1; height:100%;}
	.ContainerBlockLeft360 h2 { color:white; }
	.ContainerBlockLeft360 h4 { color:white; }
	.ContainerBlockLeft360 #GalleryLabel { display: block; width:339px; height:95px; position: absolute; bottom:0; margin:0; padding:0 10px; text-align: right; background:#ccc; color:black; border-right:1px solid white; }
.ContainerBlockRight600 { width:600px; float:right; position: relative;background:white; height:100%; }

.ContainerBlock .ProtrudingPic { margin:0; background:#eee; }
.ContainerBlock .NoProtrudingPic { margin:20px 0 0 0; }

.ProductAttributes { height:480px; background: white;}
#ProductAttributesLeft { width:290px; position: absolute; top:0; left:0; padding-right:10px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
#ProductAttributesRight { width:300px; position: absolute; top:0; left:300px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-right: 1px solid #ccc;}

.ProductButton a:link, .ProductButton a:visited { width:230px; display:block; border:2px solid #aaa; background:#eeeeee; color:black; text-align:center; margin:15px 0 10px 20px; padding:10px; color:#333; font-size:18px;}
.ProductButtonHighlight a:link, .ProductButtonHighlight a:visited { color:#990000; }
.ProductButton a:hover { background:#ccc; }

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

/*----------------------News Pages -------------------*/
h2.NewsSubhead { margin:.8em 0 1.5em 0; color:#333;}

#NewsArticle { float:left; width:575px; padding:20px; border-right:1px dotted #ccc;}
#NewsArticle h3 { color:#5268A1; font-size:1.5em; line-height:1.3em; border-bottom:solid 2px;}
#NewsArticle h3 em { font-style: italic; }
#NewsArticle p { margin-bottom:20px; }

#NewsSideBar { float:right; width:300px; padding:20px 20px 20px 20px; }
#NewsSideBar h3 { color:#5268A1; font-size:1.5em; line-height:1.3em; margin-bottom: 20px; border-bottom: solid 2px;}

.NewsPhoto {float: left; width:146px; height:110px; margin-bottom: 20px; padding: 2px; }
.NewsPhoto img {width:138px; height: 92px; border: 1px solid;}
.NewsPhoto a:link, .NewsPhoto a:visited { color:#5268A1; text-decoration:none; font-size: .9em;}
.NewsPhoto a:hover { color:black; }
.NewsPhoto h4 {font-size: 0.9em;}

.NewsArchives .Headline{ color:#333333; font-size:16px; padding-top:1em; }
.NewsArchives .Headline a {color:#333; font-size: 14px; padding-top: 1em;}
.NewsArchives .Headline a:hover {color: #5268A1;}
.NewsArchives .Headline h5 {color:#99000; font-size: 11px; font-weight:normal;}
.NewsArchives .Date { font-size:.8em; color: #666; }
.NewsArchives .Date a {color:#333;}
.NewsArchives .Date a:hover {color:#5268A1;}

#NewsHighlightBox { text-align:center; display: block; background:#990000; padding:20px;}
#NewsHighlightBox h3 { color:white; border: none;}
#NewsHighlightBox a {font-size:2em; line-height:1.5em; color:white;}
#NewsHighlightBox a:hover { text-decoration:underline; }

/*----------------------- Lists ----------------------*/		
ul.BasicList { padding-left:.25em;}
ul.BasicList li { list-style-type: disc; margin-left:2em;}
ul.BasicList ul { margin-left:1.5em; margin-bottom:1em;}
ul.BasicList ul li { list-style-type:square; }
ul.BasicList ul ul { margin-left:1.5em; margin-bottom:.5em;}
ul.BasicList ul ul li { list-style-type:square; }

ol.BasicList { padding-left:.25em;}
ol.BasicList li { list-style-type:decimal; margin-left:2em;}
ol.BasicList ol { margin-left:1.5em; margin-bottom:1em;}
ol.BasicList ol li { list-style-type:square; }
ol.BasicList ol ol { margin-left:1.5em; margin-bottom:.5em;}
ol.BasicList ol ol li { list-style-type:square; }


/*--------------------- General Styles ----------------*/
.floatRight { float:right; }
.floatLeft { float:left; }
.clearer { clear:both; }
strong { font-weight:bold; }


/*--------------------- Footer -----------------------*/
#Footer { font-size:10px; border-top: 1px solid #ccc; background:none; width:960px; margin:auto; margin-top:20px; }

#Footer #Column1 { width:90px; display: inline; }
#Footer #Column2 { width:160px; display: inline; }
#Footer #Column3 { width:190px; display: inline; }
#Footer #Column4 { width:180px; display: inline; }
#Footer #Column5 { width:180px; display: inline; }

#Footer ul { float:left; margin:10px 10px 20px 20px; width:150px; border:none; color:#666; display: inline;}
#Footer li { margin:0; padding:0;line-height:16px;}
#Footer h4 { color:#333; padding-top:6px;}

#Footer #ProSupportLink a:link, #Footer #ProSupportLink a:visited { color: #990000;}

#Footer a:link, #Footer a:visited { text-decoration: none; color:#666;}
#Footer a:hover { text-decoration: underline; color:#5268A1;}

#Footer h4 a:link, #Footer h4 a:visited { color:#333; }



/* ====================  ContactDIM Form  ============================= */
#ContactDIM { height: auto; width:590px; float:right;}
#ContactDIM fieldset { margin:20px;}
#ContactDIM fieldset legend { font-size:12px; font-weight:bold; color:#990000; padding:0 .5em; margin-left:.5em; }
#ContactDIM fieldset label { display:block; width:60px; text-align:right; float:left; padding:6px; color:#5268A1;}
#ContactDIM p { padding: .3em; }
#ContactDIM span.Hint { margin-left:84px; font-size:10px; color:#666;  height:2em; display:block; }

#ContactDIM input, #ContactDIM textarea { font-family:Arial, Helvetica, sans-serif; color:#333; font-size:12px; }
#ContactDIM input { width:200px; border:1px solid #777; padding:6px; }
#ContactDIM textarea { width:400px; height:150px; padding:6px; border:1px solid #777;  }

#ContactDIM #Contact { font-size:16px; color:white; font-weight:bold; margin-left:72px; width:200px;}	
#ContactDIM #Contact:hover { cursor: pointer;}

#ContactInfo h3 { padding-left:20px; }



/*========================= Applications =================================*/
#AppIntroContainer { width:450px; padding:10px 20px 0 20px; float:left; }
#AppPossibleLocations { width:295px; padding:20px 20px 0 20px; float:right;}
#AppPossibleLocations h4 { font-size:20px; border-bottom:1px solid #ccc; padding-bottom:4px;}
#AppPossibleLocations h6 { font-size:10px; color:#999; font-weight: 100;}

.AppThumbNailScroller { width:330px; float:right; clear:right; margin:5px;}
.AppThumbNailScroller h2 { display: block; margin:0 0 0 20px; padding:0;color:#333; padding-top:10px; font-weight:bold;}

#AppLargeImageContainer { width:580px; float:left; margin: 10px 0 20px 20px;}

#AppLargeImageCredit { background:#333; display:block; width:570px; height:60px; color:white; padding-left:10px;}
#AppLargeImageCredit h2 { color:white; margin:0; padding:6px 0 0 0; font-size:14px; line-height:1.2em; font-weight:100; }
#AppLargeImageCredit h3 { color:white; margin:0; padding:0; font-size:10px; line-height:1.5em; font-weight: 100; }
		
#AppLargeImageCredit img { float:right; margin:5px;}
	
#AppLargeImageCredit a:link, #AppLargeImageCredit a:visited { color:white; }
#AppLargeImageCredit a:hover { color:white; text-decoration: underline;}

#SimpleAppText { float:right; margin:20px; width:298px;}
#SimpleAppText p { margin-bottom:10px;}
#SimpleAppText .FindDealer { margin-top:20px;}

#SimpleAppImage { float:left; margin:20px;}


/*--------------- Download Container Blocks ------------------------------*/
.DownloadContainer { border:1px solid #ccc; background:#eee; width:160px; margin:10px; padding:10px; float:left;}
.DownloadContainer h4 { margin:0 0 0 6px; }
.DownloadContainer h5 { margin:0 0 0 6px; padding-bottom:0;}
.DownloadContainer h6 { font-weight: 100; font-size:9px; margin:0 0 0 6px; padding:0; }
.DownloadContainer img { border:3px solid #eee; padding:2px; }
.DownloadContainer img:hover { border:3px solid #990000;}


/*========================= Configurations =================================*/
.InstallationConfigs .Blocks { width:140px; float:left; margin-left:6px; }
.InstallationConfigs img { width:135px; height:100px; background:#ccc; padding:2px; }
.InstallationConfigs img:hover { background:#990000; }
.InstallationConfigs .Type {float:left; margin:12px; background:; }
.InstallationConfigs h2 { font-size:20px; color:#5268A1; background:; border-bottom:1px dotted black; font-weight:bold; padding:10px 0 6px 6px; margin:0 0 0 6px;}
.InstallationConfigs h3 { color:#333; background:#fff; margin:0; padding:4px 0 4px 6px; font-weight:100; font-size:12px;}
.InstallationConfigs p { color:#666; font-size:11px; padding:0 0 0 4px;}
.InstallationConfigs span { color:#990000; font-size:9px; }

.ConfigHeader { margin:10px; }
#ConfigContactInfo { margin:10px; }


#NewsTicker { display: block; padding:20px; }
#NewsTicker #news {float:left; padding-left:6px; width:800px;}
#NewsTicker p { float:left;}

#triggers { position:relative; margin-top:40px; color:white;}
	#triggers a:link, #triggers a:visited { color:white;}
	#triggers a:hover { text-decoration: underline; }
	#triggers h4 { font-size:1.2em; font-weight:bold; border-bottom:1px solid #333; }
	#triggers #TryItOut { float:right; margin:10px 15px 0 0;}
	
#NewsletterForm { background: #eee; border:1px solid #ccc; padding:20px; line-height: 2em;  }
	#NewsletterForm span.label,#NewsletterForm span.spacer,#NewsletterForm span.multiple span {width:80px;float:left;} 
	#NewsletterForm input[text] { background:#fff; border:1px solid #ccc; padding:6px; color:#333; width:120px; }
	#NewsletterForm { margin-top:10px;  }
	#NewsletterForm h1 { margin:0 0 20px 86px; }
	#NewsletterForm .field { display: block; clear:both; vertical-align: middle; padding:6px; }
	#NewsletterForm #submit { margin-left:80px; }