@charset "UTF-8";

/* Screen Styles                                    */
/* Copyright(C)2010 Source Internet Development Ltd */

html {height: 100%; margin: 0;}
body {height: 100%; background: #fff; margin: 0; text-align: center;}

h1, h2, h3, h4, h5, h6, p, a, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, ul, li, div 
{font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 110%;}
p						{color: #555; line-height: 120%;}

#legacyIE				{display: none;}

#content100				{width: 100%; margin: 0; clear: both; padding: 0; background: top left repeat-x url(images/bg-grey-grad.png);}

#header100				{width: 100%; text-align: center; clear: both;}
#headerArea				{width: 940px; padding: 12px 0 15px 0; margin: 0 auto; text-align: left; overflow: hidden;}
#headerLeft				{float: left;}
#headerLeft	#logo		{width: 226px; height: 93px; margin: 17px 0 0 0;}
#headerRight			{float: right; text-align: right;}
#headerRight #aratedBox	{margin: 0 0 8px 0;}
#phoneBox				{width: 622px; text-align: left;}
#phoneBox #top			{width: 622px; height: 10px; background: top left no-repeat url(images/header-box-top.png);}
#phoneBox #mid			{width: 582px; padding: 2px 20px; background: top left repeat-y url(images/header-box-mid.png);}
#phoneBox #mid h5		{font-family: Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 120%; color: #908e8e;}
#phoneBox #mid h6		{font-family: Helvetica, Arial, sans-serif; font-size: 110%; color: #908e8e; font-weight: normal;}
#phoneBox #mid h6 strong	{font-size: 115%; color: #f57000; font-weight: bold;}
#phoneBox #mid h6 a			{font-size: 115%; color: #f57000; font-weight: bold;}
#phoneBox #mid h6 a:hover	{color: #333; font-weight: bold;}
#phoneBox #bot				{width: 622px; height: 10px; background: top left no-repeat url(images/header-box-bot.png);}

#footer100							{width: 100%; margin: 0; clear: both; padding: 0; background: #e8781a top left repeat-x url(images/bg-footer.png);}
#footerArea							{margin: 0 auto; width: 940px; text-align: left; overflow: hidden;}
#footerArea #leftCol				{float: left;}
#footerArea #fensaLogo				{float: left; margin: 22px 0;}
#footerArea #rightCol				{float: right; margin: 20px 0 0 0; text-align: right;}
#footerArea #rightCol p				{font-size: 80%; color: #fff; line-height: 140%;}
#footerArea #rightCol p a			{font-size: 100%; color: #fff;}
#footerArea #rightCol p a:hover		{color: #e8781a; background: #fff; text-decoration: none;}

#area1						{width: 940px; overflow: hidden; margin: 0 auto 18px auto;}
#area1 #pic					{float: right; text-align: left; width: 480px;}
#area1 #colR				{float: right; text-align: left; width: 440px; padding-top: 20px;}
#area1 #colL				{float: left; text-align: left; margin: 0 0 0 15px; padding-top: 20px; width: 440px;}
#area1 #content				{float: left; text-align: left; margin: 0 0 0 15px; padding-top: 20px; width: 420px;}
#area1 h1					{color: #f77603; font-weight: bold; font-size: 175%; margin: 0 0 2px 0; letter-spacing: -0.02em;}
#area1 h2					{color: #dc6200; font-weight: bold; font-size: 145%; margin: 0 0 16px 0; letter-spacing: -0.02em;}
#area1 p					{color: #555; font-weight: bold; font-size: 110%; margin: 0 0 16px 0; letter-spacing: -0.02em;}
#area1 #pic p				{padding: 0 15px;}
#area1 #colL #quote			{border-top: 2px solid #e8781a; border-bottom: 2px solid #e8781a; margin: 0 0 20px 0; padding: 18px 0;}
#area1 #colL #quote p		{font-size: 100%; font-style: italic; font-weight: bold; color: #dc6200; margin: 0 0 10px 0;}
#area1 #colL #quote p.name	{font-size: 90%; font-style: normal; color: #555;}

#area2					{width: 940px; text-align: left; overflow: hidden; margin: 0 auto 25px auto;}
#area2 #gallery			{float: left; padding: 0 0 0 15px; width: 420px; overflow: hidden;}
#area2 #gallery #thumbs	{margin: 0 0 15px 0; background: top left no-repeat url(images/bg-gallery.png);}
#fancybox-title-over	{color: #fff; font-size: 110%;}
#area2 #gallery #img1	{padding: 0 9px 9px 0;}
#area2 #gallery #img3	{padding: 0 0 9px 0;}
#area2 #gallery	h3		{color: #f77603; font-weight: bold; font-size: 150%; margin: 0 0 5px 0; letter-spacing: -0.02em;}
#area2 #gallery	p		{color: #555; font-size: 90%; margin: 0 0 15px 0;}

#area2 #content			{float: right; width: 465px;}
#area2 #content	h3		{color: #f77603; font-weight: bold; font-size: 150%; margin: 0 0 5px 0; letter-spacing: -0.02em;}
#area2 #content	p		{color: #555; font-size: 90%; margin: 0 0 15px 0;}
#area2 #content	p strong	{color: #4e4a42; font-weight: bold;}
#area2 #content #energy		{float: right; margin: 0 0 20px 20px;}

#area2 #full			{padding: 0 15px 0 15px; overflow: hidden; margin: 0 0 20px 0;}
#area2 #full h3			{color: #f77603; font-weight: bold; font-size: 150%; margin: 0 0 5px 0; letter-spacing: -0.02em;}
#area2 #full p			{color: #555; font-size: 90%; margin: 0 0 15px 0;}
#area2 #full p strong	{color: #4e4a42; font-weight: bold;}

#detailBox					{width: 940px; color: #eee; text-align: left; margin: 0 auto 20px auto; overflow: hidden;}
#detailBox #top				{width: 940px; height: 15px; background: top left no-repeat url(images/product-box-top.png);}
#detailBox #mid				{width: 940px; overflow: hidden; background: top left repeat-y url(images/product-box-mid.png);}
#detailBox #mid	#left		{float: left; width: 325px; margin: 0 0 0 35px; padding: 12px 0 7px 0;}
#detailBox #mid	#left h4	{font-weight: bold; color: #002664;}
#detailBox #mid	#left p		{color: #555; font-size: 80%; margin: 0 0 15px 0;}
#detailBox #mid	#left p.big	{color: #555; font-size: 90%; margin: 0 0 25px 0;}

#detailBox #mid	#leftlanding	{float: left; margin: 0 35px 0 35px; padding: 12px 0 7px 0;}
#detailBox #mid	#leftlanding h4	{font-weight: bold; color: #002664;}
#detailBox #mid	#leftlanding p		{color: #555; font-size: 80%; margin: 0 0 15px 0;}
#detailBox #mid	#leftlanding p.big	{color: #555; font-size: 90%; margin: 0 0 25px 0;}

#detailBox #mid	#conservpic	{float: left; margin: 20px 45px 0 30px; width: 121px; height: 335px;}
#detailBox #mid	#windowpic	{float: left; margin: 25px 0 0 25px;}
#detailBox #mid	#doorspic	{float: left; margin: 20px 0 0 30px;}
#detailBox #mid	#landingpic	{float: right; margin: 0 0 25px 25px;}

#detailBox #mid	#right		{float: left; margin: 45px 0 0 0; width: 350px;}
#detailBox #mid	#right ul	{list-style: disc; margin: 0; padding: 0;}
#detailBox #mid	#right li	{color: #333; font-size: 100%; font-weight: bold; margin: 0 0 12px 0;}
#detailBox #bot				{width: 940px; height: 15px; background: top left no-repeat url(images/product-box-bot.png);}
#detailBox h4				{font-size: 85%; color: #3b3b3b; margin: 0 0 4px 0; font-size: 150%; margin: 0 0 8px 0; letter-spacing: -0.02em;}
#detailBox p				{font-size: 75%;}

#fasciaBox					{width: 940px; color: #eee; text-align: left; margin: 0 auto 20px auto; overflow: hidden;}
#fasciaBox #top				{width: 940px; height: 15px; background: top left no-repeat url(images/product-box-top.png);}
#fasciaBox #mid				{width: 940px; overflow: hidden; background: top left repeat-y url(images/product-box-mid.png);}
#fasciaBox #mid	#left		{float: left; width: 525px; margin: 0 0 0 35px; padding: 12px 0 7px 0;}
#fasciaBox #mid	#left h4	{font-weight: bold; font-size: 140%; color: #002664;}
#fasciaBox #mid	#left p		{color: #555; font-size: 90%; margin: 0 0 15px 0;}
#fasciaBox #mid	#left p a	{font-weight: bold; color: #002664;}
#fasciaBox #mid	#right		{float: left; text-align: right; margin: 0; width: 320px;}
#fasciaBox #bot				{width: 940px; height: 15px; background: top left no-repeat url(images/product-box-bot.png);}

#garageBox					{width: 940px; color: #eee; text-align: left; margin: 0 auto 20px auto; overflow: hidden;}
#garageBox #top				{width: 940px; height: 15px; background: top left no-repeat url(images/product-box-top.png);}
#garageBox #mid				{width: 940px; overflow: hidden; background: top left repeat-y url(images/product-box-mid.png);}
#garageBox #mid	#left		{float: left; width: 525px; margin: 0 0 0 35px; padding: 12px 0 7px 0;}
#garageBox #mid	#left h4	{font-weight: bold; font-size: 140%; color: #002664;}
#garageBox #mid	#left p		{color: #555; font-size: 90%; margin: 0 0 15px 0;}
#garageBox #mid	#left p a	{font-weight: bold; color: #002664;}
#garageBox #mid	#right		{float: left; text-align: right; margin: 0; width: 320px;}
#garageBox #bot				{width: 940px; height: 15px; background: top left no-repeat url(images/product-box-bot.png);}

#endMessage					{width: 940px; margin: 0 auto 45px auto; text-align: center;}
#endMessage p				{margin: 0; font-weight: bold; font-size: 110%; color: #dc6200;}
#endMessage p a				{color: #f57000; font-weight: bold;}
#endMessage p a:hover		{color: #333; font-weight: bold;}



/* Menu */
div#menu					{width: 960px; height: 50px; margin: 0 auto 15px auto; text-align: center; font-size: 80%; background: top left no-repeat url(images/bg-menubar.png);}
div#menu ul					{list-style: none; margin: 0 0 0 17px; padding: 0;}
div#menu li					{float: left; display: block;}
div#menu li a 				{float: left; display: block; padding: 0 0 0 4px; color: #fff; font-weight: bold; text-decoration: none; cursor: pointer; height: 50px;}
div#menu li a span			{text-transform: uppercase; float: left; background: url(images/nav/right-curve.gif) right top no-repeat; display: block; padding: 12px 13px 15px 7px; font-weight: bold; height: 16px; color: #fff;}
div#menu li a:hover 		{float: left; background: url(images/nav/left-hover-curve.gif) left top no-repeat; display: block; padding: 0 0 0 4px; color: #fff; text-decoration: none; height: 50px;}
div#menu li a:hover span	{float: left; background: url(images/nav/right-hover-curve.gif) right top no-repeat; display: block; padding: 12px 13px 15px 7px; height: 16px; color: #fff;}
div#menu li.current 		{}
div#menu li.current span 	{color: #ffce6e;}



/* Homepage */
#homeFeature				{width: 940px; height: 280px; padding-top: 8px; margin: 0 auto 40px auto; background: #fff top left no-repeat url(images/bg-home-feature.png);}
#faded 						{margin: 0 auto 0 auto; width: 924px; height: 272px;}
#faded a 					{outline:0; border:0;}
.rap 						{height: 272px;}

#homeCols					{width: 940px; margin: 0 auto 10px auto; overflow: hidden;}
#homeCols #left				{width: 580px; float: left; text-align: left;}
#homeCols #left #heading	{background: bottom left no-repeat url(images/bg-home-h1.png); margin: 0 0 25px 0;}
#homeCols #left #heading h1	{font-size: 120%; color: #464139; padding: 5px 20px 25px 12px;}
#homeCols #left #col1		{float: left; width: 268px; padding: 0 0 0 12px;}
#homeCols #left #col2		{float: left; width: 268px; padding: 0 0 0 25px;}

#homeCols #product			{width: 268px; margin: 0 0 18px 0; border-bottom: 2px solid #ececec; padding: 0 0 18px 0;}
#homeCols #product h2		{font-size: 110%; color: #3b3b3b; margin: 0 0 0 4px;}
#homeCols #product p		{font-size: 80%; margin: 0 0 15px 4px;}
#homeCols #product img		{float: right; margin: 0 0 10px 13px;}
#homeCols #product #btn		{width: 271px; height: 31px; clear: both; font-size: 80%; font-weight: bold;}
#homeCols #product #btn a	{display: block; background: top left no-repeat url(images/bg-home-btns.png); width: 256px; text-decoration: none; height: 26px; padding: 5px 0 0 15px; font-size: 100%; color: #fff;}
#homeCols #product #btn a:hover	{background-position: 0 -31px;}

#homeCols #right			{width: 340px; float: right;}
#homeCols #locations		{width: 340px; text-align: left;}
#homeCols #locations #top	{width: 340px; height: 10px; background: top left no-repeat url(images/locations-box-top.png);}
#homeCols #locations #mid	{width: 300px; padding: 6px 20px 9px 20px; background: top left repeat-y url(images/locations-box-mid.png);}
#homeCols #locations #bot	{width: 340px; height: 10px; background: top left no-repeat url(images/locations-box-bot.png);}
#homeCols #locations h3		{font-size: 85%; color: #3b3b3b; margin: 0 0 4px 0;}
#homeCols #locations p		{font-size: 75%;}
#homeCols #locations p a	{color: #555;}
#homeCols #locations p a:hover	{color: #222;}

#homeEnergy					{width: 340px; height: 343px; background: top left no-repeat url(images/graphic-energy-home.png); margin: 0 0 20px 0;}
#homeEnergy #top			{text-align: left; padding: 14px 20px 10px 20px;}
#homeEnergy #top h3			{color: #fff; font-size: 110%;}
#homeEnergy #bot			{text-align: right; padding: 100px 20px 0 170px;}
#homeEnergy #bot h4			{color: #00873b;}



/* about page */
#aboutImage					{margin: 0 0 22px 0;}
#aboutImageFloat			{float: right; margin: 0 0 22px 20px;}


/* conservatories page */
#conservList				{clear: both; overflow: hidden;}
#conservList #pic			{float: left; width: 58px; height: 55px; margin: 0 5px 0 0;}
#conservList #txt			{float: left; width: 375px; margin: 12px 0 0 0;}

#area1 #pic #shadewell		{border: 2px solid #d4d4d4; padding: 18px; margin: 20px 15px 20px 15px; overflow: hidden; clear: both;}
#area1 #pic #shadewell img	{float: left; margin: 0 20px 0 0; padding: 0;}
#area1 #pic #shadewell p	{font-weight: normal; font-size: 80%; margin: 0;}
#area1 #pic #shadewell p a	{color: #f77603;}
#area1 #pic #shadewell p a:hover {color: #333;}



/* windows page */
#energyBox					{clear: both; overflow: hidden; margin: 0 0 20px 0;}
#energyBox #left			{float: left; margin: 0 10px 0 0;}
#energyBox #right			{float: left; width: 260px; margin: 10px 0 0 0;}
#energyBox #right p			{color: #00873b; font-weight: bold; font-size: 150%;}

#energyTxt					{margin: 0 0 20px 0;}
#energyTxt h4				{color: #00873b; font-weight: bold; font-size: 140%;}



/* contact page */
#contactArea				{width: 940px; overflow: hidden; margin: 0 auto 18px auto;}
#contactArea #right			{float: right; text-align: left; width: 300px; padding-top: 20px;}
#contactArea #left			{float: left; text-align: left; margin: 0 0 0 15px; padding-top: 20px; width: 590px;}
#contactArea h1				{color: #f77603; font-weight: bold; font-size: 175%; margin: 0 0 2px 0; letter-spacing: -0.02em;}
#contactArea p				{color: #555; font-size: 90%; margin: 0 0 22px 0;}
#contactArea p strong		{color: #f77603;}
#contactArea p a			{color: #f77603; font-weight: bold;}
#contactArea p a:hover		{color: #000;}
#contactArea p.links		{font-size: 70%; margin: -10px 0 15px 0;}
#contactArea ul				{}
#contactArea ul	li			{margin: 0 0 10px 0; font-size: 90%;}
#contactArea ul	li a		{font-weight: bold; color: #f77603;}
#contactArea ul	li a:hover	{color: #002664;;}

#contactArea #form			{border: 2px solid #d4d4d4; background: #f1f1f1; padding: 25px; margin: 0 0 50px 0;}
#contactArea #form p		{color: #555; margin: 0 0 12px 0; font-size: 90%; line-height: 110%;}
#contactArea #form ul		{margin: 0 0 20px 0;}
#contactArea #form li		{margin: 0 0 8px 0;}
#contactArea #form li label		{color: #333; font-size: 80%; font-weight: bold;}
#contactArea #form p.small		{font-size: 90%; font-weight: normal;}
#contactArea #form p a			{color: #726d66;}
#contactArea #form p a:hover 	{color: #000;}

#contactArea .contactFormBox	{border: 2px solid #aaa; padding: 3px; font-family: Arial, Helvetica, sans-serif; color: #333; font-weight: bold; font-size: 1.0em; width: 300px;} 
#contactArea .contactFormArea	{border: 2px solid #aaa; margin: 0 0 15px 0; padding: 3px; font-family: Arial, Helvetica, sans-serif; color: #333; font-weight: bold; font-size: 1.0em; width: 480px;} 
#contactArea .contactBtn		{border: 2px solid #333; margin: 0; background: #333; padding: 3px 8px; font-family: Arial, Helvetica, sans-serif; color: #fff; font-weight: bold; font-size: 0.8em;}