/* CSS Document */
/* Connect Internet Solutions Limited */
/* Created by Ian Walker */
/* October 2008 */


/* General CSS
----------------------*/
body { background-color: #fff; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-family:Arial, Helvetica, sans-serif; font-size:100%; font-weight: normal; color: #333;}
a {color:#333; text-decoration:none; font-weight:bold;}
a:hover {text-decoration:underline; font-weight:bold;}
form { padding: 0; margin: 0; }

/* Overall Container DIV
----------------------*/
.container { float:left; position:relative; width:100%; background-color:#333333; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
.hold { float:left; position: relative; width: 100%; padding: 0px 0px 0px 0px;  margin: 0px 0px 30px 0px; background-color: #fff;}

/* Navigation 
----------------------*/
.navholder { float:right; position:relative; padding: 0px; margin: 0px; width:650px;}
.basicnav { float:right; position:relative; padding: 0px; margin: 0px; width:650px; color:#fff; font-size:70%; color:#FFFFFF}
.basicnav ul { float:right; position:relative; padding: 5px 0px 5px 0px; margin:0px; list-style:none;}
.basicnav li { padding: 0px 0px 0px 3px; margin: 0px 0px 0px 0px; display:inline; list-style-type: none; color: #fff; }
.basicnav a { color:#ccc; text-decoration:none; font-weight:normal;}
.basicnav a:hover { color:#fff; text-decoration:underline; font-weight:normal;}
.mainnav { float:right; position:relative; padding: 0px; margin: 0px; width:485px;}
.mainnav ul { float:right; position:relative; padding: 0px; margin: 66px 0px 0px 0px; width:485px;}
.mainnav li { float:left; position:relative; background-color: #fff; background-image: url(/img/mainnavtop.gif); background-repeat:no-repeat; background-position: top right; padding: 8px 0px 8px 0px; margin: 0px 0px 0px 1px; display:inline; list-style-type: none; color: #333; text-align:center; width:120px}
.mainnav a { color:#333; text-decoration:none; font-weight:normal;}

/* Positioning DIVs 
----------------------*/
/* Header */
.header { position: relative; width: 900px; padding: 0px 0px 0px 0px;  margin-bottom: 0px; margin-left: auto; margin-right: auto; background-color: #333;}
.logo { float:left; position:relative; padding: 0px; margin: 0px; width:150px;}
/* Flash Feature */
.feature { position: relative; width: 900px; padding: 0px 0px 0px 0px; top:30px; margin-bottom:30px; margin-left:auto; margin-right:auto;}
/* Holders */
.holder { position: relative; width: 900px; padding: 0px 0px 0px 0px; top:30px; margin-bottom:0px; margin-left:auto; margin-right:auto;}
.holderleft { float:left; position: relative; width: 435px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.holderright { float:right; position: relative; width: 445px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
/* Columns */
.column1 { float:left; position: relative; width: 190px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.column2 { float:right; position: relative; width: 225px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.column3 { float:left; position: relative; width: 225px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.column4 { float:right; position: relative; width: 200px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-top: 1px solid #CCCCCC;}

/* Footer */
.footer { float:left; position: relative; width: 100%; padding: 10px 0px 10px 0px;  margin: 20px 0px 0px 0px;  color:#fff;  background-color: #333; font-size:70%;}
.footer a {color:#CCCCCC;}
.footerhold { width: 900px; padding: 0px 0px 0px 0px;  margin-left: auto; margin-right: auto; }
.footerblock { float:left; position: relative; width:182px; border-left:1px solid #fff; padding: 0px 5px 0px 5px; margin: 10px 0px 10px 0px;}
.footerblock a { color:#ccc; text-decoration:none; font-weight:normal;}
.footerblock ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width:182px;}
.footerblock li { float:left; position:relative; padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px; list-style-type: none; color:#fff; text-align:left; width:182px}
.footerblock2 { float:left; position: relative; width:120px; border-left:1px solid #fff; padding: 0px 0px 0px 5px; margin: 10px 0px 10px 0px;}
.footerblock2 img { border:0px solid #333; padding: 5px 0px 5px 0px; margin: 0px 0px 0px 0px;}
.footerblock2 a { color:#ccc; text-decoration:none; font-weight:normal;}
.footerblock2 ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width:120px;}
.footerblock2 li { float:left; position:relative; padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px; list-style-type: none; color:#fff; text-align:left; width:120px}
.copyright {width: 900px; padding: 15px 0px 5px 0px;  margin-left: auto; margin-right: auto; }
/* Individual DIVs 
----------------------*/
.welcome { float:left; position: relative; font-size:70%; line-height:150%; margin:0px 0px 0px 0px; padding:0px 0px 15px 0px;}
/* Tagcloud */
.tagcloud { float:left; position: relative; font-size:70%; width: 190px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-top: 1px solid #CCCCCC; line-height:180%}
.tagcloud strong { color:#FFCC00; padding: 10px 0px 5px 0px; display:block;}
.tagcloud ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 10px 0px 0px 0px;}
.tagcloud li { float:left; position:relative; width: 180px; padding: 8px 0px 8px 10px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-top: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; background-image: none; background-repeat:no-repeat; background-position:center left}
/* Articles - Press Releases, Case Studies, Featured Work, MicroBlog & Blog */
.article { float:left; position: relative; font-size:70%; width: 205px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; border-top: 1px solid #CCCCCC; line-height:130%; background-color:#F2F2F2;}
.article a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; display:block;}
.article_closed { float:left; position: relative; font-size:70%; width: 205px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; border-top: 1px solid #CCCCCC; line-height:130%; background-color:#FFF;}
.article_closed a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; display:block;}
.article_links { float:left; position: relative; font-size:70%; width: 225px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-top: 0px solid #CCCCCC; line-height:130%; background-color:#FFF;}
.article_links ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 225px;}
.article_links li { float:left; position:relative; width: 215px; padding: 8px 0px 8px 10px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-top: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; background-image:none; background-repeat:no-repeat; background-position:center left}
.article_links li.cs_links{ float:left; position:relative; width: 215px; padding: 8px 0px 8px 10px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-top: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; background-image: url(/img/cs_bullet.gif); background-repeat:no-repeat; background-position:center left}
.article_links li.pr_links{ float:left; position:relative; width: 215px; padding: 8px 0px 8px 10px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-top: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; background-image: url(/img/pr_bullet.gif); background-repeat:no-repeat; background-position:center left}

/* -- */
.microblogtext { padding: 0px 0px 0px 0px; line-height:120%; margin: 10px 0px 10px 0px; display:block;}
.microblogtext a { color:#663399; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
/* Section Headings */
.tc {font-weight:bold; color:#FFCC00;}
.pr {font-weight:bold; color:#CC0000;}
.cs {font-weight:bold; color:#006699;}
.fw {font-weight:bold; color:#339900;}
.mb {font-weight:bold; color:#663399;}
.bl {font-weight:bold; color:#FF6600;}
/* Intelligenet Search */
.intellsearch { float:left; position: relative; font-size:70%; width: 200px; padding: 0px 0px 15px 0px; margin: 0px 0px 0px 0px; border-top: 0px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; line-height:130%;}
.intellsearch strong { color:#006699; padding: 10px 0px 5px 0px; display:block;}
/* Select & Search Boxes --- Form Elements */
.selectbox { margin:5px 0px 5px 0px; padding:2px 2px 2px 2px; font-size:100%; width:200px; border: 1px solid #7f9db9; color:#999999; font-style:normal}
.searchbox { margin:5px 0px 5px 0px; padding:2px 4px 2px 4px; font-size:100%; width:190px; border: 1px solid #7f9db9; color:#999999; font-style:normal}
.gobutton { margin:5px 0px 5px 0px; padding:0px 0px 0px 0px; }
/* Talk to Us */
.talktous { float:left; position: relative; font-size:70%; width: 200px; padding: 0px 0px 15px 0px; margin: 0px 0px 0px 0px; border-top: 0px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; line-height:130%;}
.talktous strong { color:#006699; padding: 10px 0px 5px 0px; display:block;}

/* ListPage & ArticlePage DIVs 
------------------------------*/

/* Positioning DIVs 
----------------------*/
.breadcrumbholder { float:left; position: relative; width: 900px; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;  border-bottom: 1px solid #CCCCCC;}
.subholderleft { float:left; position: relative; width: 190px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.subholderright { float:right; position: relative; width: 690px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.leftsidebar { float:left; position: relative; width: 190px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.centrebar { float:left; position: relative; width: 460px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.rightsidebar { float:right; position: relative; width: 200px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }

/* Individual DIVs 
----------------------*/
/* Breadcrumb */
/* Left */
.breadcrumbleft { float:left; position: relative; width: 680px; padding: 0px 0px 8px 0px; margin: 0px 0px 0px 0px; font-size:70%;}
.breadcrumbleft strong { font-weight:bold; }
.breadcrumbleft a {color:#CC0000; text-decoration:none;}
.breadcrumbleft a:hover {text-decoration:underline;}
/* Right */
.breadcrumbright { float:right; position: relative; width: 200px; padding: 0px 0px 11px 0px; margin: 0px 0px 0px 0px; font-size:70%;}
.breadcrumbright strong { font-weight:bold; }
/* Breadcrumb  ------  Link style is based in separate css file  ------  */
.breadcrumbright a {color:#006699; text-decoration:none;}
.breadcrumbright a:hover {text-decoration:underline;}
/* SubNavigation */
.subnavigation { float:left; position: relative; font-size:70%; width: 200px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-top: 0px solid #CCCCCC; line-height:100%; }
.subnavigation ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 200px;}
.subnavigation li { float:left; position:relative; width: 178px; padding: 11px 0px 11px 0px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-bottom: 1px solid #CCCCCC;}
.subnavigation li ul    { float:left; margin: 11px 0px -11px 0px;}
.subnavigation li ul li { float:left; position:relative; width: 150px; padding: 11px 13px 11px 15px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-top: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC; background-color:#f2f2f2;}




/* List Page DIVs 
----------------------*/
/* List Item */
.listitem_open{ float:left; position: relative; font-size:70%; width: 450px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; border-bottom: 1px solid #CCCCCC; line-height:130%; background-color:#F2F2F2;}
.listitem_open a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; }
.listitem_open p { padding: 10px 0px 10px 0px; margin: 0px 0px 0px 0px;}
.listitem_open img {float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 10px 0px 0px; border:1px solid #CCCCCC;}
.listitem_closed { float:left; position: relative; font-size:70%; width: 450px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; border-bottom: 1px solid #CCCCCC; line-height:130%; background-color:#FFF;}
.listitem_closed a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; }
.date {font-weight:bold; color:#CC0000;}
.listitem_closed p { padding: 10px 0px 10px 0px; margin: 0px 0px 0px 0px;}
/* Action Button  ------  Action style is based in separate css file ----- */
.action { position: absolute; top: 10px; right: 10px; width: 11px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background-image:url(/img/index_close.gif); background-repeat:no-repeat; }
.action a { float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px solid #FFFFFF;}
.action img { float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px solid #000000; }
/* Date  ------  Date style is based in separate css file ----- */

/* Article Page DIVs 
----------------------*/
.news_header{ float:left; position: relative; width: 450px; padding: 10px 0px 10px 0px; margin: 0px 0px 0px 0px; border-bottom: 1px solid #CCCCCC; background-color:#fff;}
.news_header H1 {font-size:120%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; line-height:130%;}
.news {float:left; position: relative; width: 450px; padding: 10px 0px 10px 0px; margin: 0px 0px 0px 0px; background-color:#fff; font-size:70%; line-height:150%;}
.news a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; }
.news ul { padding: 0px; margin: 10px 0px 10px 0px; width:450px;}
.news ol { width:425px; padding-left: 25px; margin: 10px 0px 10px 0px; }
.news ul li { width:425px; background-image:url(/img/bullet.gif); background-repeat:no-repeat; background-position: 0px 0px; padding-left: 15px; margin: 5px 0px 5px 0px; list-style-type:none;}
.news object { margin-top: 10px; margin-bottom: 10px; display: block;}
.news embed { margin-top: 10px; margin-bottom: 10px; display: block;}
.news img { border: 1px solid #cccccc; margin: 10px 0px 10px 0px;}

/* News Table */
.news table { position: relative; float: left; width: 100%; color: #333333; font-size: 100%; margin: 10px 0px 10px 0px;}
.news table td { color: #333333; font-size: 100%; padding: 5px 3px 5px 3px; background-color:#F2F2F2;}
.news table td.caption { color: #333333; font-size: 100%; padding: 0px 0px 0px 0px;}
.news table td label { color: #333333; font-size: 100%; font-weight: bold;}
.news table td input { color: #333333; font-size: 100%; }
.news table td textarea { color: #333333; font-size: 100%; }
.news table th { background-color:#E8E8E8;}

/* Related Links */
.relatedlinks { float:left; position: relative; font-size:70%; width: 200px; padding: 00px 0px 00px 0px; margin: 40px 0px 10px 0px; border-top: 0px solid #CCCCCC; line-height:130%; }
.relatedlinks strong { color:#006699; padding: 10px 0px 5px 0px; display:block;}
.relatedlinks ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 200px;}
.relatedlinks li { float:left; position:relative; width: 178px; padding: 11px 0px 11px 0px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-bottom: 1px solid #CCCCCC;}
.relatedlinks a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 0px 0px; display:block;}

/* Animate */
.animate { background-color:#FFF;}
.imgclear { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}

/* Twitter */
.twitter {float:left; position: relative; width: 205px; padding: 10px 0px 10px 0px; margin: 0px 0px 0px 0px;}
.twittertop { width: 205px; padding: 18px 0px 0px 0px; margin: 0px 0px 0px 0px; background-image:url(/img/mbtop_smallalt.gif); background-position:bottom; background-repeat:no-repeat}
.twittermiddle { width: 183px; padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px; border-right:1px solid #ccc; border-left:1px solid #ccc; text-align:center; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#333333; line-height:140%; border-top:0px solid #ccc; border-bottom:0px solid #ccc;}
.twittermiddle a {color:#663399; font-weight:bold; text-decoration:none}
.twittermiddle a:hover, .twittermiddle a:link, .twittermiddle a:visited, .twittermiddle a:active {text-decoration:underline; color:#663399;}
.twitterbottom { width: 205px; padding: 5px 0px 0px 0px; margin: 0px 0px 0px 0px; background-image:url(/img/mbbottom_smallalt.gif); background-position:top; background-repeat:no-repeat}
.twitterdetails {float:left; position: relative; width: 185px; padding: 6px 10px 6px 10px; margin: 0px 0px 0px 0px; text-align:center; font-size:100%; background-color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:70%; color:#333333; border-bottom: 1px dotted #ccc;}
.twitterdetails a {color:#663399; font-weight:bold; text-decoration:none}
.twitterdetails a:hover, .twitterdetails a:link, .twitterdetails a:visited, .twitterdetails a:active {text-decoration:underline; color:#663399;}
.twitterdate {color:#663399}
/* Twitter holder */
.tweets{ float:left; position: relative; font-size:70%; width: 205px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; border-top: 1px solid #CCCCCC; line-height:100%; background-color:#F2F2F2;}
.tweets a {line-height:110%; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; }




/* Client Area */
.breadcrumbholderclient { float:left; position: relative; width: 900px; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;  background-color:#EAF3E9; border-bottom:1px solid #ccc;}
.breadcrumbleftclient 	{ float:left; position: relative; width: 890px; padding: 8px 0px 8px 10px; margin: 0px 0px 0px 0px; font-size:90%; font-weight:bold;}
.breadcrumbleftclient strong { font-weight:bold; }
.breadcrumbleftclient a {color:#CC0000; text-decoration:none;}
.breadcrumbleftclient a:hover {text-decoration:underline;}
/* SubNavigation */
.subnavigationclient { float:left; position: relative; font-size:70%; width: 200px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-top: 0px solid #CCCCCC; line-height:100%; }
.subnavigationclient  ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 200px;}
.subnavigationclient  li { float:left; position:relative; width: 178px; padding: 11px 0px 11px 11px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-bottom: 1px solid #CCCCCC; line-height:130%; font-weight:bold;}
.subnavigationclient em {color:#006699; font-style:italic;}
.subnavigationclient a { color:#339900; text-decoration:underline;}
.subnavigationclient a:hover { color:#339900; text-decoration:none;}

.greylinkitalic {color:#999999; text-decoration:underline; font-style:italic;}
/* Central Column */
.client { float:left; position: relative; font-size:70%; width: 450px; padding: 10px 10px 10px 10px; margin: 10px 0px 0px 0px; border: 1px solid #D2E2E6; line-height:130%;}
.client img {float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 10px 0px 0px; border:1px solid #CCCCCC;}
.client ul { float:left; position:relative; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 330px;}
.client li { float:left; position:relative; width: 324px; padding: 7px 0px 7px 11px; margin: 0px 0px 0px 0px; list-style-type:none; color: #333; border-bottom: 1px solid #CCCCCC; line-height:130%; font-weight:bold;}
.clientbar { float:left; position: relative; font-size:70%; width: 450px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px; background-color: #D2E2E6; border: 1px solid #D2E2E6; line-height:130%;}
/* Development Stage */
.stage { float:left; position: relative; width: 470px; padding: 0px 0px 0px 0px; margin: 10px 0px 10px 0px; line-height:130%;}
.stage caption { font-weight:bold; color:#339900; font-size:120%; caption-side: top; width: auto; text-align: left}
.stage table { float:left; position: relative; width: 100%; font-size:70%; }
.stage table a {color:#006699;}
.stage table tr {width: 100%;}
.stage table th {background-color:#F2F2F2; text-align:left; padding:6px; width:35%;}
.stage table td {background-color:#F2F2F2; padding:6px; width:65%;}
.stage table td.alt {background-color:#fff9e8; padding:6px; width:65%;}
/* Back to Connect Link */
.clientnav { float:right; position:relative; padding: 0px; margin: 0px; width:485px;}
.clientnav ul { float:right; position:relative; padding: 0px; margin: 70px 0px 0px 0px; width:485px;}
.clientnav li { float:right; position:relative; background-color: #fff; background-image: url(/img/mainnavtop.gif); background-repeat:no-repeat; background-position: top right; padding: 8px 0px 8px 0px; margin: 0px 0px 0px 1px; display:inline; list-style-type: none; color: #333; text-align:center; width:120px; font-size:80%;}
.clientnav a { color:#333; text-decoration:none; font-weight:normal;}


.stafftitle { float:left; position: relative; font-weight:bold; color:#339900; font-size:90%; margin: 0px 0px 0px 0px; padding: 10px 0px 10px 0px; width: 200px;}
.staff { float:left; position: relative; font-size:70%; width:180px; padding: 10px 10px 10px 10px; margin: 0px 0px 1px 0px; background-color:#F2F2F2; border-bottom: 1px solid #CCC; line-height:130%;}
.staff img { float:left; position: relative; border: 1px solid #ccc; margin: 0px 8px 0px 0px; padding: 0px 0px 0px 0px;}