/*stylesheet for ewage.co.za*/
html { margin: 0; padding: 0; }

body { margin: 0 auto; padding: 0; width: 1024px; background-color: #ffffff; color: #000000; line-height: 1.4em; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-size: 10px; }

/**outer div**/
#container { padding: 0; margin: 0; text-align: left; }

/**basics**/
a { font-weight: bold; color: #333333; text-decoration: none; }
a:link { color: #333333; }
a:visited { color: #666666; }
a:active { color: #333333; }
a:hover { color: #2267ac; text-decoration: underline; }

ul li { list-style-image: url(../images/bullet_blue.jpg); }

li ul li { list-style-image: url(../images/bullet2.jpg) }

h2 { font-size: 1.2em; font-weight: bold; padding: 1em 0 1em 4em; }
h2 a:hover { text-decoration: underline; }

h4 { color: #666666;  font-size: 0.9em; line-height: 100%; padding: 1.5em 1em 1em 1em; }
h4 a:hover, li a:hover h4 { color: #2276ac; }

hr { width: 80%; color: #9a9e9f; margin: 10px auto; text-align: center; }

img{ border: none; }

/**content**/
.body { font-family: Arial, Helvetica, Sans-serif; margin: 0 auto; color: #000000; }

#leftcol ul { font-size: 1.0em; position: relative; padding: 1em 0 0 6em; }

#leftcol ul li { margin-bottom: 2em; }



/**Header Div**/
#header { margin: 0; padding: 0; width: 100%; height: 120px; background: #ffffff; display: block; clear: both; }

/**Left Image**/
#leftcol{ width: 50%; margin: 0; padding: 0; float: left; background-color: #ffffff; }
             
#leftcol img { margin-bottom: 1em; }

#leftcol a img { padding-top: 1em; }

#leftcol, .body { min-height: 250px; }

/**Content Div**/
#rightcol { width: 45%; margin: 2% 0 2% 0; padding: 1em 0; float: left; text-align: justify; 
  line-height: 150%; background-color: #ffffff; }

#rightcol ul { list-style: square inside; margin-bottom: 2em; }

#rightcol ul.bodytext li a{ color: #000000; }

#rightcol ul.bodytext li a:hover{ color: #ebbc22; }

/**Footer Div**/
#footer { margin: 0; padding: 0; height: 45px; color: #000000; font-size: 10px; clear: both; }

/**Classes**/
.right { color: #333333; font-style: italic; font-size: 8pt; text-align: right; }

.float_right { float: right; }
  
.float_left { float: left; }

.bodyhead { text-align: left; font-size: 12pt; font-weight: bold; margin-left: 5%; padding: 1%; text-transform: uppercase; color: #2267ac; }

.link a { text-align: left; font-size: 12pt; font-weight: bold; margin-left: 5%; padding: 1%; 
  text-transform: uppercase; text-decoration: underline; color: #2267ac; }

.link a:hover{ color: #666666; }

.bodytext { text-align: left; font-size: 9pt; font-weight: normal; line-height: 150%;   margin: 0% 5% 0% 5%; }

p.bodytext { margin-left: 6em; }

.bodytext a{ font-size: 8pt; font-weight: bold; text-decoration: underline; color: #666666; }

.bodytext a:hover{ color: #2267ac; }

.heading { font-size: 1.5em; color: #1e0058; }

.bottom { margin-bottom: 0; }

.txtborder { background: url(../images/txtborder.jpg) repeat-x; }

.txtcentre { text-align: center; }

.small_indent { margin-left: 2.5em; }
.med_indent { margin-left: 10em; }

.form { padding: 2em 0 0 2em; margin: 0; }

/**styling for text**/
.bold { font-weight: bold; }
.italic { font-style: italic; }
.smalltxt { font-size: 0.6em; }
.bluetxt { color: #2267ac; }
.greentxt { color: #69ac22; }
.greytxt { color: #9a9e9f; }
.red { color: #e7261d; }
.white { color: #ffffff; }
.black { color: #000000; }

/**styling for pricing levels**/
.level1, .level2, .level3, .level4 { width: 150px; height: 150px; margin: 0 60px 0 30px; padding: 35px 0 0 0;  float: left; }
.level1 { background: white url(../images/level1.jpg) no-repeat; }
.level2 { background: white url(../images/level2.jpg) no-repeat; }
.level3 { background: white url(../images/level3.jpg) no-repeat; }
.level4 { background: white url(../images/level4.jpg) no-repeat; }

/**styling for lists on home and help pages**/
.tick { background: #ffffff url('../images/bullet_tick.jpg') no-repeat 25px center; padding: 15px 0 10px 65px; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-size: 14px; font-weight: bold; font-style: italic; height: 32px; }


/**styling for tutorial**/
.tutlink a { display: block; color: #2267ac; font-size: 12pt; font-weight: bold; padding: 0 15px 1em 15px; margin: 5px -10px 10px 10px; width: 400px; text-transform: uppercase; text-decoration: underline; text-align: center; background: url(../images/txtborder.jpg) repeat-x; /*this is the link to the tutorial from the homepage*/