/*
/////////////////////////////////////////////////////////////////////////////	

	04/03/09 Add Reiersvlei2
	
	
	WigWamWebDesign - www.css
		Contents:
	
	1 General
	2 Structure
	3 Footer
	4 Navigation
	5 Fonts
	6 Page Identifiers
	7 Home Page
	8 Content Page
	9 Layout Page
	10 Navigation Page
	11 Graphics Page
	12 Feedback Page
	13 Contact Page

/////////////////////////////////////////////////////////////////////////////	
*/	


/*
/////////////////////////////////////////////////////////////////////////////	

	1 General
	
/////////////////////////////////////////////////////////////////////////////	
*/

* {
		margin: 0;
		padding: 0;
		}

body {
		background: #d7d7d7;
		font: small Arial, sans-serif;	 
		}
		
/*
/////////////////////////////////////////////////////////////////////////////	

	2 Structure
	
/////////////////////////////////////////////////////////////////////////////	
*/

#wrapper {
		width: 695px;
		margin: 10px auto;
		background: #ffffff;
		padding: 10px;
		}
		
#mainColumn {
		float: left;
		padding: 10px;
		margin-top: 10px; /* addition */
		background: #eeeeee;
		}					

.twoColumnPage #mainColumn {
		width: 460px;
		margin-right: 10px;
		}
		
#extraColumntop, #extraColumnupper, #extraColumnlower {
		float: left;
		width: 185px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding: 10px 10px 0px;
		background: #eeeeee;
		}

#extraColumnbottom {
		float: left;
		width: 185px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding: 10px 10px 44px;
		background: #eeeeee;
		}

.headertop {
		float: left;
		margin-top: 10px;
		height: 30px;
		width: 185px;
		padding: 10px 10px 0px;
		color: #280cad;
		background: #ff9933;
		}	
			
.headerupper {
		float: left;
		margin-top: 10px;
		height: 60px;
		width: 185px;
		padding: 10px 10px 0px;
		color: #280cad;
		background: #ff9933;
		}	
		
.headerlower {
		float: left;
		margin-top: 0px;
		height: 30px;
		width: 185px;
		padding: 10px 10px 0px;
		color: #280cad;
		background: #ff9933;
		}
					
.headerbottom {
		float: left;
		margin-top: 0px; 
		height: 30px;
		width: 185px;
		padding: 10px 10px 0px;
		color: #280cad;
		background: #ff9933;
		}
		
.oneColumnPage #mainColumn {
		width: 676px;
		}
	
#mastheadHome {
		background: url(_images/wigwwd760leftcropnch200.jpg);
		height: 200px;
		margin-bottom: 10px;
		}
		
#mastheadNonhome {
		background: url(_images/wigwwd760leftcrop200.jpg);
		height: 200px;
		margin-bottom: 10px;
		}
					
.contents {
		padding-bottom: 10px;
		}
		
.separator {
		clear: both;
		}	
		
#hbox {
		margin-top: 30px;
		padding-bottom: 106px;
		}
		
#whiteBar { /* homePage */
  color: #FFF;
  background: #FFF;
  font: 8px verdana, arial, sans-serif; /* invisible text to create bar */
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0;  
}	

/*
/////////////////////////////////////////////////////////////////////////////	

	3 Footer
	
/////////////////////////////////////////////////////////////////////////////	
*/

#footernonHomepage {
		clear: both;
		background: #eeeeee;
		padding-top: 5px;
		padding-bottom: 1px;
		}	

#footernonHomepage p {
		font-size: 13px;
		line-height: 1.3em;
		text-align: center;
		}
		
#validationPara {
		text-align: center;
		padding-bottom: 10px;
		}
		
.valimg {
		display: inline;

		}


/*
/////////////////////////////////////////////////////////////////////////////	

	4 Navigation
	
/////////////////////////////////////////////////////////////////////////////	
*/
			
		
#navigation {
		background: #9c9c9c;
		font: bold 14px Verdana, Arial, sans-serif;		
		height: 29px;
		}

#navigation ul {
		padding: 0;
		margin: 0;
		list-style: none;
		}

#navigation li {
		display: inline;
		float: left;
		width: 139px;
		}

#navigation li ul {
		position: absolute;
		left: -999em;
		width: 139px;
		}
		
#navigation li:hover ul, #navigation li.sfhover ul  {
		left: auto;
		}
		
#navigation a {
		display: block;
		width: 139px;
		text-align: center;
		line-height: 29px;
		background: #9c9c9c;
		text-decoration: none;
		color: #ffffff;
		}
	
#navigation a:hover {
		background: #00F;
		color: #fff; 
		}
/*
/////////////////////////////////////////////////////////////////////////////	

	5 Fonts
	
/////////////////////////////////////////////////////////////////////////////	
*/

h1 { /* header for "WigWamWebsdesign" */
		font: bold 30px Arial, sans-serif;
		margin-top: 40px;		
		margin-bottom: 40px;
		text-align: center;
		color: #00F;
		}

h2 { /* header for all but home page & header for thickbox */
		font: bold 22px Arial, sans-serif;
		margin-top: 10px;
		margin-bottom: 5px;
		text-align: center;
		color: blue;
		}

h3 { /* header for bulleted paras on website page */
		font: 18px Arial, sans-serif;
		margin-top: 20px; 
		color: blue;
		}

h4 { /* header for twoColumnPage #extraColumn and subheader for thickbox */ 
		font: bold 13px Arial, sans-serif;
		margin-bottom: 5px;
		text-align: left;
		color: blue;
		}
		
h5	{ /* header for validation box on home page */
		font: bold 12px Arial, sans-serif;
		text-align: center;
		color: blue;
		}
		
h6 { /* headers for extraColumntop and extraColumnbottom on homePage */
		font: 12px Arial, sans-serif;
		line-height: 1.3em;
		margin-bottom: 1em;
		color: #0f0;
		}

p { /* standard para on all pages */
		font-size: 14px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}
		
#extraColumntop p { 	
		font-size: 12px;
		}	
		
#extraColumnupper ul, #extraColumnlower ul, #extraColumnbottom ul { 	
		font-size: 12px;
		line-height: 1.3em;
		margin-left: 0px;
		padding-left: 0px;
		margin-bottom: 1em;
		list-style-type: none;
		}

.headertop p, .headerupper p, .headerlower p, .headerbottom p{
		font-size: 12px;
		line-height: 1.3em;
		margin-bottom: 1em;
		text-align: center;
		}

.para1 { /* introductory para on homePage and contactPage */
		margin-top: 20px;
		font-size: 18px;
		text-align: center;
		line-height: 1.3em;
		margin-bottom: 1em;
		}
	
.para2 { /* indented para on websitesPage and photogalleyPage */
		font-size: 14px;
		padding-left: 40px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}
				
.para3 { /* indented subpara on photogalleryPage */
		padding-left: 30px;
		}
		
.para4 { /* indented para on websitesPage and photogalleyPage */
		clear: both;
		font-size: 14px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}

.para5 { /* Indent for buttons on Graphics Page*/
		clear: both;
		float: left;
		margin-top: 300px;
		margin-left: 50px;
		font-size: 14px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}		

.para6 { /* placement of name hypertext links on Customer Page*/
		font-size: 14px;
		line-height: 1.3em;
		text-align: center;
		margin-bottom: 1em;
		}


.para7 { /* Hypertext line to reveal Big Picture on Graphics Page */
		clear: both;
		margin-left: 20px;
		margin-top: 1.3em;
		margin-bottom: 1.5em;
		}
		
#para8 {
		font-size: 14px;
		line-height: 1.3em;
		text-align: center;
		color: #EF5940;
		}
		
		
/*
/////////////////////////////////////////////////////////////////////////////	

	6 Page and Footer Identifiers
	
/////////////////////////////////////////////////////////////////////////////	
*/

.homePage #home, .homePage #homeFooter, .websitesPage #websites, .websitesPage #websitesFooter { 
		background: #fcd753;
		color: #280cad; 
		}
	
.photogalleriesPage #photogalleries, .photogalleriesPage #photogalleriesFooter, .customersPage #customers, .customersPage #customersFooter {
		background: #fcd753;
		color: #280cad; 
		}

.contactPage #contact, .contactPage #contactFooter, .graphicsPage #graphics, .standardgPage #standard, .hoverboxgPage #hoverbox {
		background: #fcd753;
		color: #280cad; 
		}

/*
/////////////////////////////////////////////////////////////////////////////	

	7 Home Page
	
/////////////////////////////////////////////////////////////////////////////	
*/

.twoColumnPage #mainColumn ul { /*bulleted list on home page */
		font-size: 14px;
		padding-left: 10px;
		line-height: 1.4em;
		margin-bottom: 1em;
		}

.twoColumnPage #mainColumnwide ul { /*bulleted list on home page */
		font-size: 14px;
		padding-left: 10px;
		line-height: 1.4em;
		margin-bottom: 1em;
		}		
		


/*
/////////////////////////////////////////////////////////////////////////////	

	8 Content Page
	
/////////////////////////////////////////////////////////////////////////////	
*/


.oneColumnPage #mainColumn ul { /*bulleted list on content page */
		font-size: 14px;
		padding: 0px 30px;
		line-height: 1.5em;
		margin-bottom: 1em;
		}	

/*
/////////////////////////////////////////////////////////////////////////////	

	9 Layout Page
	
/////////////////////////////////////////////////////////////////////////////	
*/


#wrapperwebpages {
		margin-left: 50px;
		}
				
#wrappertextboxes {
		width: 540px;
		margin: auto;
		}
	
#boxtextleft {/* left text box for layout page */
		float: left;
		margin-right: 115px;  	
		width: 190px;
		height: 170px;
		padding: 10px;
		font-family: Arial, sans-serif;
		font-size: 14px;
		line-height: 1.3em;
		color: #000000;
		background-color: #FFFFFF;
		text-align: left;
		border: 1px solid black;
		}
	
#boxtextright {/* right text box for layout page */
		float: left;
		width: 190px; 
		height: 170px; 
		padding: 10px; 
		font-family: "Times New Roman", serif; 
		font-size: 17px;
		line-height: 1.3em;
		color: yellow; 
		background-color: #000099; 
		text-align: left; 
		border: 1px solid black; 
		}

#wrapperboxwatermarks { /* box to hold table for watermark etc */
		text-align: center;		
		}

/*
/////////////////////////////////////////////////////////////////////////////	

	10 Navigation Page
	
/////////////////////////////////////////////////////////////////////////////	
*/

.blacktext { /* indicators to linked pages via graphics */
		color: #000000;
		font-weight: bold;
		}
	
#navpagebuttons {/* this is the group of 3 assorted buttons */
		list-style-type: none;
		text-align: center;
		padding: 0px;
		margin: 26px;
		}
	
#navpagebuttons li {
		display: inline;
		}
	
#navpagebuttons img {
		border: solid black 1px;
		}
	
#capsule {/* glass capsule button */
		float: left;
		margin-left: 254px;
		}
	
#hut {
		float: left;
		margin-left: 50px;
		margin-right: 20px;
		border: solid 1px #0000FF;
		}
	
#texthut {
		float: left;
		margin-top: 6px;
		width: 450px;
		font-size: 14px;
		line-height: 1.3em;
		}
	
#beach {
		float: right;
		margin-top: 30px;
		margin-right: 50px;
		margin-left: 20px;
		border: solid 1px #0000FF;
		}
	
#textbeach {
		float: right;
		margin-top: 36px;
		width: 280px;
		font-size: 14px;
		line-height: 1.3em;
		}

/*
/////////////////////////////////////////////////////////////////////////////	

	11 Graphics Page

/////////////////////////////////////////////////////////////////////////////	
*/

#popupwrapper {
		margin: 0px;
		padding: 0px;
		width: 640px;
		height: 500px;
		background-color: #FFFFFF;
		}
	
#popupimage {/* formatting for popup window image */
		margin-top: 0px;
		text-align: left;
		}
	
#popuptext {/* formatting for popup window text */
		text-align: left;
		font: 16px Arial, sans-serif;
		color: #0000FF;
		margin-top: 20px;
		margin-left: 30px;
		}
	
.TBridge {
		float: left;
		margin-right: 20px;
		border: 1px solid #0000FF;
		}
	
#textTB {
		margin-top: 120px;
		font-size: 14px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}
		
.eye {
		text-align: center;		
		}

.eyeborder {
		border: solid 1px #0000FF;
		}
			
#picsLeft {
		float: left;
		margin-top:50px;
		margin-left: 30px;
		} 
		
.thumbnails {
		margin: 10px;
		border: 1px solid #0000FF;
		}

#picRight {
		float: left;
		margin-top: 10px;
		margin-left: 40px;
		}
		
#mouseoverText {
		text-align: center;
		font-size: 14px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}


#buttonLeft {
		clear: both;
		float: left;
		margin-left: 40px;
		}
		
#buttonRight {
		float: right;
		margin-right: 40px;
		}

/*
/////////////////////////////////////////////////////////////////////////////	
	
	12 Feedback Page
	
/////////////////////////////////////////////////////////////////////////////	
*/

#mail {
		text-align: center;
		font-size: 18px;
		margin: 50px 0px;
		color: #0000FF;
		text-decoration: underline;
		}
		
form p {
		clear: both;
		font-size: 14px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}
	
form p label {
		float: left;
		}
	
form p input, form p textarea {
		float: right;
		margin-bottom: 20px;
		}
		
/*
/////////////////////////////////////////////////////////////////////////////	

	13 Contact Page
	
/////////////////////////////////////////////////////////////////////////////	
*/

#mailwww {
		text-align: center;
		font-size: 18px;
		}

#ourpnumber {	
		margin-top: 50px;
		margin-bottom: 50px;
		text-align: center;
		font-size: 18px;
		}
		
/*
/////////////////////////////////////////////////////////////////////////////	

	PROCLEAN
	
/////////////////////////////////////////////////////////////////////////////	
*/		
		
#wrapperfooter { /* ProClean & SceneScape */
		width: 699px;
		margin: 0 auto;
		background: #ffffff;
		padding: 10px;
		}
		
#mastheadProClean { /* see Fonts/ProClean for text formatting etc */
		background: url(_images/procleanlogo2.jpg) no-repeat;
		height: 130px;
		margin-bottom: 10px;
		background-color: blue;
		}
		
.ProClean { /* masthead text for ProClean */
		padding-top: 40px;
		padding-right: 100px;
		text-align: right;
		font: bold 36px Verdana, sans-serif;
		color: white;
		}
		
#mainColumnwide, #rightColumntop, #rightColumnmiddle, #rightColumnbottom { /* ProClean */
		float: left;
		padding: 10px;
		margin-top: 10px; /* addition */
		background: #eeeeee;
		}

#footerproclean { /* ProClean */
		float: left;
		padding: 10px;
		margin-top: 10px; /* addition */
		background: #eeeeee;
		}
		
.twoColumnPage #mainColumnwide { /* ProClean */
		width: 540px;
		margin-right: 10px;
		}
	
.twoColumnPage #rightColumntop { /* ProClean */
		width: 105px;
		}		
		
.twoColumnPage #rightColumnmiddle { /* ProClean */
		width: 105px;
		}		
		
.twoColumnPage #ightColumnbottom { /* ProClean */
		width: 105px;
		}

#footerpc { /* ProClean */
		clear: both;
		padding: 5px 0px;
		background: #eeeeee;
		border: solid red 1px;
		}				

#footerpc p { /* ProClean */
		font-size: 15px;
		line-height: 1.3em;
		margin-bottom: 1em;
		padding: 0 10px;
		text-align: center;
		}
				
/*
/////////////////////////////////////////////////////////////////////////////	

	THE SEAMLESS GUTTER COMPANY
	
/////////////////////////////////////////////////////////////////////////////	
*/

#mastheadSGC {
		float: left;
		margin-left: 5px;
		height: 86px;
		width: 670px;
		background: url('_images/SGClogo.jpg') no-repeat;	
		}
		
.SGCtextDark {
		font: 30px bold Arial, sans-serif;
		color: #2192a2;
		text-align: center;
		margin-bottom: 10px;
		}

.SGCtextDark2 {
		font: bold 18px Arial, sans-serif;
		color: #2192a2;
		}

#textgutterSGC {
		float: left;
		margin-left: 20px;
		margin-top: 70px;
		font-size: 14px;
		width: 400px;
		line-height: 1.3em;
		margin-bottom: 1em;
		}

.GutterSGC {
		clear: both;
		float: right;
		margin-top: 20px;
		margin-right: 20px;
		border: 1px solid #0000FF;
		}
		
.wrapperSGCboxes {
		clear: both;
		height: 200px;
		margin: 20px auto;
		font:  16px/1.3em Arial, sans-serif;
		}	
.boxSGCleft ul {	
		list-style-image: url('_images/SGCbullets20.jpg');
		}		

.boxSGCleft li {	
		margin: 10px 0px;
		}
	
.boxSGCleft {
		float: left;
		margin-left: 20px;
		padding-left: 20px;
		margin-bottom: 30px;
		width: 250px;
		}
		
.boxSGCright ul {	
		list-style-image: url('_images/SGCbullets20.jpg');
		}		

.boxSGCright li {	
		margin: 10px 0px;
		}

.boxSGCright {
		float: left;
		margin-left: 100px;
		padding-left: 20px;
		margin-bottom: 30px;
		width: 250px;
		}
		
.SGCbground {
		float: left;
		margin-left: 5px;
		margin-bottom: 10px;
		padding: 10px 0px;
		height: 60px;
		width: 670px;		
		font: bold 28px Arial, sans-serif;
		text-align: center;
		background-color: #aed8e1;
		}

.wrapperfootertextSGC {
		clear: both;
		width: 675px;
		margin: 0px auto;
		background: #eeeeee;
		padding: 10px;
		border: solid red 2px;
		}
				
/*
/////////////////////////////////////////////////////////////////////////////	

	FIRTHS
	
/////////////////////////////////////////////////////////////////////////////	
*/

#Firthwrapper {
		width: 699px;
		margin: 0 auto;
		background: #ffffff;
		padding: 10px;
		border: 1px solid blue;
		}
		
#Firthmasthead { /* background image and color */
		background: url('_images/FirthsCraigBG.jpg') no-repeat;
		height: 130px;
		margin-bottom: 10px
		}
		
#Firthmasthead p { /* masthead text */
		padding-top: 50px;
		padding-right: 50px;
		text-align: right;
		font: bold 26px Arial, sans-serif;
		color: white;
		}

#Firthcontents {
		clear: both;
		padding-top: 15px;
		font: 1.3em/1em Arial, sans-serif;
		}
        			
#Firthcontents h1 {
		font: 26px Arial, sans-serif;
		text-align: center;
		color: blue;
		padding-bottom: 30px; /* mirrors padding-top */
		}

#Firthlist ul {	
		list-style: disc inside;
		margin-left: 50px;
		}	
			
#Firthlist li {
		margin: 10px 40px;
		}			

#Firthpic {
		float: left;
		margin-top: 30px;
		margin-left: 10px;
		width: 90px;	
		}
		
#Firthtxt {
		float: left;
		margin-top: 36px;
		margin-left: 10px;
		margin-bottom: 20px;
		}

#Firthtxt p{
		margin-left: 10px;
		font: italic 18px Arial, sans-serif;
		color: #722100;
		}

#Firthtxt .p1 {
		margin-left: 30px;
		font: italic 18px Arial, sans-serif;
		color: blue;
		}

#Firthwrapperfooter {
		clear: both; 
		width: 680px;
		margin: 20px auto;
		background: #eeeeee;
		padding: 10px;
		border: solid 2px #722100;
		}
	
#Firthfooter p {
		font: 14px Arial, sans-serif;
		padding: 10px 10px;
		text-align: left;
		}

#Firthfooter .p2 {
		font: 14px Arial, sans-serif;
		margin-left: 60px;
		text-align: left;
		}

#Firthfooter .pbold  {
		font: bold 14px Arial, sans-serif;
		padding: 10px 10px;
		text-align: center;
		}