﻿/*#################################################################
#####      THIS FILE AND ITS CONTENTS ARE THE PROPERTY OF     #####
#####      OFFSIGHT IT SERVICES LTD.  NO ATTEMPT MUST BE      #####
#####      MADE TO COPY ITS CONTENTS OR USE ELSEWHERE         #####
#####      WITHOUT PERMISSION FROM OFFSIGHT IT SERVICES LTD   #####
#####                                                         #####
###################################################################
#####                                                         #####
#####                  WRITTEN 10/06/2010                     #####
#####                                                         #####
#################################################################*/

h1
{
font-size: 16pt;
margin: 0px;
color: #444444;
}

h3
{margin: 0px;
color: #444444;
font-size: 12pt;
display: inline;
}

/*---start main layout---*/
body
{
text-align: center;
margin: 0px auto 0px auto;
font-family: Verdana; 
font-size: 10pt;
}

.container
{
width: 973px;
display: inline-block;
margin: 0px auto 0px auto;
text-align: left;
}

.header
{
width: 973px;
height: 150px;
display: inline-block;
float: left;
position: relative;
padding-left: 10px;
}

.menuContainer
{
width: 973px;
height: 33px;
display: inline-block;
float: left;
background-image: url(images/menuBg.jpg);
position: absolute;
top: 105px;
left: 0px;
}

.menuItem
{
float: left;
margin-top: 7px;
margin-left: 30px;
font-size: 12pt;

}
.menuItem a
{
color: #ffffff;
text-decoration: none;
}

.leftColumn
{
width: 197px;
height: auto;
display: inline-block;
float: left;
margin-top: 5px;
}

.rightColumn
{
width: 767px;
height: auto;
display: inline-block;
float: right;
}

.flashHold
{
width: 767px;
height: 169px;
display: inline-block;
float: left;
background-image: url(images/flashHold.jpg);
margin: 10px 0px 0px 0px;
}
.footer
{
 background-image: url(./images/menubg.jpg);
 height: 33px;
 padding: 2px;
 color: #ffffff;
 width: 973px;
 display: inline-block;
 font-size: 8pt;
 margin-top: 10px;
 }
 
 .footer a {color: #ffffff}
/*---end main layout---*/


/*---start testimonials---*/
.testTop
{
width: 197px;
height: 32px;
display: inline-block;
float: left;
background-image: url(images/testTop.jpg);
margin: 10px 0px 0px 0px;
position: relative;
}

.testTitle
{
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 6px;
left: 0px;
font-size: 12pt;
color: #fff;
font-weight: bold;
}

.testMain
{
width: 197px;
height: auto;
display: inline-block;
float: left;
background-image: url(images/testMain.jpg);
text-align: center;
}

.testInfo
{
width: 95%;
height: auto;
display: inline-block;
text-align: left;
}

.testBot
{
width: 197px;
height: 16px;
display: inline-block;
float: left;
background-image: url(images/testBot.jpg);
}
/*---end testimonials---*/


/*---start full box---*/
.fullTop
{
width: 767px;
height: 30px;
display: inline-block;
float: left;
background-image: url(images/fullTop.jpg);
margin: 10px 0px 0px 0px;
position: relative;
}

.fullMain
{
width: 767px;
height: auto;
display: inline-block;
float: left;
background-image: url(images/fullMain.jpg);
text-align: center;
}

.fullBot
{
width: 767px;
height: 17px;
display: inline-block;
float: left;
background-image: url(images/fullBot.jpg);
}
/*---end full box---*/


/*---start half box---*/
.halfContainer
{
width: 364px;
height: auto;
display: inline-block;
float: left;
text-align: center;
}

.halfTop
{
width: 364px;
height: 32px;
display: inline-block;
float: left;
background-image: url(images/halfTop.jpg);
margin: 10px 0px 0px 0px;
position: relative;
}

.halfMain
{
width: 364px;
height: auto;
display: inline-block;
float: left;
background-image: url(images/halfMain.jpg);
text-align: center;
}

.halfBot
{
width: 364px;
height: 16px;
display: inline-block;
float: left;
background-image: url(images/halfBot.jpg);
}
/*---end half box---*/


.builderboxcontainer
{
width: 440px;
height: auto;
display: inline-block;
float: left;
}

.builderboxtop
{
width: 440px;
height: 7px;
display: inline-block;
float: left;
background-image: url(images/buildertop.gif);
margin: 10px 0px 0px 0px;
position: relative;
}

.builderboxmain
{
width: 440px;
height: auto;
display: inline-block;
float: left;
background-image: url(images/buildermain.gif);
}

.builderboxbottom
{
width: 440px;
height: 7px;
display: inline-block;
float: left;
background-image: url(images/builderbottom.gif);
}


/*---start product page---*/
.titleButBg
{
width: 100%;
height: 32px;
display: inline-block;
float: left;
background-image: url(images/titleButBg.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 10px 0px 10px 10px;
position: relative;
}

.titleButText
{
width: 50%;
text-align: center;
height: auto;
float: left;
position: absolute;
top: 7px;
font-weight: bold;
color: #fff;
}

.productDetailsContainer
{
width: 100%;
height: auto;
display: inline-block;
float: left;
margin: 10px 0px 0px 0px;
}

.productImage
{
width: 170px;
height: auto;
float: left;
margin: 0px 10px 0px 0px;
}

.breakLine
{
width: 100%;
height: 2px;
background-color: #34347a;
display: inline-block;
float: left;
margin: 10px 0px;
overflow: hidden;
}

.downloads
{
width: 290px;
height: auto;
display: inline-block;
float: right;
margin-left: 10px;
}

.description
{

}

.considered
{
width: 250px;
height: auto;

margin: 10px 0px 0px 0px;
}

.pricing
{
width: 270px;
height: auto;

margin: 10px 0px 0px 0px;
}

.pricingandconsideredcontainer {
width: 250px;
display: inline-block;
float: left;
margin-left: 20px;
}

.builder {
width: 450px;
margin-left: 0px;
float: left
}
/*---end product page---*/


.highlight
{
font-weight: bold;
background-color: #5df77a;
}

.watermark
{
color: #999999;
}



/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
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: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:-25px;
	padding: 0 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(./images/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(./images/bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(./images/bubble.gif) no-repeat bottom;
}
/* ----- end bubble tooltip ------ */

/* start dave's random stuff crammed on the end */

.logo { font-family : Verdana ; letter-spacing: -3px; font-size: 35pt; color: #444 }
.logoBlue { font-family : Verdana ; letter-spacing: -3px; font-size: 35pt;  color: #6a6ba3 }

.tagline {font-family : Verdana ; letter-spacing: 1px; font-size: 20px;  color: #444 }
.taglineBlue {font-family : Verdana ; letter-spacing: 1px; font-size: 20px; color: #6a6ba3}

.logoContainer {float: left; line-height: 40pt;}
.oldSiteThumb {float: left; margin-left: 40px; margin-top: 5px;}
.phoneNumber {width: 225px; text-align: right;
letter-spacing: -2px; float: right; margin-left: 15px; margin-top: 20px; font-size: 20pt; font-family: Verdana; margin-right: 15px
}

.productPanels { background-image: url(./images/panelback.jpg); width: 800px; background-repeat: no-repeat ; height: 152px; padding-top: 2px; margin-top: 10px; }
.tableHeader { background-image: url(images/menuBg.jpg); height: 20px; color: #ffffff }
.modalBackground { background-color : #999999; filter: alpha(opacity=70); opacity:0.7;}
.infobox { border: solid 1px #3366ff; background-color: #ffffff; padding: 8px; }
.infoboxheader { border: solid 1px #3366ff; background-color: #c3c4e1; padding: 4px; }
