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

	RESET.CSS

	CREATED: Wed 19.12.07 @ 11:09 a.m.
	AUTHOR: Kean Richmond

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

html, *						{margin:0; padding:0;}
 
h1,h2,h3,h4,h5,h6 			{font-size:100%; font-weight:normal;}

fieldset,
iframe,
img							{border:0;}

table 						{border-collapse:collapse; border-spacing:0;} 
th							{font-style:normal; font-weight:normal; text-align:left;} 

ol,ul 						{list-style:none;}

a							{outline:none;}



/*----------------------------------------------------
	
	SCREEN--MOBILE.CSS
	
----------------------------------------------------*/

html, *						       {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}



/*----------------------------------------------------------------------------------------------------*\ 
	1. #BASE/CORE
\*----------------------------------------------------------------------------------------------------*/

/* 1.1. --- #Core -------------------------------*/

html                                {font-size:62.5%;}
body                                {background:url('../img/window-bg.png') repeat-x #F3DBAA; color:#000; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:13px; font-size:1.3rem; min-width:300px;}

img                                 {height:auto; max-width:100%;}


/*----------------------------------------------------------------------------------------------------*\ 
	2. #OBJECTS
\*----------------------------------------------------------------------------------------------------*/

/* 2.1. --- #Layout -------------------------------*/

#main-container                     {background:#FFF; border:1px solid #CD993A; margin-left:10px; margin-right:10px;}




/*----------------------------------------------------------------------------------------------------*\ 
	3. #ATOMS
\*----------------------------------------------------------------------------------------------------*/

/* 3.1. --- #Links -------------------------------*/

a							        {color:#9C6F14; text-decoration:underline;}
a:focus, a:hover			        {color:#D09F45; text-decoration:none;}



/* 3.2. --- #Headings -------------------------------*/

h1, h2					         	{color:#9F731B; font-size:2em; font-weight:bold; margin:0 0 30px 0;}
h3						        	{font-size:1.2em; font-weight:bold;}





/*----------------------------------------------------------------------------------------------------*\ 
	4. #COMPONENTS/ORGANISMS
\*----------------------------------------------------------------------------------------------------*/

/* 4.1. --- #Header -------------------------------*/

.the-header                         {height:100%; overflow:hidden; text-align:center;}
.the-header__img                    {margin-bottom:10px;}

.logo                               {display:none;}
.logo--mobile                       {display:block; margin:0 auto; max-width:100%; width:300px;}
.logo--mobile img                   {}

@media screen and (max-width:459px) {
    .the-header__img                {display:none!important;}
}

@media screen and (min-width:680px) {
    .logo--mobile                   {float:left; width:30%;}
    .the-header__img                {float:right; width:70%;}
}


/* 4.2. --- #Navigation -------------------------------*/

.offcanvas                          {background:#000; background:rgba(0,0,0,0.6); display:none; height:100%; left:0; position:fixed; top:0; width:100%; z-index:100;}
.offcanvas:target			        {display:block;}
.offcanvas:target .offcanvas__inner {display:block;}

.offcanvas__inner                   {background:#FFF; bottom:0; min-width:240px; max-width:360px; position:fixed; top:0; right:100%; width:80%; z-index:101;}
.no-js .offcanvas__inner            {display:none; left:0;}
.js .offcanvas__inner			    {right:100%;}

.offcanvas a                        {text-decoration:none;}

.offcanvas__toggle--menu            {border:1px solid #9C6F14; border-radius:3px; clear:both; color:#9C6F14; display:block; font-size:15px; font-size:1.5rem; font-weight:bold; line-height:20px; line-height:2rem; margin:0 10px 10px 10px; padding:7px 6px 6px 36px; position:relative; text-decoration:none; text-transform:uppercase;}
.offcanvas__toggle--menu:before     {background:url(/img/icon--hamburger.png) no-repeat; content:" "; height:15px; left:7px; position:absolute; top:9px; width:20px;}
.offcanvas__toggle--menu:hover      {border-color:#D09F45; color:#D09F45;}

.offcanvas__toggle--subnav          {background:#DFC795; color:#6F4F0D; display:block; margin:-30px 0 20px 0; padding:9px 6px 8px 36px; position:relative; text-decoration:none; text-transform:uppercase;}
.offcanvas__toggle--subnav:before   {background:url(/img/icon--hamburger.png) no-repeat; content:" "; height:15px; left:7px; position:absolute; top:9px; width:20px;}
.offcanvas__toggle--subnav:hover    {background:#D09F45; color:#FFF;}

.offcanvas header                   {background:#9C6F14; padding:20px;}
.offcanvas__close                   {color:#FFF; text-transform:uppercase;}    
.offcanvas__content                 {height:calc(100% - 49px); overflow-y:scroll; padding:0 10px 40px 10px;}

.fade-in 						{animation:fadeIn .5s forwards;}
.fade-out 						{animation:fadeOut .5s forwards;}

@keyframes fadeIn                 {
  to                              {opacity:1;}
}

@keyframes fadeOut                {
  to                              {opacity:0;}
}


.the-navigation li,
.sub-navigation li                  {border-bottom:1px solid #DCDAD7;}
.the-navigation a,
.sub-navigation a                   {display:block; font-size:13px; font-size:1.3rem; padding:14px 10px 13px 10px;}
.the-navigation a:hover,
.sub-navigation a:hover             {background:#F7ECD6;}

.glossary-navigation                {margin:20px 10px 10px 10px;}
.glossary-navigation__title         {border-bottom:1px solid #DCDAD7; color:#6F4F0D; display:block!important; margin:0 -10px 10px -10px; padding:14px 10px 13px 10px; text-transform:uppercase;}
.glossary-navigation li             {display:inline-block;}
.glossary-navigation a              {display:block; padding:6px; text-align: center; width:40px;}
.glossary-navigation a:hover        {background:#F7ECD6;}


/* 4.3. --- #Footer -------------------------------*/

#footer 					       {background:#9C6F14; border-top:1px solid #CD993A; font-size:0.85em; margin:20px 0 0 0; height:100%; overflow:hidden; width:100%;}
#footer p 					       {color:#FFFFFF; padding:5px;}
#copyright					       {float:left; width:75%;}
#link-sitemap				       {color:#FFFFFF; display:block; float:right; padding:5px; text-decoration:none;}
#link-sitemap:hover			       {text-decoration:underline;}
#siteby						       {margin:-10px auto 10px auto; text-align:right; width:960px;}

.back-to-top                       {background:url(/img/backtotop.png) center no-repeat #9C6F14; background-color:rgba(156, 111, 20, 0.9); bottom:40px; height:40px; position:fixed; right:20px; text-indent:-9999px; width:40px;}



/* 4.4. --- #Content -------------------------------*/

.main 		                        {padding:20px 10px;}

.content 					        {height:100%; overflow:hidden;}

.content p 					        {line-height:180%; margin:0 0 20px 0;}
.content ol 				        {color:#DCAF53; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.2em; font-weight:bold; list-style:decimal; margin:0 0 0 20px;}
.content li 				        {margin:0 0 0 5px;}
.content ol p				        {color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; font-weight:normal; margin:8px 0;}

.ac                                 {display:block; text-align:center;}


/* 4.5. --- #Cutout Text -------------------------------*/

.cutout                             {clear:both; color:#81652B; font-family:Georgia, Times, 'Times New Roman', serif; text-align:left;}
.cutout__line--1                    {font-size:1.5em; line-height:1.2em;}
.cutout__line--2                    {display:block; font-size:1.1em; font-style:italic; padding-top:4px;}



/* 4.6. --- #Gallery -------------------------------*/

.gallery                            {}
.gallery li                         {display:inline-block; line-height:1.8; margin:0 10px 10px 0!important;}
.gallery img                        {display:block; margin-bottom:10px; max-width:100%; vertical-align:middle;}
.gallery a img			           	{border:1px solid #9C6F14;}
.gallery span                       {color:#9C6F14; display:block;}

@media screen and (max-width:419px) {
    .gallery li                     {display:block; float:left; margin:0 0 10px 5%!important; width:47.5%;}
    .gallery li:nth-child(2n+1)     {clear:both; margin-left:0!important;}
}


/*----------------------------------------------------------------------------------------------------*\ 
	5. PAGES
\*----------------------------------------------------------------------------------------------------*/

/* 5.1. --- #Index -------------------------------*/

#homepage .main                     {padding:0;}

#macro-intro-area			        {background:#9C6F14; color:#FFFFFF; padding:30px 15px 15px 15px;}
#macro-intro-area h1  		        {color:#FFFFFF;}
#macro-intro-area h1 span	        {color:#FAE5A3;}
#homepage #column-2 #macro-intro-area p	{margin:0 0 20px 0; text-align:justify;}
#macro-intro-area p a		         {color:#FAE5BB; font-weight:bold; text-decoration:none;}
#macro-intro-area p a:focus,  
#macro-intro-area p a:hover         {text-decoration:underline;}

#homepage #column-1                 {text-align:center;}
#homepage #column-2 img             {margin:15px 50px 0 0;}
#homepage #column-2 p 		        {margin:10px 0 0 0; text-align:center;}

.cutout--testimonial                {color:#9C6F14; font-size:1.2em; padding:20px 20px 20px; text-align:right;}
.cutout--testimonial__line-1        {display:block; font-family:Georgia, Times, 'Times New Roman', serif; font-style:italic; padding-right:30px; text-align:left;}
.cutout--testimonial__line-2        {color:#CD993A; display:block; font-style:normal; padding-top: 2px;}
.cutout--testimonial__line-2 strong    {color:#9C6F14; font-style:italic;}

#homepage #column-1	img		        {display:block;} 


@media screen and (min-width:620px) {
    #homepage #column-1			    {float:left; width:50%;}
    .cutout--testimonial            {padding-left:60px; padding-left:60px;}
}

@media screen and (min-width:620px) and (max-width:779px) {
    #macro-intro-area               {float:right; width:50%;}
    .cutout--testimonial            {clear:both;}
    .cutout--testimonial            {}
}

@media screen and (min-width:780px) {
    #homepage #column-2             {float:right; width:50%;}  
}


/* 5.2. --- #About -------------------------------*/

#about-us #column-1 img             {border:1px solid #9C6F14; float:left; margin:5px 10px 10px 0;}
#about-us #column-2 img             {border:1px solid #9C6F14; float:right; margin:5px 0 10px 10px;}

.cutout--about                      {padding-bottom:20px;}


/* 5.3. --- #Our Work -------------------------------*/

.cutout--ourwork .cutout__line--1    {color:#9F731B;}
.cutout--ourwork .cutout__line--2    {color:#B99F6A;}

#our-work .gallery li:first-child   {padding-bottom:20px; width:100%;}
@media screen and (max-width:419px) {
    #our-work .gallery li:not(:first-child)   {display:block; float:left; margin:0 0 0 5%!important; width:47.5%;}
    #our-work .gallery li:nth-child(2n+1)     {clear:none; margin-left:5%!important;}
    #our-work .gallery li:first-child         {margin-left:0!important;}
    #our-work .gallery li:nth-child(2n+2)     {clear:both; margin-left:0!important;}
}


/* 5.4. --- #Testimonials -------------------------------*/

.content ul.testimonial-list li     {border-bottom:1px solid #DFC795; height:100%; line-height:180%; margin:20px 0; overflow:hidden; padding:0 0 25px 0;}

.testimonial-list blockquote        {font-style:italic; margin:0 0 5px 0;}
.testimonial-list span      		{color:#9C6F14; font-size:1.2em;}
.testimonial-list cite      		{color:#9C6F14; display:block;}
.testimonial-list strong        	{display:block;}

a.next-page-link,
a.prev-page-link         			{border:1px solid #DFC795; border-left:0; border-right:0; padding:4px 0;}
a.next-page-link         			{background:url('../img/misc/arrow-link_next.gif') no-repeat right center; padding-right:20px;}
a.prev-page-link         			{background:url('../img/misc/arrow-link_back.gif') no-repeat left center; padding-left:20px;}

@media screen and (max-width:619px) {
    .testimonial-list blockquote,
    .testimonial-list cite          {margin-left:0!important;}
    a.next-page-link,
    a.prev-page-link                {display:block; margin-bottom:10px;}
}

@media screen and (min-width:620px) {
    .testimonial-list img           {float:left; margin:0 20px 0 0;}
    a.next-page-link         		{float:right;}
    a.prev-page-link         		{float:left;}
 
}


/* 5.5. --- #Contact -------------------------------*/

#contact-us h3                      {color:#9C6F14;}

.vcard       						{border-top:1px solid #DFC795; padding:10px 0 0 0;}
.vcard p,
.vcard address      				{padding:0 0 0 30px;}
.vcard p.tel-row         			{background: url('../img/misc/icon_phone.gif') no-repeat;}
.vcard p.email-row       			{background: url('../img/misc/icon_email.gif') no-repeat;}
.vcard address      				{font-style:normal; line-height:180%;}
.vcard strong        				{color:#9C6F14;}

@media screen and (max-width:479px) {
    .vcard address      			{border-bottom:1px solid #DFC795; margin-bottom:15px; padding-bottom:15px;}
}

@media screen and (min-width:480px) {
    .vcard p,
    .vcard address                  {width:50%;}
    .vcard address      			{border-left:1px solid #DFC795; float:right;}
}

form label       					{color:#9C6F14; display:block; float:left; font-weight:bold; width:95px;}
form input, form textarea, 
form select          				{background:#F7EFD7; border:1px solid #9C6F14; color:#9C6F14; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:16px; padding:6px;}
form input,
form textarea        				{font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:16px; padding:6px; width:100%;}
.select-row label        			{display:inline; float:none; margin:0 10px 0 0;}
input[type="submit"]        		{background:url('../img/misc/button_submit.gif') no-repeat; border:0; cursor:pointer; height:35px; margin:0 55px 0 0; padding:0 0 0 110px; text-indent:-9999px; width:110px;}

.message-error                      {color:#FF0000;}

#p-security     					{clear:both; display:none; height:0px; visibility:hidden;}
#p-security label       			{float:none; padding:0 0 4px 0; text-align:left; width:auto;}
#p-security input[type='text']      {display:block; float:none;}


/* 5.6. --- #Info Section -------------------------------*/

/* Hgroup */
.cutout--info                       {padding-bottom:10px;}
.cutout--info span                  {display:block;}
.cutout--info__num                  {color:#6A5018; font-size:1.5em; font-weight:bold; text-transform:uppercase;}
.cutout--info__title, .cutout--info__subtitle   {font-family:Georgia, Times, 'Times New Roman', serif;}
.cutout--info__title                {color:#9A7226; font-size:1.5em; text-transform: uppercase;}
.cutout--info__subtitle             {color:#C79E48; font-size:1.4em; font-style:italic;}

.cutout--info--lower .cutout--info__title   {text-transform:none;}  

.info-section .content p            {margin-top:12px;} 
.info-section h1                    {border-bottom:1px solid #DFC795; font-size:1.6em; line-height:180%;}
.info-section h2, h3, h4        	{border-bottom:1px solid #DFC795; font-size:1.4em; line-height:180%;}
.info-section h2, h3, h4        	{clear:both; color:#9F731B; font-weight:bold; line-height:160%; margin-bottom:20px;}

.info-section blockquote        	{font-family:Georgia, "Times New Roman", Times, serif; font-size:0.87em; line-height:180%; margin:10px 10px 20px 10px;}
@media screen and (min-width:620px) {
    .info-section blockquote        {margin-left:85px; margin-right:85px;}
}

.unbold                             {font-weight:normal;}



/* Images */
.pullquote      					{margin:9px 0 28px 0; padding:5px; text-align:center;}	
.pullquote a        				{position:relative; text-decoration:none;}	
.icon-enlarge       				{display:none;}
.info-section .content .pullquote p	{border-bottom:1px solid #DEC794; clear:both; font-family:Georgia, "Times New Roman", Times, serif; font-size:0.87em; font-style:italic; line-height:normal; margin:0; padding:5px; text-align:center;}
.pullquote span     				{color:#000000; font-size:1.1em; font-weight:bold;}


#recommended-reading        		{clear:both; height:100%; margin:0 0 25px 0; overflow:hidden; text-align:center;}
#recommended-reading div        	{font-family:Georgia, "Times New Roman", Times, serif; font-size:0.8em;}
@media screen and (min-width:620px) {
    #recommended-reading div    	{float:left; width:47.5%;}
    #recommended-reading div.alignleft  {margin-right:5%;}
}

#acknowledgements        			{border-top:1px solid #DFC795; font-size:0.8em; padding:10px 0 0 0; text-align:center;}
#acknowledgements h6        		{font-style:italic; font-weight:bold; text-transform:uppercase;}
.info-section .content #acknowledgements p	{font-style:italic; line-height:normal; margin:0; text-align:center;}


/* Index */

#infopic                            {margin-bottom:20px;}
@media screen and (min-width:620px) {
    #infopic                        {float:right; margin-top:5px; margin-right:5px; margin-left:39px;}
}
#info-links					        {clear:both; padding:20px 0 0 0;}
#info-links li                      {border-bottom:1px solid #DFC795; line-height:180%; margin:0 0 15px 0; padding-bottom:15px; text-transform:uppercase;}
#info-links li span                 {text-transform:none;}


/* 5.7. --- #Repairs -------------------------------*/

#draught-proofing #column-1 ul li {background:url('../img/misc/bullet_1.gif') no-repeat; margin:0; padding:0 0 0 25px;}

.cutout--repairs            {color:#BE8C28; padding-bottom:20px;}
.cutout--repairs span       {display:inline; padding-left:4px;}


/* 5.8. --- #Renovation -------------------------------*/

.cutout--renovation         {color:#DCAF53; padding:20px 0;}


/* 5.9. --- #Draught Proofing -------------------------------*/

.cutout--draught            {color:#B28F48; padding-bottom:20px;}


/* 5.10. --- #Replacements -------------------------------*/

.cutout--replacements       {color:#6F4F0D; padding-bottom:20px;}


/* 5.11. --- #Glossary -------------------------------*/

.glossary-list__child		{border-bottom:1px solid #DFC795; height:100%; margin-bottom:20px; overflow:hidden; padding:0 0 20px 0; position:relative;}
.glossary-list__child.last	{border:0;}
.glossary__dt				{color:#A07318; font-family:"Times New Roman", Times, serif; font-size:16px; line-height:22px; margin-bottom:13px;}
.glossary__dt span			{font-size: 75%;}
.glossary__dd				{line-height:165%; text-align:justify;}

.glossary-list img			{display:inline-block; vertical-align:middle;}
.glossary-list a.fade 		{border:1px solid #DFC795; display:block; padding:4px; position:relative; z-index:1; -webkit-transition:opacity 0.5s ease-in-out; transition:opacity 0.5s ease-in-out;}
@media screen and (max-width:479px) {
    .glossary-list a.fade   {margin:0 auto 10px auto; width:135px;}
}
@media screen and (min-width:480px) {
    .glossary-list__child	{padding-left:155px;}
    .glossary-list a.fade    {float:left; margin-left:-155px;} 
}
.glossary-list a.fade:hover {opacity:0.7;}
.glossary-list .zoom 		{background:url(../img/zoom.png) 0px 0px no-repeat; bottom:4px; height:28px; left:4px; position:absolute; width:28px;}

.underline                  {text-decoration: underline;}


/* 5.12. --- #Sitemap -------------------------------*/

#sitemap .content ul li		{background: url('../img/misc/bullet_1.gif') no-repeat; list-style:none; line-height:180%; margin:0; padding:0 0 20px 25px;}
#sitemap .content ul li		{background: url('../img/misc/bullet_1.gif') no-repeat; list-style:none; line-height:180%; margin:0; padding:0 0 20px 25px;}