/*This sets the body colour etc*/
body
{
background-color: #d9e6ff;
font-family: verdana, tahoma, arial;
color: #838383;
font-size: 12px;
font-weight: bold;
line-height: 15px;
}

/*A Link Format*/
a:link, a:active, a:visited
{
color: black;
text-decoration: none;
font-weight: bold;
border: 0px white outset;
text-align: center;
}

.center
{
text-align: center;
}

.black
{
color: black;
}

.red
{
color: red;
}

/*A Link Format*/
a:hover
{
color: red;
}

/*This sets the main background*/
#main-bg
{
position: absolute; 
top: 25px;
left: 50%;
margin-left: -384px;
width: 768px;
border: 5px black double;
background-color: #ffffff;
height: 480px;
}

/*This sets the page header & image*/
#header
{
width: 768px;
height: 90px;
background-image: url("images/header.png");
}

/*Hides current page*/
.hidden
{
display: none;
height: 390px;
}

/*Makes page visible*/
.unhidden
{
display: block;
height: 390px;
}

/*Controls the full page footer*/
.footer
{
position: absolute;
margin: -40px 0px 0px 0px; /* top : right : bottom : left */
width: 768px;
height: 40px;
background-image: url("images/footer.png");
}

/*Sets up the Menu */

.navigation 
{
position: absolute;
float: left; 
width: 150px;
background-color: #d9e6ff;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}

.navigation ul 
{
padding-right: 0px; 
padding-left: 0px; 
padding-bottom: 0px; 
margin: 0px; 
padding-top: 0px; 
list-style-type: none;
}

.navigation li 
{
display: inline;
}

.navigation a 
{
background-position: 2% 50%; 
display: block; 
padding-left: 0px; 
font-weight: bold; 
color: #000066; 
line-height: 27px; 
border-top: #fff 10px solid; 
background-color: #d9e6ff; 
text-decoration: none;
}

.navigation a:hover 
{
color: #ffffff; 
background-color: #000066;
}

/*END OF MENU*/

/*---------- bubble tooltip -----------*/
a.tt
{
position:relative;
z-index:24;
color:#838383;
font-weight:bold;
text-decoration:none;
font-size: 9px;
line-height: 15px;
text-align: center;
}

a.tt span
{ 
display: none; 
}

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover
{ 
z-index:25; 
color: black; 
}

a.tt:hover span.tooltip /*From here to the end affect the bubble*/
{
display: block;
position: absolute;
top:0px; left:0;
padding: 15px 0px 0px 0px; /* top : right : bottom : left */
margin: 0px 0px 0px -150px; /* top : right : bottom : left */
width: 200px;
color: black;
text-align: center;
font-size: 12px;
}

a.tt:hover span.top
{
display: block;
padding: 30px 8px 0;
background-image: url("images/bubble.gif");
background-repeat: no-repeat;
background-position: top;
}

a.tt:hover span.middle /* different middle bg for stretch */
{ 
display: block;
padding: 0 8px; 
background-image: url("images/bubble_filler.gif"); 
background-repeat: repeat;
background-position: bottom;
}

a.tt:hover span.bottom
{
display: block;
padding:3px 8px 10px;
color: #548912;
background-image: url("images/bubble.gif");
background-repeat: no-repeat;
background-position: bottom;
}

/*END OF BUBBLE TOOL TIP*/

/* FADING STUFF FROM HERE */

#fader4
{
opacity: 0;
MozOpacity: 0;
KhtmlOpacity:0;
filter: "alpha(opacity=0)";
visibility: visible;
width: 600px;
height: 330px;
}

/*BODY STARTS HERE*/

.home1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 10px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 80px;
text-align: justify;
font-size: 13px;
line-height: 20px;
z-index: 1;
}

.home2
{
position: absolute;
overflow: auto;
border: 0px blue solid;
margin: 105px 0px 0px 160px; /* top : right : bottom : left */
width: 325px;
height: 230px;
text-align: justify;
font-size: 13px;
line-height: 20px;
z-index: 1;
}

.home3
{
position: absolute;
overflow: auto;
border: 0px red solid;
margin: 100px 0px 0px 485px; /* top : right : bottom : left */
width: 284px;
height: 256px;
z-index: 0;
}

#design1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 5px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 330px;
text-align: justify;
}

.wedding1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 5px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 330px;
text-align: justify;
line-height: 18px;
}

.wedding2
{
position: absolute;
overflow: auto;
border: 0px green solid;
margin: 280px 0px 0px 615px; /* top : right : bottom : left */
width: 146px;
height: 75px;
text-align: justify;
line-height: 18px;
}

.host1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 10px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 140px;
text-align: justify;
}

.host4
{
position: absolute;
overflow: auto;
border: 0px red solid;
margin: 155px 0px 0px 160px; /* top : right : bottom : left */
width: 430px;
height: 195px;
text-align: justify;
}

.host2
{
position: absolute;
overflow: auto;
border: 0px blue solid;
margin: 140px 0px 0px 615px; /* top : right : bottom : left */
width: 135px;
height: 135px;
text-align: justify;
}

.host3
{
position: absolute;
overflow: auto;
border: 0px green solid;
margin: 270px 0px 0px 615px; /* top : right : bottom : left */
width: 130px;
height: 70px;
text-align: center;
color: green;
}

.web1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 5px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 330px;
text-align: justify;
}

.how1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 5px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 330px;
text-align: justify;
line-height: 17px;
}

.terms1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 5px 0px 0px 160px; /* top : right : bottom : left */
width: 590px;
height: 330px;
text-align: justify;
}

.technical1
{
position: absolute;
overflow: auto;
border-bottom: 1px black solid;
margin: -5px 0px 0px 160px; /* top : right : bottom : left */
padding: 10px 0px 0px 0px;
width: 600px;
height: 45px;
text-align: center;
}

.technicaltable a
{
font-size: 9px;
line-height: 15px;
text-align: center;
}

.contact1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 25px 0px 0px 160px; /* top : right : bottom : left */
width: 500px;
height: 130px;
}

.contact2
{
position: absolute;
overflow: auto;
border: 0px blue solid;
margin: 170px 0px 0px 265px; /* top : right : bottom : left */
width: 450px;
height: 80px;
}

.contact3
{
position: absolute;
overflow: auto;
border: 0px blue solid;
margin: 279px 0px 0px 190px; /* top : right : bottom : left */
width: 540px;
height: 54px;
}

.contacticon1
{
position: absolute;
overflow: auto;
border: 0px blue solid;
margin: 165px 0px 0px 230px; /* top : right : bottom : left */
width: 30px;
height: 30px;
}

.contacticon2
{
position: absolute;
overflow: auto;
border: 0px red solid;
margin: 195px 0px 0px 230px; /* top : right : bottom : left */
width: 30px;
height: 30px;
}

.contacticon3
{
position: absolute;
overflow: auto;
border: 0px green solid;
margin: 225px 0px 0px 230px; /* top : right : bottom : left */
width: 30px;
height: 30px;
}

.examplebox
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 45px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 295px;
text-align: center;
}

/*Sets scroll collumn1*/
.ex1
{
width: 150px;
height: 95px;
float: left;
border-bottom: 1px black solid;
text-align: center;
padding: 3px 0px 0px 0px; /* top : right : bottom : left */
}

/*Sets scroll collumn2*/
.ex2
{
float: left;
width: 428px;
height: 95px;
border-bottom: 1px black solid;
text-align: left;
padding: 3px 0px 0px 5px; /* top : right : bottom : left */
}

.example1
{
position: absolute;
overflow: auto;
border: 0px black solid;
margin: 5px 0px 0px 160px; /* top : right : bottom : left */
width: 600px;
height: 35px;
color: black;
}

.banner
{
position: absolute;
width: 140px;
height:28px;
left: 50%;
margin-left: -384px;
margin-top: 505px;
z-index: -10;
}

.banner1
{
position: absolute;
border: 0px green solid;
width: 770px;
height:28px;
left: 50%;
margin-left: -384px;
margin-top: 505px;
line-height: 28px;
text-align: right;
color: black;
font-size: 10px;
z-index: -10;
}