/* ==========================================================
	Stylesheet for Alte-Rego Corporation Website
	Filename: layout.css
	Formating html pages: index, custom , markets, privacy, products, profile, service
	Formating php pages: contact, mail
	Date: July 2010
	Author: Ulrike Terragnolo
	
	Last-update: 31. March 2011
	
	Content: 
	1. General Styles
	2. Main Layout
	3. Navigation 
	4. Button
	5. Second Navi
	6. Form for calculation and contact
	7. Pages in order of appearance 
	========================================================== */

 
/* =================================
		1. General Styles	 
	================================ */
	
 *	{ padding: 0; margin: 0; }	
 
a	{
		text-decoration: none;
		outline: none;
		color: #999999;
	} 


h1	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 20px;
		margin-bottom: 15px;
	} 


h2{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin-bottom: 10px;
	color: #666;
	} 

h3{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
		margin-bottom: 10px;
	} 

 

/* =================================
			2. Main Layout  
	================================ */


body	{
		background-image: url(../img/bkgd-body.gif);
		background-repeat: repeat;
		color: #666666;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		}
		
#wrapper 	{
		
		background-image: url(../img/wrapper-bkgd-cyn.jpg);
		background-repeat: no-repeat;
		margin: auto;	
		overflow: auto;
		width: 955px;
			}		
			
 #navi	{
 		background-image: url(../img/v-border-y.jpg);
		background-position: right;
		background-repeat: repeat-y; 
		height: 70px;
 		margin-top: 20px;
		width: 98%;
		}	
		
	/* navigation graphic - top right corner */	
	#bordertop	{
		float: right;
		}			
		

#main	{
		background-image: url(../img/v-border-y.jpg);
		background-position: right;
		background-repeat: repeat-y; 
		float: left;
 		min-height: 481px;
		width: 98%;
		}


#text	{
		float: right;
		min-height: 461px;
		width: 59%;
		padding-right: 7px;
		overflow: hidden;
		}	
		
  
#sidebar{
		float: left;
		padding-top: 10px;
		width:  37%;
		}			
		
#empty {		
		background-image: url(../img/drop-menu.jpg);
		background-repeat: repeat-x;
		background-position: top;
		border-left: #66CCFF 1px dotted;
		border-right: #66CCFF 1px dotted;
 		float: left;
		margin-top: 495px;
		padding-top: 25px;
		padding-left: 10px; 
		padding-right: 10px;
		width: 37%;
		} 			
			 
			 
 
			 
#secondnavi {
		background-image: url(../img/bkgd10.png);
		background-repeat: repeat; 
		border-left: #66CCFF 1px dotted;
		clear: both;
		overflow: hidden; 
		padding-top: 15px;	
		padding-right: 5px;
		padding-bottom: 8px;	 
		width:99%;
		}					

		
#border-x	{
		background-image: url(../img/v-border-x.jpg);
		background-repeat:repeat-x;
		clear: both;
		float:left;
		height: 9px; 
		width: 98%;
		}	
		
	/* border graphic - left & right bottom corner  */	
	#border-corner-r	{
		float: right;
		}
					
	#border-corner-l	{
		float: left;
		}					
 
			
#footer	{
		color: #999999;
		float:left; 
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		height:20px;
		width: 98%;
		}
		
	#footer a {
	color: #999999;
	font-size: 9px;
		}
		
	#footer a:link, a:visited {
		color: #999999;
		text-decoration: none;	
		}	
		
	#footer a:hover, a:active {		 
		color: #0099FF;
		}

	 

/*  ==========================================
		3. Navigation 
	==========================================  */ 
	
	
#navi ul	{
		float:right;
        margin: 0;
        padding: 0;
		}

		
#navi li	{
		color: #666666;
		border-left: 1px dotted #666666;
		display: inline;
        float: left;
		font-size: 13px;
		font-weight: bold;
        height: 15px;
		list-style-type: none;
		padding: 3px 10px 3px 10px;
		position: relative;
		text-align: left;
		}		



#navi li a	{
		color: #666666;
        font-family: Verdana, Arial, Helvetica, sans-serif;
      	font-size: 13px;
		font-weight: bold;
		}


#navi  li div,
#navi  li ul,
#navi  li li 	{
        width: 160px;
		}

#navi  li div	{
		left: 0;
		display: none;
        position: absolute;
        top: 21px;
		}

#navi  li ul	{
       	background-color: #333333; 
	   	color: #CCCCCC;
	   	display: table; 
       	padding-bottom: 12px;
		}
			
#navi  li li 	{
		color: #CCCCCC;
		border-left: none;
        display: block;
		height: 22px;
        padding: 0;
		}		

#navi  li li a	{
        display: block;
        font-size:10px;
        padding-left: 10px;
		padding-top: 10px;
		padding-bottom: 3px;
		}


		
#navi a:link, 
#navi a:visited {
		color: #666666;		
		text-decoration: none;	
		} 

		
#navi a:hover	{
		color: #CCCCCC;
        text-decoration: none;
		}


 
#navi a:active  {
		color: #999999;
		}

#navi li:hover div,  
#navi li.over div 	{
        display: block;
		}

#navi li:hover, 
#navi li.over,
#navi li.active 	{
        background-color: #333333;
		color: #CCCCCC;
		}		 
		

	/*	class for specific hyperlinks in drop menu  */
.dropmenu #n-profile a,
.dropmenu #n-product a,
.dropmenu #n-service a	 {
		color: #CCCCCC;
		}
	
.dropmenu #n-profile a:hover, 	
.dropmenu #n-product a:hover,
.dropmenu #n-service a:hover {
		border-bottom: #FFFFFF 1px dotted;
		color: #FFFFFF;
		}	
	
.dropmenu #n-profile a:active,
.dropmenu #n-product a:active,
.dropmenu #n-service a:active	 {
		color: #CCCCCC;
		}		

.dropmenu #shop {
 		color: #CCCCCC;
	    font-size:10px;
		padding-top: 10px; 
		}
#arrows	{
		margin-top: 4px;
		}


/* =================================
			4. BUTTONS	
	================================ */ 

a.d:link, a.d:visited, a.d:hover, a.d:active {
 		font-family: Verdana, Arial, Helvetica, sans-serif;
 		font-size: 11px;
 		font-weight:bold;
		padding: 8px;
 		text-align:center;
 		text-decoration: none;
		}

 
a.d:link, a.d:visited	{
  		background-image: url(../img/b-white.png);
		background-repeat: no-repeat;
   		color: #666666;
		}


a.d:hover, a.d:active	{
 		background-image: url(../img/b-cyan.png);
		background-repeat: no-repeat;
 		color: #FFFFFF;
		}	
	
 
		
a.d  img	{  
		border: none;
		height: 14px;
		vertical-align: bottom;
		width: 14px;
		}	
/*  
		
	 	for download button  */ 
		
a.f:link, a.f:visited, a.f:hover, a.f:active {
 		font-family: Verdana, Arial, Helvetica, sans-serif;
 		font-size: 11px;
 		font-weight:bold;
		padding-bottom: 10px;
		padding-top: 10px;
		padding-right: 10px;
		padding-left: 10px;
 		text-align:center;
 		text-decoration: none;
		}

 
a.f:link, a.f:visited	{
  		background-image: url(../img/b-whitelg.png);
		background-repeat: no-repeat;
 		color: #666666;
		 
		}


a.f:hover, a.f:active	{
 		background-image: url(../img/b-cyanlg.png);
		background-repeat: no-repeat;
 		color: #FFFFFF;
		}	
	

		/* for contact button  */ 
		
a.g:link, a.g:visited, a.g:hover, a.g:active {
 		font-family: Verdana, Arial, Helvetica, sans-serif;
 		font-size: 11px;
 		font-weight:bold;
		padding-bottom: 10px;
		padding-top: 10px;
		padding-right: 10px;
		padding-left: 5px;
 		text-align:center;
 		text-decoration: none;
		}

 
a.g:link, a.g:visited	{
  		background-image: url(../img/b-whitelg.png);
		background-repeat: no-repeat;
 		color: #666666;
		 
		}


a.g:hover, a.g:active	{
 		background-image: url(../img/b-cyansb.png);
		background-repeat: no-repeat;
 		color: #FFFFFF;
		 
		}	
	

 a.g img	{  
		border: none;
		height: 14px;
		vertical-align: bottom;
		width: 14px;
		}	

	/* ===========================================
		5. Second Navi for bottom of page 
		======================================== */ 

 #secondnavi ul	{
		float: left;
		height: 20px; 
        padding: 0;
		}

		
#secondnavi li	{
		border-left: #66CCFF thin dotted; 
		color: #999999;
		display: inline;
		font-size: 11px;
		font-family: Arial, Helvetica, sans-serif; 
		 
		letter-spacing: 1px;
		list-style-type: none;
		padding-right: 5px;
		padding-top: 3px; 
		padding-bottom: 3px;
		padding-left: 5px;
		text-align: center;
		}		
#secondnavi li a {
		color: #999999;
		}

#secondnavi li a:link, a:visited	{
		color:#999999;
        font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #999999;	
		text-decoration: none;	
		}

#secondnavi  a:hover 	{
		color:  #00CCFF;
        text-decoration: none;
		}
 		 
#secondnavi a:active  {
		color: #00CCFF;
		}

  
 /*	=================================== 	
 		6. Form for service and contact  
 	===================================	*/		
				
 
form 	{
		background-image: url(../img/bkgd10.png);
		background-repeat: repeat;
		padding: 15px;
		}
	
label 	{
		margin: 5px 0;
		display: block;
		}

 
legend {
		font-size: 12px;
		font-weight: bold;
		color: #666666;
		margin-bottom: 10px;
		}
			
fieldset {
		display: block;
		padding: 10px;
		border: white 1px solid ;
		margin-right: 5px;
		margin-bottom: 20px;
		}								
			
#print {
		letter-spacing: 1px;
		}			
		
 
		
/* =================================
		7. Pages in order of appearance  
		-INDEX
		-CORPORATE PROFILE
		-MARKETS
		-PRODUCTS
		-SERVICE
		-CONTACT
		-PRIVACY POLICY
	================================ */
	
	/* 	G E N E R A L   C L A S S E S  for all pages */  	
	
	

		/* navigation - graphics  */ 
 
.homeicon img
		{
		border: none;
		height: 13px;
		width: 15px;
		vertical-align: baseline;
		}

		/* location guide on top of each page */						
.location	{
		color: #999999;
		font-size: 9px;
		letter-spacing: 1px;
		margin-bottom: 5px;
		text-align: left; 
		}	
		
		/* skiplink for accessability */	
		
.skiplink {
		position: absolute;
		top: -2000px;
		left: -3000px;
		width: 0px;
		height: 0px;
		overflow: hidden;
		display: inline;
		}		
		
		/* 	=====================
			I N D E X   P A G E
		======================  */  
	
		
#homepg h1	{
		font-size: 24px;
		margin-bottom: 20px;
		}


#homepg h2	{
 
		font-size: 16px;
		margin-top: 15px;
		margin-bottom: 5px;
		}


#homepg .topline
 		{
		font-size: 13px;
		width: 500px;
		 
		}	

			
#homepg p	{
		font-size: 11px;
		 
		 
		}	
			
#homepg table	{
		border: none;
		padding-bottom: 8px;
		padding-left: 10px;
 		float: left;
		font-size: 11px;
		font-weight: bold;
		height: 40px;
		margin-bottom: 5px; 
		margin-right: 50px; 
		text-align: left;
		}	
		
#homepg td {
		width: 160px;
		}


#homepg td img {
	 
		border: silver 1px solid;
		height: 45px;
		width: 130px;
		}	
		
div.ecohome {
		clear: both;
		float: left;
		padding-left: 5px;
		width: 465px; 
		}

div.ecohome h3 {
		font-size: 16px;
		margin-top: 20px;
		margin-bottom: 5px;
		}
		
div.ecohome img {	
		float: right;
		height: 115px;
		width: 115px; 
 		margin-right: 25px; 
		}		
		
	
		/* 	index page - sidebar (What's new) */ 
div.news{
		background-image: url(../img/bkgd10.png);
		background-repeat: repeat;
		border-bottom: #333333 1px dotted;
		padding-left: 58px;
		padding-right: 20px;
		padding-bottom: 15px;
		padding-top: 40px;
		width: 162px;
		}	
		
div.news h2 {
		color: #333333;
		}	
		
div.news ul {
		
		list-style: none;
		 
		} 
div.news li {
		list-style-type: inherit;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 1px;
		}
	
div.news p {
		font-size: 10px;
		font-weight: bold;
		margin-bottom: 10px;
		width: 160px;
		}	
		
					
div.news img	{ 
		margin-bottom: 10px;
		margin-top: 10px;
		}
	
 

		/* =========================
			P R O F I L E  P A G E
			========================= */ 

		/* profile page chapters  */ 
		
div.chapter {
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		margin-bottom: 35px;
		padding-left: 10px;
		width: 510px;
		}	

div.chapter h1 {
		padding-top: 40px;
		margin-bottom: 40px;
		}	

div.chapter p {
		font-weight: bold;
		font-size: 14px;
		}		

div.chapter ul	{
		margin-top: 35px;
		 
		margin-bottom: 25px;
		 
		padding-left: 14px; 
		text-align: left;
		line-height: 2; 
		width: 450px;
		}
			
div.chapter li	{
		list-style-position: inherit;
		list-style-type: square;
		 
		}			

			
div.chapter img	{
		border: silver 1px solid;
		float: right;
		height: 85px;
		margin-right: 5px;
		margin-bottom: 10px;
		width: 155px; 
		}
		
		
		/* profile page - sidebar (#empty) */ 
	
div.chapt-sb	{
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		margin-bottom: 35px;
		margin-top: 10px;
		padding-left: 5px;
		width: 340px;
 		}	

div.chapt-sb h1 {
		padding-top: 30px;		
		}		
		
div.chapt-sb img {
		border: silver 1px solid;
		float: left;
		height: 85px;
		margin-bottom: 20px;
		margin-right: 10px;
		width: 150px;
		}
 

div.chapt-sb ul 	{
		margin-top: 30px;
		margin-bottom: 25px;
		line-height: 2;
		padding-left: 14px;
		text-align: left; 
		width: 320px;
		}
		
		/* profile page - sidebar  TABLE */ 
		
div.chaptable	{
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		margin-bottom: 30px;
		margin-top: 20px;
		overflow: hidden;
		padding-left: 5px;
		width: 340px;
 		}			

div.chaptable h1 {
		margin-top: 40px;	
		}	
		 				
div.chaptable p {
		font-size: 12px;
		line-height: 1.5;
		margin-top: 35px;
		}		
		
div.chaptable table {
		margin-top: 30px;
		}
	
	
div.chaptable td {
		padding-bottom: 40px;
		text-align: center;
		width:100px;
		}

div.chaptable td img{
		width: 80px;
		}

div.chaptable img#pet, 
div.chaptable img#goody {	
		width: 160px;
		}
 
 
 
			
		/* 	=====================
			M A R K E T  P A G E 
			====================== */ 

#marketing  p {
		font-size: 13px;
		}
		
div.market {
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		padding-left: 10px;
		width: 510px;
		}	

		
div.market h2{
		padding-top: 50px;
		margin-left: 20px;
		}	
			
 
 
div.market ul	{
		margin-top: 30px;
		margin-bottom: 20px;
		font-size: 11px;
		text-align: left;
		line-height: 1.5; 
		width: 450px;
		}
			
			
div.market li	{
		margin-left: 40px;
		list-style-position: inherit;
		list-style-type: square;
		}			

 		
div.market img	{
		border: silver 1px solid;
		float: right;
		height: 85px;
		margin-right: 5px;
		margin-bottom: 10px;
		width: 155px; 
		}

 
		/* market page - sidebar (#empty) */ 
			
div.market-sb	{
		margin-top: 15px; 
		background-image:url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		overflow: hidden;
		padding-left: 5px;
		width: 340px;
 		}	

div.market-sb h2 {
		padding-top: 50px;
		}		
 	
		 
div.market-sb img {
		border: silver 1px solid;
		float: left;
		height: 85px;
		margin-right: 10px;
		width: 155px;
		}


div.market-sb ul 	{
  		margin-left: 30px;
		margin-top: 30px;
		margin-bottom: 20px;
		line-height: 2;
		padding-left: 14px;
		text-align: left; 
		width: 320px;
		list-style:square;
		}
		

		/* 	=======================
			P R O D U C T  P A G E 
			========================*/ 		

			 
div.product {
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		margin-top: 10px; 
		margin-bottom: 10px;
		padding-left: 10px;
		width: 510px;
		}	
		
div.product h2 {
 		padding-top: 50px;
		margin-bottom: 30px;
		}
 
 div.product p {
 		 font-size: 12px;
		 margin-bottom: 5px;
		 }
		 
div.product ul	{
		 
		margin-bottom: 20px;
		padding-left: 14px; 
		text-align: left;
		line-height: 1.5; 
		}
			
div.product li	{
		list-style-position: inherit;
		list-style-type: square;
		}			

 		 
div.product img	{
		border: silver 1px solid;
		float: right;
		height: 85px;
		margin-right: 5px;
		width: 155px; 
		}
		

		/* 		PRODUCT page - bottom of page - product listing accross the whole page  */ 				

#bottomblock {
		float: left;
		padding-top: 20px;		 
		width: 100%;
		}		 
  

 div.selection {
		border-left:#66CCFF 1px dotted;
		float: left;
		margin-top: 20px;
		margin-right: 5px;
		padding-bottom: 20px;
		width: 180px;
		}
 
div.selection h3 {
		margin-left: 10px;
		margin-bottom: 2px;
		}

div.selection ul {
		list-style:none;
		margin-left: 5px;
		}	

div.selection li{
		padding: 2px;
		padding-right: 5px;
		padding-left: 10px;
		}		

div.selection img {
		border: none;
		margin-left: 10px;
		margin-top: 20px;
		width: 160px;
		height: 100px;
		}
		
		
 		
		/* 	===============================================================
			C U S T O M  C A P A B I L I T I E S  P A G E  -under PRODUCTS
			==============================================================*/ 
		
		
  
#customcap .solution { 
		font-size: 13px;
		line-height: 1.5;
		margin-bottom: 40px;
	 
		width: 450px;
		}
		
		/* custom page - capabilities */ 
			
div.custom {
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		margin-bottom: 30px;
		padding-left: 10px;
		width: 510px;
		}	
		
div.custom h2{
		padding-top: 50px;
		margin-left: 15px;
		margin-bottom: 30px;
		}		
 	
 div.custom h3{
		margin-top: 20px; 
		margin-left: 15px;
		}		
	

div.custom ul	{
		margin-top: 5px;
		text-align: left;
		line-height: 2; 
		width: 450px;
		}
			
div.custom li	{
		margin-left: 30px;
		list-style-position: inherit;
		list-style-type: square;
		}			

div.custom img	{
		float: right;
		margin-right: 5px;
		margin-bottom: 10px;
		}
		
		
		/* custom page - sidebar */ 	
					
div.custom-sb	{
		background-image: url(../img/bkgdtall.png);
		background-repeat: repeat-x;
		background-position: top;
		margin-bottom: 10px;
		margin-top: 10px;
		overflow: hidden;
		padding-bottom: 5px;
		padding-left: 5px;
		width: 340px;
 		}	

div.custom-sb h2 {
		padding-top: 60px;
		}		
 
				
div.custom-sb img {
		border: silver 1px solid;
		float: left;
		height: 85px;
		margin-right: 10px;
		width: 155px;
		}
 


div.custom-sb ul 	{
  		margin-left: 20px;
		margin-top: 30px;
		line-height: 2;
		padding-left: 14px;
		text-align: left; 
		width: 320px;
		list-style:square;
		}
				
	
		
		/* 	=============================
			S E R V I C E   P A G E  
			==========================*/  


#service1 h1 {
		margin-bottom: 25px;
		}

#service1 h2 {
		margin-left: 15px;
		}		
	
		
		/*	service page - calculation 	*/  
div.calculation {
		clear: both;
		float: left;
		margin-bottom: 20px;
		margin-right: 10px;
		padding-bottom: 15px;
		padding-left:15px;
		width: 500px;
		}	

 		
div.calculation ul {
		list-style-type: none;
		margin-top: 30px;
		margin-bottom: 30px;
		line-height: 2;
		font-size: 11px;
		width:450px;
		}
		
 		
		
		/* 	service page - Sidebar (#empty)	*/ 	
			
div.calculation2  {
		margin-bottom: 20px;
		width: 320px;
		}

		
div.calculation2 ul {
		font-size: 10px;
		margin-left: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		list-style-type: square;
		line-height: 1.5;
		}
		

		/* service page - download area */ 
		
div.downld {
		border-top: #66CCFF 1px dotted;
		border-bottom: #66CCFF 1px dotted;
		height: 255px;
		margin-bottom: 30px;
		width: 340px;
		} 	
			
div.downld h4 {
		font-size: 12px;
		font-weight: bold;
		margin-bottom: 20px;
		margin-top: 20px;
		}
 	
		
div.downld ul {	
		font-size: 12px;
		font-weight: bold;
		padding-top: 20px;
		}
		
div.downld li {
		height: 40px;
		list-style: none;
		text-align: left;
		} 
 		
div.downld img{
		height: 240px;
		width: 160px;
		float: left;
		border: silver 1px solid;
		margin-right: 10px;
		margin-top: 5px;
		}



 		/* =================================
			C O N T A C T   P A G E 
		================================ */ 
	
		
	
#contactus h3	{
		margin-top: 5px;
		}
		
#contactus p {
		margin-top: 10px;
		font-size: 13px;
		margin-bottom: 5px;
		}			

div.message {
		float: left;
		font-size: 11px;
		font-weight: bold;
		width: 500px;
		}	 
		
		/* Sidebar  - for Address */
				
div.address {
		background-image: url(../img/bkgd10.png);
		background-repeat: repeat;
		border-bottom: #333333 1px dotted;
		padding-left: 58px;
		padding-right: 20px;
		padding-bottom: 15px;
		padding-top: 40px;
		width: 162px;
		}	
		
div.address h3 {
		margin-left: 10px;
		margin-bottom: 3px;
		font-size: 11px;
		color: #333333;
		}				
div.address img	{
		border: silver 1px solid;
		height: 90px;
		margin-bottom: 10px;
		width: 150px; 
		}
	
div.address ul {
		list-style: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
		list-style: none;
		margin-left: 10px;
		}	
		
div.address li{
		list-style: none;
		line-height: 1.5;
		color: #333333;
		}		
	
div.address a:link, a:visited{
		color: #333333;
		}			
	
 
div.address a:hover	{
		color: #00CCFF;
		}
		
div.address a:active {
		color: #00CCFF;
		}			



		/* ========================
			P R I V A C Y  P A G E
			=======================  */			
 
 
#privacy h2	{
		margin-top: 20px;
		margin-bottom: 15px;
		margin-left: 10px;
		}	
			
#privacy h3	{
		margin-top: 30px;
		margin-bottom: 15px;
		margin-left: 10px;
		}		
				
		
#privacy p	{
		font-size: 10px;
		line-height: 2;
		margin-top: 10px;
		margin-bottom: 15px;
		margin-right: 20px;
		padding-left: 20px;
		padding-right: 20px;
		}				
			
 
 
 /*	=================================== 	
 		End Stylesheet  		
 	===================================	*/