.different {font-size:25px; color:red;}
.another {font-size:25px; color:blue;}
.floatl {float:left;}

body, input, select { font:normal normal 12px verdana, arial, sans-serif; }

	header, nav, article, footer, address, section { display: block;}
	
	h1, h2 { margin:0px; font-size:1.5em;}
	h2 {font-size:1em;}
	
	#clear, #callus {clear:both;}
	#callus {height:50px;line-height:50px;width:100%; } 
	#callus a {color:white;}	

	 p {font-size:12px;text-align:justify;}
@media print 
{
    .noPrint 
    {
        display:none;
    }
	.width1 
	{
	width:63%;border-right:0;
	}
}




















@media screen  and (orientation:portrait) and (max-device-width: 430px) {

html,body {margin:-10px 0px 0px 0px;height:100%;}
	#container {}
		#topbar {display:none;}
		#topbarspace {display:none;}
		#topmenubar {float:left;width:80%;height:6vh;color:brown;text-align:left;margin-left:4%;background:;}
		#phoneimg {float:right;width:13%;background:;display:inline;margin-top:10px;margin-right:2%;}
			#phnum {display:none;}
		#mainmenu {display:none;}
		#menubar {float:left;width:80%;height:10vh;font-size:297%; font-weight:bold;text-align:left;margin-left:4%;background:;}
			#submenubar {display:none;}
		#topspacer {width:100%;height:1vh;clear:both;}

		#gutteringbar {height:37vh;background:brown;padding-top:4vh;}

			#gutteringbar img {    display: block;    margin:0 auto;}
				#gutimg1 {}
				#gutimg2 {display:none;}
			#gtop1{height:5vh;width:100%;text-align:center;color:#fff;font-size:180%;font-weight:bold;padding:3vh 0;} 

			#gtop2{height:7vh;width:33%;margin:0 auto;text-align:center;font-size:125%;border:1px solid #eb8540;} 
				#gtop2 a {color:#eb8540;text-decoration:none;}

			#gtop3 {display:none;}
			

		#roofingbar {height:37vh;background:#eb8540;padding-top:4vh;}

			#roofingbar img {    display: block;    margin:0 auto; }
				#roofimg1 {}
				#roofimg2 {display:none;}

			#rtop1{height:5vh;width:100%;text-align:center;color:#fff;font-size:180%;font-weight:bold;padding:3vh 0;} 

			#rtop2{height:7vh;width:33%;margin:0 auto;text-align:center;font-size:125%;border:1px solid brown;} 
				#rtop2 a {color:brown;text-decoration:none;}

			#rtop3 {display:none;}			

		#btmmenubar {display:none;}
}











@media screen  and (orientation:landscape) and (max-device-width: 850px) {

html,body {margin:-10px 0px 0px 0px;height:100%;}
	#container {}
		#topbar {display:none;}
		#topbarspace {display:none;}
		#topmenubar {float:left;width:60%;height:6vh;color:brown;text-align:left;margin-left:4%;background:;}
		#phoneimg {float:right;width:27%;color:brown;background:;display:inline;margin-top:3vh;margin-right:2%;}
			#phnum {display:inline;float:left;padding-top:4vh;}
			#phoneimg span {float:right;}
		#mainmenu {display:none;}
		#menubar {float:left;height:18vh;width:60%;font-size:297%; font-weight:bold;text-align:left;margin-left:4%;background:;}
			#submenubar {display:none;}
		#topspacer {width:100%;height:1vh;clear:both;}


		#gutteringbar {height:82vh;background:brown;padding-top:4vh;width:50%;float:left;}

			#gutteringbar img {    display: block;    margin:0 auto;}
				#gutimg1 {}
				#gutimg2 {display:none;}
			#gtop1{height:5vh;width:100%;text-align:center;color:#fff;font-size:180%;font-weight:bold;padding:3vh 0;} 

			#gtop2{height:15vh;width:33%;margin:0 auto;text-align:center;font-size:125%;border:1px solid #eb8540;margin-top:2vh;} 
				#gtop2 a {color:#eb8540;text-decoration:none;}

			#gtop3 {display:none;}
			

		#roofingbar {height:82vh;background:#eb8540;padding-top:4vh;width:50%;float:left;}

			#roofingbar img {    display: block;    margin:0 auto; }
				#roofimg1 {}
				#roofimg2 {display:none;}


			#rtop1{height:5vh;width:100%;text-align:center;color:#fff;font-size:180%;font-weight:bold;padding:3vh 0;} 

			#rtop2{height:15vh;width:33%;margin:0 auto;text-align:center;font-size:125%;border:1px solid brown;margin-top:2vh;} 
				#rtop2 a {color:brown;text-decoration:none;}

			#rtop3 {display:none;}
			

		#btmmenubar {display:none;}
	
} 




@media screen  and (orientation:landscape) and (min-device-width: 851px) {

html,body {margin:-15px 0px 0px 0px;}
	#container {}

		#topbar {width:100%;background:black;height:32px;}

			#topbar div {float:right;height:32px;}			
			#topbar div:hover {background:white;}

			#topbar a {display:inline-block;background:;line-height:32px;text-decoration:none;color:white;}
			#topbar a:hover {color:black;}
			
			
		#topbarspace {width:100%;height:1px;background:black;}
		#topmenubar {display:none;}
		#phoneimg {float:right;width:15%;color:brown;background:;display:inline;margin-top:1%;margin-right:2%;}
			#phnum {display:inline;float:right;padding-top:5px;background:;}
			#phoneimg span {float:left;}		
		#menubar {float:left;height:10%;width:26%;font-size:297%; font-weight:bold;text-align:left;margin-left:4%;margin-top:2px;background:;}
			#submenubar  {font-size:10px;margin:3px 0;color:brown;}

		#mainmenu {float:left;width:48%;background:;height:32px;margin-top:18px;font-size:14px;}

			#mainmenu div {float:right;height:32px;}
			#mainmenu div:hover {background:brown;}

			#mainmenu a {display:inline-block;background:;line-height:32px;text-decoration:none;color:brown;}
			#mainmenu a:hover {color:#eb8540;}

		#topspacer {width:100%;height:2px;clear:both;background:;}

		#gutteringbar {height:370px;background:brown;padding-top:4%;width:50%;float:left;font-size:120%;}

			#gutteringbar img {    display: block;    margin:0 auto;}
				#gutimg1 {display:none;}
				#gutimg2 {}

			#gtop1{height:5%;width:100%;text-align:center;color:#fff;font-size:230%;font-weight:bold;padding:3% 0;} 

			#gtop2  {display:none;}



			#gtop3 {text-align:center;width:400px;background:;height:44px;margin:0 auto;background:;padding-top:3%;font-size:100%;}

				#gtop3 div {float:left;width:130px;height:44px; border:1px solid #eb8540;}
				#gtop3 div:hover {background:#eb8540;}

				#gtop3 a {display:inline-block;background:;line-height:44px;text-decoration:none;color:#eb8540;}
				#gtop3 a:hover {color:brown;}



		#roofingbar {height:370px;background:#eb8540;padding-top:4%;width:50%;float:left;font-size:120%;}

			#roofingbar img {    display: block;    margin:0 auto; }
				#roofimg1 {display:none;}
				#roofimg2 {}

			#rtop1{height:5%;width:100%;text-align:center;color:#fff;font-size:230%;font-weight:bold;padding:3% 0;} 
			#rtop2  {display:none;}



			#rtop3 {text-align:center;width:400px;background:;height:44px;margin:0 auto;background:;padding-top:3%;font-size:100%;}

				#rtop3 div {float:left;width:130px;height:44px; border:1px solid brown;}
				#rtop3 div:hover {background:brown;}

				#rtop3 a {display:inline-block;background:;line-height:44px;text-decoration:none;color:brown;}
				#rtop3 a:hover {color:#eb8540;}



				

		#btmmenubar {width:100%; height:15%;}
	
} 






































/* Universal page components first - Masthead / Menubar / Footer, followed by individual pages */
	/* for all page - MUST NOT have a height */

	 
	
	#404cont {height:180px;} /* the error404 page */
	#logoncont {height:180px;} /* the error404 page */

	/* Masthead (within masttop.php) */ 

	#masthead {width:90%;background:yellow;height:90%;} 

		#mhleft {background:cyan; float:left;width:290px;height:290px;padding:47px 0 0 0;}


												#mhleft  div { width:290px;margin:10px 0 0 0;background:; color:brown;}
												#mhleft span {font-size:28px; font-weight:bold;}
												#menul {width:190px; background:;height:198px;}
												#mhmid {float:left;width:310px;height:350px;background:; }
		
		#mhright {float:left;  width:180px;height:150px;background:teal;margin-left:15px;}

												#mhright div {color: brown;}


													#calld1 {float:left;width:120px; height:135px;}
													#calld2 {float:left;width:170px; height:100px; font-weight:bold; margin-top:45px; font-size:16px;}
												#calld3 {font-size:18px;}
		#mastbtm1 {float:left;width:70%;height:107px;background:brown;margin-top:4px;}
		#mastbtm2 {float:left;width:55%;height:84px;background:#eb8540;}























	
/* inside of masthead, at the bottom, Menubar (within menubar.php) */
	ul#navmenu {margin: 0; font-size: 14px;}
	ul.drop a { display:block; color: #fff; font-family: Verdana;  text-decoration: none; width:155px;}
	ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: brown; color: #fff; width:155px;}
	ul.drop { position: relative; z-index: 597; float: left; }
	ul.drop li { float: left; line-height: 1.9em; vertical-align: middle; zoom: 1; padding: 0 1px; } 
	ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #d3d3d3; }
	ul.drop ul { visibility:hidden; position: absolute; top: 100%; left: 30px; z-index: 598;  width: 155px; background: brown; border: 1px solid #fff; }
	ul.drop ul li { float: none; }
	ul.drop ul ul { top: -2px; left: 100%; }
	ul.drop li:hover > ul { visibility: visible } 	
	
/* Footer (within footA.php) */
	
	footer { clear:both; background-color:brown; width:100%;height:225px; text-align:left; color:white;padding-top:15px;}
	footer div {float:left; height:245px;width:180px; background:;}
	footer h2 {font-size:14px; margin-left:35px;}
	footer li {font-size:12px; height:18px;}
	footer a {font-size:12px;  text-decoration:none; color:white;}
	#footdiv1 {width:155px;}
	#footdiv2 {width:170px;}
	#footdiv3 {width:150px;}
	#footdiv4 {width: 120px;}
	#footdiv5 {width:90px;}
		#footdiv6  { width:145px; } 

	#footdiv6  div {margin: 13px 0 0 25px;}
	#footdiv6 a {text-decoration:underline;}

	/* Home Page  (within index.php) shortened to gf*/	
	#gfcont 	{width:900px; height:830px; background:; }
	
	#products h2 {float:left;width:120px;}
	#products span {display:block;float:left;padding-left:70px;width:90px;background:;}
	#products form {display:block;float:left;}
	#products button {border:0;padding:0;height:16px;border-bottom:1px solid blue;}
	#gfcont p {line-height:20px;}
	#gfrange {clear:both;background:ed;width:900px;height:230px;}
	#gfrange  div, #gfrange2 div{float:left;height:120px; width:280px; margin:15px 29px 0 0;}
	#gfm1 {height:61px;width:900px;background:brown url(http://localhost/pg_gordon/missioncnr.gif) no-repeat;}
	#gfmission {clear:both; width:830px;height:60px; color:white; padding:1px 35px 0 35px;text-align:justify;  }
	#gfrange2  {clear:both; background:ed;width:735px;height:250px;margin-left:165px;}
	
	/* Video Page  (within video.php) shortened to vid*/	
	#vidcont 	{width:900px; height:480px; background:; }
	
/* The 3 Products : Guttering (system.php) shortened to sys, Leafguard shortened to lg (leafguard.php) & mini mi (mini.php) */	
	#syscont,#lgcont,#minicont {float:left;width:900px; height:570px; background:;}
	#lgcont{height:640px;}
	#syscont {height:680px;}
	#syscont1,#lgcont1,#minicont1 {float:left; margin: 13px 0 10px 0; width:450px; height:105px; color:;}
	#syscont2,#lgcont2,#minicont2 {float:left; width:137px; height:105px;}
	#syscont3,#lgcont3,#minicont3 {float:left; width:300px; height:105px;font-size:12px; margin-top:1px; font-weight:bold;}
	#syscont4,#lgcont4,#minicont4 {text-align:justify; font-size:10px; font-weight:normal;margin-top:1px;line-height:14px;}
	
	#contls {float:left;width:280px;height:210px;}
	 #contls h3 {padding:0;margin:0;padding-top:7px;}
	#contrs {float:left;width:620px;height:210px;}
    	#contrs div {float:left;width:285px;margin:15px 0 0 25px;text-align:justify;line-height:18px;}
	 
	 
	#lfrs {float:left;width:620px;height:290px;}
		#lfrs div {float:left;width:285px;margin:15px 0 0 25px;text-align:justify;line-height:18px;}
	
	#minils {float:left;width:280px;height:220px;}
	 #minils h3 {padding:0;margin:0;padding-top:7px;}
	#minirs {float:left;width:620px;height:220px;}
		#minirs div {float:left;width:285px;margin:15px 0 0 25px;text-align:justify;line-height:18px;}
	
	
	
/* FAQ's, (faq.php) shortened to faq, Testimonials, (testimonial.php) shortened to te  */	
	#faqcont,#tecont,#qucont {float:left;width:900px;}
	
	  #grpleft{float:left; width:410px;margin-right:40px; }
	  #grpright{float:right; width:410px; }
		#grpleft h2,#grpright h2 {}
		#grpleft p,#grpright p {text-align:justify;line-height:18px;}
		#contact {clear:both; width:900px;}

		
		/* gallery gal gallery.php, choose us cho choose.php, contact us con contact.php */	
	#galcont,#chocont,#concont {float:left;width:900px;}
	#galcont {height:325px; background:white; color:brown;}
	#lhsideA {  float:left; width:910px; height:260px; background:;}
	#lhsideA h1 {float:left;}
	#lhsideA span { display:block;margin-top:5px;}
	
	#lhsideA button {border:0; background:white;  margin:10px 10px 10px 0;}
	
	
/* contact con contact.php */	
	#concont {height:270px;}
	#nonemail { width:380px;height:200px;float:left; }
	#nonemail div { float:left;line-height:28px;height:140px;}
	#ne1 {width: 55px;}
	#ne2 {width: 310px;}
	.econtact {float:left; width:480px; height: 200px;}
	

	
/* Suburbs List (suburbs.php) sub suburb */
	
	#abcA { clear:both; width:97%;height:480px; text-align:left;background:brown;color:white; padding-left:3%;}


		#abcB {background:;width:100%;height:312px;}


			#abcB h2,#abcR h2 {font-size:14px; margin-left:35px;}
			#abcB li ,#abcR li{font-size:12px; height:18px;}
			#abcB a,#abcR a {font-size:12px;  text-decoration:none;color:#fff; }




			#abcB div,#abcR {float:left; width:180px; height:265px;background:;}





			#abcR {height:35px;background:;}
	/* Actual Suburbs asub(Strathfield.php,...)	*/	

	#asubls {float:left;width:280px;height:220px;background:;}
	 #asubls h3 {padding:0;margin:0;padding-top:7px;}
	#asubrs {float:left;width:620px;height:220px;}
		#asubrs div {float:left;width:285px;margin:15px 0 0 25px;text-align:justify;line-height:18px;}
			
	#asubcont {float:left;}
	#asubcont { clear:both; width:100%;height:500px; text-align:left;background:; }
	#contl {float:left;width:280px;height:190px;}
	 #contl h3 {padding:0;margin:0;line-height:28px;}
	#contr {float:left;width:620px;height:190px;background:;}
	#asubcont h2 {font-size:14px; margin-left:35px;}
	#asubcont li {font-size:12px; height:18px;}
	#asubcont a {font-size:12px;  text-decoration:non; }
	#asubdiv1,#asubdiv2 {float:left; width:270px; height:1020px;}
	
	
	#subccont1 {float:left; width:450px; height:105px;}
		#subccont2 {float:left; width:137px; height:105px;}
		#subccont3 {float:left; width:300px; height:105px;font-size:12px; margin-top:1px; font-weight:bold;}
		#subccont4 {text-align:justify; font-size:10px; font-weight:normal;margin-top:1px;line-height:14px;}
	
	
	#bottom {clear:both;width:900px; height:220px; background:}
	#left {float:left;width:500px;height:220px;background:}
	#right {float:right;width:400px; height:220px;background:}
	#map-canvas {width:399px;height:219px;}
	
	/* the 7 problem pages rusting-gutters.php,...)	*/	
	.problem  {float:left; clear:both; width:900px; }
	#fecont {height:250px;}
	#gmcont {height:230px;}
	#ifcont {height:210px;}
	#lpcont {height:250px;}
	#ligcont {height:230px;}
	#ogcont {height:240px;}
	#rgcont {height:210px;}
	
	/* the 3 disclosure pages privacy.php,...)	*/	
	.privacy  {float:left; clear:both; width:900px; }
	#tccont {height:210px;}
	#pcont {height:210px;}
	#wcont {height:210px;}	
	
		
/* Email us to make a booking email(ebooking.php,...)	*/		
	#emailcont {margin-left:35px;height:435px;color:brown;}
	#emailer div {height:40px; width:600px; background:;}
		#emailer span {display:block;float:left; width:210px;padding-top:3px;}
		#emailer input {width:300px;}
		#work {height:70px;}
	#emailcont .btn { width:90px; height: 26px; }
	
		
/* db_salesReport.php */
#sRPage { margin-left:10px;width:100%; min-height:70px; padding-left:5px;font-family:verdana; font-size:10px; }
	#sRHead1 {width:100%; height:30px; background:; border-top:1px solid black; border-bottom:1px solid black;}
	#sRHead2 {float:left; height:30px; text-align:center; border-right:1px solid black; line-height:27px;}
#sRHolder {width:100%; height:30px; background:; border-bottom:1px solid black;}
	#sREntry {float:left; height:30px; text-align:Left; overflow:hidden; border-right:1px solid black; line-height:25px;}
	#sREntryB { float:left; width:12%; height:30px; text-align:center;line-height:30px;}	
	
	
	.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=75);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.75;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.75;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.75;
}
	.opaque {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=99);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.99;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.99;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.99;
}