/* CSS Document */

body 
{
margin: 0px;
padding: 0px;
color: #000;
background: #FFF url(../images/background.png) top left repeat-x;
}


									/* SITE BODY ELEMENTS  */





/* holds the logo, menu and banner */
.header
{
overflow: visible;
margin: 0px auto;
width: 900px;
}

/* holds logo */
.logo
{
float: left;
width: 272px;
height: 199px;
margin: 0px 0px 1px 0px;
background: url(../images/logo.png) top left no-repeat;
}

/* holds banner graphics on index page */
.bannerhome
{
clear: both;
float: left;
width: 950px;
height: 100px;
margin: 0px 0px 0px -30px;
background: url(../images/banner.png) left top no-repeat;
}

.contact
{
float: left;
width: 220px;
height: 95px;
background: url(../images/contact_us.png) left top no-repeat;
margin: 0px 0px 0px 350px;
}




/* holds everything but menu, banner, top logo and footer */
.container
{
clear: both;
overflow: hidden;
margin: 0px auto;
width: 900px;
}

/* holds the blue features in the right column */
.featurecolumn
{
float: right;
width: 260px;
margin: 30px 0px 0px 20px;
padding: 10px 10px 0px 10px;
background: #C3DEFA;
}

/* holds the flash web site swf in the right column on services page */
.sites
{
float: right;
width: 280px;
height: 179px;
margin: 30px 0px 0px 20px;
padding: 0px;
background: #C3DEFA url(../images/sites.jpg) top left no-repeat;
}

/* home page text holders left and middle */
.featureleft
{
float: left;
width: 279px;
margin: 20px 30px 0px 0px;
}

/* home page text holders on the right */
.featureright
{
float: left;
width: 279px;
margin: 20px 0px 0px 0px;
}

.featureblue
{
float: left;
width: 580px;
margin: 0px 0px 20px 0px;
padding: 10px 10px 0px 10px;
background: #C3DEFA;
}

.featuregrey
{
float: left;
width: 580px;
margin: 0px 0px 20px 0px;
padding: 10px 10px 0px 10px;
background: #EFEFEF;
}

/* used for setting icons against text which doesn't clear left */
.featurewhite
{
float: left;
width: 580px;
margin: 0px 0px 20px 0px;
padding: 10px 0px 0px 0px;
background: #FFF;
}

/* holds the netstarter package info on the sites page */
.netstarter
{
float: left;
width: 200px;
margin: 0px 20px 20px 0px;
padding: 10px 10px 0px 10px;
background: #EFF8FE url(../images/featurebackground.jpg) bottom left repeat-x;
}

/* holds the small business package info on the sites page */
.smallbusiness
{
float: left;
width: 200px;
margin: 0px 20px 20px 0px;
padding: 10px 10px 0px 10px;
background: #FFF4E6 url(../images/smallbusinessbackground.jpg) bottom left repeat-x;
}

/* holds the ecommerce package info on the sites page */
.ecommerce
{
float: left;
width: 200px;
margin: 0px 0px 20px 0px;
padding: 10px 10px 0px 10px;
background: #F2FFE6 url(../images/ecommercebackground.jpg) bottom left repeat-x;
}

.text
{
float: left;
width: 580px;
margin: 20px 0px;
}

/* holds wider text on the sites page */
.sitestext
{
float: left;
width: 700px;
margin: 20px 0px;
}

/* holds wider text on the portfolio page */
.portfoliotext
{
float: left;
width: 800px;
margin: 20px 0px;
}

/* holds text on the contact page which has a text rule of lower line height */
.contacttext
{
float: left;
width: 400px;
margin: 20px 0px;
}

/* holds images and text in rows on the portfolio page */
.workstext
{
float: left;
width: 800px;
border-top: 2px solid #B8D9FF;
padding: 20px 0px 0px 0px;
}

										/* FOOTER ELEMENTS */

.footerline
{
overflow: hidden;
clear: both;
padding: 20px 0px 30px 0px;
width: 100%;
border-top: 4px solid #BDBDBD;
background: #F2F2F2;
}

.footer
{
margin: 0px auto;
width: 900px;
}

.footertextleft
{
float: left;
width: 279px;
margin: 0px 15px 0px 0px;
padding: 0px 15px 0px 0px;
border-right: 1px solid #BDBDBD;
}

.footertextright
{
float: left;
width: 279px;
margin: 0px 0px 0px 0px;
}


									/* NAVIGATION */


/* menu background */
.menu
{
clear: left;
float: right;
width: 400px;
height: 0px;
margin-top: -10px;
}

/* all lists in this menu */
#nav, #nav ul 
{ 
padding: 0px;
float: right;
list-style: none;
width: 500px;
margin: -20px 0px 0px 0px;
}

#nav li 
{ 
position: relative;
float: left;
margin-bottom: 0px;
width: 92px;
height: 20px;
}

#nav li a 
{
width: 92px;
height: 20px;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
color : #4096EE;
text-align: center;
text-decoration: none;
padding : 0px 0px 0px 0px;
}
	
#nav li a:hover 
{
color: #fff;
background:  #4096EE;
}

.breadcrumbs
{
clear: both;
float: left;
width: 900px;
height: 40px;
margin: 3px 0px 0px 0px;
}

										/* LIST STUFF */


.bullet-square
{
clear: left;
margin-left: -8px;
padding-left: 0px;
list-style: none;
}

.bullet-square li
{
background-image: url(../images/bullet-square.gif);
background-repeat: no-repeat;
padding-left: 22px;
background-position: 0.5em 0em;
}

.bullet-square-green
{
clear: left;
margin-left: -8px;
padding-left: 0px;
list-style: none;
}

.bullet-square-green li
{
background-image: url(../images/bullet-square-green.gif);
background-repeat: no-repeat;
padding-left: 22px;
background-position: 0.5em 0em;
}

.bullet-square-orange
{
clear: left;
margin-left: -8px;
padding-left: 0px;
list-style: none;
}

.bullet-square-orange li
{
background-image: url(../images/bullet-square-orange.gif);
background-repeat: no-repeat;
padding-left: 22px;
background-position: 0.5em 0em;
}

.bullet-square li p
{
line-height: 1em;
}

.bullet-square-green li p
{
line-height: 1em;
}

.bullet-square-orange li p
{
line-height: 1em;
}

ol
{
margin-left: -20px;
}
										
ol li
{
font-size: 12px;
} 


										/* FONTS */


h1
{
clear: left;
font: 18px Geneva, Arial, Helvetica, sans-serif;
margin: 0px 0px 10px 0px;
color: #4096EE;
}

.featurecolumn h1
{
clear: none;
}

h2
{
clear: left;
font: 16px Geneva, Arial, Helvetica, sans-serif;
margin: 0px 0px 10px 0px;
color: #333;
}

.featureleft h2
{
clear: none;
}

.featureright h2
{
clear: none;
}

.featuregrey h2
{
clear: none;
}

.footer h2
{
clear: none;
color: #4096EE;
font-size: 14px;
margin-bottom: 0px;
}

.featurewhite h2
{
clear: none;
}

h3
{
font: 16px Geneva, Arial, Helvetica, sans-serif;
margin: 0px 0px 10px 0px;
color: #4096EE;
}

.featureblue h3
{
clear: none;
}

.featurecolumn h3
{
clear: none;
}

.workstext h3
{
clear: none;
}

h4
{
font: 15px Arial, Helvetica, sans-serif;
color: #000;
clear: left;
text-align: left;
line-height: 1.7em;
margin-top: 0px;
}

/* white text in blue features */
h5
{
clear: left;
font: 16px Geneva, Arial, Helvetica, sans-serif;
margin: 0px 0px 10px 0px;
color: #FFF;
}

p
{
font: 13px Arial, Helvetica, sans-serif;
clear: left;
text-align: left;
line-height: 1.7em;
margin-top: 0px;
}

.featureleft p
{
clear: none;
}

.featureright p
{
clear: none;
}

.breadcrumbs p
{
font-size: 11px;
margin-top: 10px;
}

.footer p
{
color: #4096EE;
clear: none;
line-height: 1.7em;
margin: 0px 0px 0px 0px;
}

.caption p
{
font-size: 11px;
line-height: 1.4em;
margin-bottom: 0px;
}

.caption em
{
color: #08449C;
font-style: normal;
}

.contacttext p
{
line-height: 1.2em;
}

.contacttext h4
{
line-height: 1.2em;
margin-bottom: 12px;
}

.featureblue p
{
clear: none;
}

.featurewhite p
{
clear: none;
}

.workstext p
{
clear: none;
}

.netstarter h3
{
clear: none;
font-size: 22px;
}

.smallbusiness h3
{
clear: none;
font-size: 22px;
color: #FF9900;
}

.ecommerce h3
{
clear: none;
font-size: 22px;
color: #59B101;
}

.contact p
{
text-align: center;
margin-top: 80px;
}




										/* GRAPHICS */


.container img
{
border: none;
}

.text img
{
border: none;
}

.leftimage
{
float: left;
width: 270px;
margin: 5px 20px 0px 0px;
}

.thumbright
{
clear: right;
float: right;
margin: 0px 0px 15px 0px;
width: 220px;
border: none;
text-decoration: none;
}

.caption
{
float: right;
width: 274px;
background: #C3DEFA;
margin-top: 3px;
padding: 5px 3px 3px 3px;
}

.icon
{
float: left;
width: 67px;
margin: 0px 15px 0px 0px;
}

.logofooter
{
float: left;
width: 35px;
height: 43px;
margin: 0px 5px 0px 0px;
background: url(../images/logofooter.jpg) top center no-repeat;
}

.footertalklogo
{
float: left;
width: 35px;
height: 43px;
margin: 0px 5px 0px 0px;
background: url(../images/footertalklogo.jpg) top center no-repeat;
}

.footersmilelogo
{
float: left;
width: 35px;
height: 43px;
margin: 0px 5px 0px 0px;
background: url(../images/smilefooter.jpg) top center no-repeat;
}

.emailicon
{
float: left;
width: 35px;
margin: -20px 10px 0px 0px;
}

.featureicon
{
float: left;
width: 35px;
margin: 0px 10px 0px 0px;
}

.contacticon
{
float: left;
width: 35px;
margin: -10px 10px 0px 0px;
}



				
										/* LINKS  */

											

/* standard links */
.body a:link 
{
color: #4096EE;
text-decoration: none;
border-bottom: 1px dotted;
}

.body a:visited 
{
color: #4096EE;
text-decoration: none;
border-bottom: 1px dotted;
}

.body a:hover 
{
color: #fff;
background: #4096EE;
border-bottom: 1px solid #4096EE;
}

/* titles links */
.title a:link 
{
color: #4096EE;
text-decoration: none;
}

.title a:visited 
{
color: #4096EE;
text-decoration: none;
}

.title a:hover 
{
color: #fff;
background: #4096EE;
border-bottom: 1px solid #4096EE;
}