@charset "UTF-8";
/* CSS Document */

body {
margin:0;
padding:0;
background:url(../images/bg.png) #FFFFFF repeat-x;
font-family:Helvetica, sans-serif;
font-size:12px;
line-height:16px;
text-align:center;
}

#text2a {
font-size:9px;
text-align:center;
line-height:9px;
color:#999;
}
#text2a a{
font-size:9px;
text-align:center;
line-height:9px;
color:#999;
}

#text2a a:hover{
font-size:9px;
text-align:center;
line-height:9px;
color:#CC3399;
}

p {
margin:0;
padding:0;
}

a {
color:#CC3399;
}
a:hover {
color:#666666;
}


#outer {
margin: 0 auto;
text-align:center;
width: 800px;

}

#frame {
margin-top:30px;
padding:0;
}

img .icons {
width:100%;
height: 16px;
}



#header {
background:url(../images/header.png) no-repeat;
width:800px;
height:111px;
}

#logo {
width:239px;
height:95px;
margin-left:30px;
margin-top:16px;
position:relative;
float:left;
}

#contact {
position:relative;
float:right;
width:450px;
height:59px;
margin-right:30px;
margin-top:25px;
font-size:12px;
text-align:right;
vertical-align:middle;
z-index:999;
}




#wrapper {
background:#FFFFFF url(../images/wrap.png) repeat-y;
padding:30px 30px 30px 30px;
z-index:0;
min-height:550px;
text-align:left;
}


#top {
background-color:#fff;
padding: 0;
height:230px;
font-size:10px;
margin-bottom:0px;
margin-top:-10px;
z-index:2;
}

#top_quote {
background-color:#fff;
padding: 0;
font-size:10px;
margin-bottom:20px;
}

#top_free {
background-color:#fff;
padding: 0;
font-size:12px;
margin-bottom:20px;
}

#product {
width:200px;
height: auto;
}

#images {
font-size:12px;
}



#user1 {
background:#f4f4f4;
width:172px;
border: 1px solid #CCCCCC;
padding:10px 10px  0px 10px;
margin: 0px 10px 0px 0px;
float:left;
height:250px;
overflow:hidden;
text-align:left;
}

#user1_quote {
background:#f4f4f4;
width:192px;
border: 1px solid #CCCCCC;
padding:10px 0px  0px 10px;
margin: 0px 10px 0px 0px;
float:left;
height:250px;
overflow:hidden;
text-align:left;
}


#user1_left {
background:#f4f4f4;
width:175px;
border: 1px solid #CCCCCC;
padding:10px 10px  0px 10px;
margin: 0px 10px 0px 0px;
height:250px;
overflow:hidden;
text-align:left;
}

#user2 {
background:#ededed url(../images/quote_sml.png) repeat-x;
width:72%;
border: 1px solid #CCCCCC;
padding:0px;
margin: 0px 0px 0px 0px;
height:250px;
text-align:left;
overflow:hidden;

}

#user2_free {

width:540px;
border: 1px solid #CCCCCC;
padding:0px;
margin: 0px 0px 0px 0px;
text-align:left;
overflow:hidden;

}

#user1_free {
background:#ededed url(../images/quote_sml.png) repeat-x;
width:22%;
border: 1px solid #CCCCCC;
padding:10px;
margin: 0px 10px 0px 0px;
float:left;
height:280px;
overflow:hidden;
}


#user2_quote {

width:540px;
border: 0px solid #CCCCCC;
padding:0px;
margin: 0px 0px 0px 0px;
text-align:left;
overflow:hidden;

}

#user2_lrg {
background:#ededed url(../images/special_lrg.png) repeat-x;
width:510px;
border: 1px solid #CCCCCC;
padding:0px;
margin: 0px;
height:260px;
text-align:left;
overflow:hidden;

}
#user2_lrg_txt {
width:180px;
float:left;
font-size: 12px;
margin-left:10px;
margin-top:50px;

}
#user2_lrg img {
text-align:right;
float:right;
margin-right:0px;
}

#user2_lrg_txt H2 {
font-size:30px;
font-weight:normal;
margin:5px 0 0 0;
padding:0;
}
#user2_lrg_txt a, #user2_lrg_txt a:hover {
color:#FFFFFF;
}



#user3 {
background:#ededed url(../images/quote_sml.png) repeat-x;
width:33%;
border: 1px solid #CCCCCC;
padding:10px;
margin: 0px 0px 0px 0px;
float:left;
height:100%;
text-align:left;
overflow:hidden;

}

#text {
width:50px;
}

img {
border:0px;
}


#main {
width:100%;
margin-top:10px;
float: left;
background-color:#FFFFFF;

}


#left {
width:185px;
margin-right:10px;
height:auto;
float:left;
position:relative;
}

#clear {
clear:both;
height:20px;
width:auto;
padding:0;
margin:0;
}

#middle {
position:relative;
text-align:left;
width:523px;
float:left;
left:20px;
background-color:#FFFFFF;
}

h1 {
font-family: Helvetica, sans-serif;
font-size:19px;
margin: 5px 0 10px 0 ;
color:#CC0099;
}

h2 {
font-family: Helvetica, sans-serif;
font-size:16px;
margin: 5px 0 10px 0;
color:#333333;
}

h3 {
font-size:12px;
padding:0 0 0 0;
margin:0 0 0 0;
left: -9999px;
}


#bottom {

width: 100%;
height:150px;
font-size:10px;
}

#bot1 {
background:#ededed url(../images/quote_sml.png) repeat-x;
width:183px;
border: 1px solid #CCCCCC;
padding:0px;
margin: 0px 10px 0px 0px;
float:left;
height:100%;
padding-bottom:20px;
text-align:left;
overflow:hidden;
color:#FFFFFF;
}

#bot2 {
background:#ededed url(../images/quote_sml.png) repeat-x;
width:245px;
border: 1px solid #CCCCCC;
padding:10px;
margin: 0px 10px 0px 0px;
float:left;
height:100%;
text-align:left;
overflow:hidden;
}

#bot3 {
background:#ededed url(../images/bottom_black.png) repeat-x;
width:245px;
border: 1px solid #CCCCCC;
padding:10px;
margin: 0px 0px 0px 0px;
float:left;
height:100%;
text-align:left;
overflow:hidden;
color:#FFFFFF;
font-size:12px;
}

input {
border:1px solid #CCCCCC;
background-color:#FFFFFF;
padding: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
width: 150px;
margin-bottom: 3px;
}

select {
border:1px solid #CCCCCC;
background-color:#FFFFFF;
padding: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
width: 150px;
margin: 0;
}

#submit {

border:1px solid #333;
background-color: #CC3366;
color:#FFFFFF;
padding: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
width: auto;
}

span {
margin:0;
padding:0;
}

form {
margin:0;
padding:0;
}

.highlightpink {
margin:0;
padding:0;
color: #CC3399;
}
 
#footer {
text-align:centre;
vertical-align:bottom;
padding-left: 30px;
padding-right: 30px;
height:50px;
background-color:#FFFFFF;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;

}

#bullet {
list-style-type: circle;
margin:0;
padding:0;
text-align:left;
margin-left:15px;
font-size:12px;
font-weight:bold;
}



ul {
list-style-type:none;
margin:0;
padding:0;
text-align:left;
}

li ul {
list-style-type: none;
text-indent: 10px;
}

 img { behavior: url(iepngfix.htc); padding:0; margin:0; }
 
 #widgetframe {
 background:#ededed;
 }
 

#menu {
background-color:#333333;
margin: 0;
padding:0;
height:37px;
z-index:700;
width:100%;
}


.plmenu {width:800px; background-color:#333333; height:32px; font-size:12px; position:relative; z-index:100;border-right:0px solid #000;}
/* hack to correct IE5.5 faulty box model */
* html .plmenu {width:800px; w\idth:800px;}
/* remove all the bullets, borders and padding from the default list styling */
.plmenu ul {padding:0;margin:0; margin-left:30px;list-style-type:none;}
.plmenu ul ul {width:108px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.plmenu li {float:left;width:108px;position:relative;}
/* style the links for the top level */
.plmenu a, .plmenu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:108px; height:32px; border:0px solid #000; border-width:0px 0 0px 0px; background:#333; padding-left:10px; line-height:29px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .plmenu a, * html .plmenu a:visited {width:108px; w\idth:108px;}

/* style the second level background */
.plmenu ul ul a.drop, .plmenu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the second level hover */
.plmenu ul ul a.drop:hover{background:#e00389 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
.plmenu ul ul :hover > a.drop {background:#e00389 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the third level background */
.plmenu ul ul ul a, .plmenu ul ul ul a:visited {background:#333;}
/* style the third level hover */
.plmenu ul ul ul a:hover {background:#e00389;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.plmenu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:108px;border-top:0px solid #000;}
/* another hack for IE5.5 */
* html .plmenu ul ul {top:32px;t\op:33px;}

/* position the third level flyout menu */
.plmenu ul ul ul{left:108px; top:-1px; width:108px;}

/* position the third level flyout menu for a left flyout */
.plmenu ul ul ul.left {left:-108px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.plmenu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.plmenu ul ul a, .plmenu ul ul a:visited {background:#333; color:#fff; height:auto; line-height:1em; padding:5px 10px; width:118px;border-width:0 0px 0px 0px;}
/* yet another hack for IE5.5 */
* html .plmenu ul ul a, * html .plmenu ul ul a:visited {width:108px;w\idth:108px;}

/* style the top level hover */
.plmenu a:hover, .plmenu ul ul a:hover{color:#fff; background:#e00389;}
.plmenu :hover > a, .plmenu ul ul :hover > a {color:#fff;background:#e00389;}

/* make the second level visible when hover on first level list OR link */
.plmenu ul li:hover ul,
.plmenu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.plmenu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.plmenu ul :hover ul :hover ul{ visibility:visible;}