/* CSS Document */
/*----------------------------------------------------------------------------------------------------------
[Layout Stylesheet of all website pages]
Project:	VCDS
Version:	1.0
----------------------------------------------------------------------------------------------------------*/
/*------------------Layout,Table of Contents----------------------------------------------------------------- 
1. GLOBAL RESET
2. GLOBAL BASIC STYLING FOR COMMON HTML ELEMENTS
3. COMMON CSS CLASSES
4. COMMON SITE FOOTER
-----------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------
1. GLOBAL RESET
---------------------------------------------------------------------------------*/
*{
margin:0px;
padding:0px;
}
fieldset,img { 
border:0;
padding:0px;
margin:0px;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
}
a{
outline:none;
padding:0;
margin:0;
border:0;
}
input
{
outline:none;
}
/*---------------------------------------------------------------------------------
2. GLOBAL BASIC STYLING FOR COMMON HTML ELEMENTS
---------------------------------------------------------------------------------*/
h1{
font-size:20px;
color:#c30f0f;
padding:0 0 10px 0;
}
h2{
font-size:16px;
}
h3{
font-size:14px;
}
h4{
font-size:12px;
}
/*---------------------------------------------------------------------------------
3. COMMON CSS CLASSES
---------------------------------------------------------------------------------*/
body
{
background:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#222222;
}
.floatleft
{
float:left;
}
.floatright{
float:right;
}
.clear{
clear:both;
}
.jusify{
text-align:justify;
line-height:18px;
}
.grayline
{
clear:both;
margin:5px 0;
height:1px;
width:100%;
background:#b1b1b1;
}
.normalbluetext
{
font-size:12px;
color:#1c64ae;
}
.normalredlink
{
font-size:12px;
color:#a20000;
text-decoration:underline;
}
.normalredlink:hover
{
text-decoration:none;
}
.normalbluelink
{
font-size:12px;
color:#1c64ae;
text-decoration:none;
}
.normalbluelink:hover
{
text-decoration:underline;
}
.greenbold14text
{
font-size:14px;
font-weight:bold;
color:#929941;
}
.blue14text
{
font-size:14px;
font-weight:bold;
color:#1c65ae;
line-height:18px;
}
.blue16bold
{
font-size:14px;
font-weight:bold;
color:#1c65ae;
}
.greenbold14text
{
font-size:14px;
font-weight:bold;
color:#929941;
padding:10px;
}
.green12boldlink
{
font-size:12px;
font-weight:bold;
color:#929941;
text-decoration:underline;
}
.green12boldlink:hover
{
text-decoration:none;
}
.imgfloat
{
float:right;
padding:0 0 8px 8px;
}
.blue12bold
{
font-size:12px;
font-weight:bold;
color:#1c65ae;
}
.normalbold
{
font-size:12px;
font-weight:bold;
color:#222222;
}
.blue12boldlink
{
font-size:12px;
font-weight:bold;
color:#1c65ae;
text-decoration:underline;
}
.blue12boldlink:hover
{
text-decoration:none;
}
.imgborder
{
border:1px solid #b6b6b6;
padding:4px;
}
/* Padding */
.padd10
{
padding:10px;
}
.padd10top
{
padding:10px 0 0 0;
}
.padd10bottom
{
padding:0 0 10px 0;
}
.padd15bottom
{
padding:0 0 25px 0;
}
.padd10left
{
padding:0 0 0 10px;
}
.padd10leftright
{
padding:0 10px 0 10px;
}
.padd10lrb
{
padding:0 10px 10px 10px;
}
/*---------------------------------------------------------------------------------
4. INDEX CSS CLASSES
---------------------------------------------------------------------------------*/
#pagewidth
{
margin:0 auto;
width:850px;
overflow:hidden;
background:#FFFFFF;
padding:0 5px;
}
#header
{
width:100%;
height:380px;
/*height:445px;*/
}
#header .logo_panel
{
width:100%;
height:86px;
}
#header .logo_panel .logo
{
float:left;
width:40%;
}
#header .logo_panel .rightlink
{
float:right;
font-size:11px;
font-weight:bold;
text-align:right;
color:#4b4b4b;
width:40%;
padding:30px 0 0 0;
}
.logo_panel .rightlink a
{
font-size:11px;
font-weight:bold;
color:#4b4b4b;
text-decoration:none;
padding:0 5px 0 5px;
}
#header .logo_panel .rightlink a:hover
{
color:#1d65ae;
}
/* MENU CSS */

#header .toplink
{
clear:both;
height:30px;
background:url(../images/toplink_leftbg.gif) no-repeat left top ;
overflow:hidden;
padding:0px 1px;
}
.toplinks
{
display:block;
height:20px;
font-size:11px;
font-weight:bold;
color:#fefefe;
text-decoration:none;
border-right:1px solid #8db1d6;
padding:10px 0 0 0;
background:url(../images/toplink_rightbg.gif) repeat-x right top;
}
.toplinks:hover
{
background:url(../images/toplinkbg_hover.gif) repeat-x;
}
.toplinks_active
{
display:block;
height:20px;
font-size:11px;
font-weight:bold;
color:#fefefe;
text-decoration:none;
border-right:1px solid #8db1d6;
padding:10px 0 0 0;
background:url(../images/toplinkbg_hover.gif) repeat-x;
}

.topredlink
{
color:#FFFFFF;
background:url(../images/topleftlinkbg.gif) repeat-x top right;
border-right:none;
}
.toplinkleftbg
{
background:url(images/toplink_leftbg.gif) no-repeat;
}
#header .banner
{
margin:5px 0 2px 0;
width:100%;
height:200px;
background:url(../images/bannerbg.gif) repeat-x;
}
#header .banner .image
{
/*height:230px;*/
height:200px;
background:url(../images/bannerimg.jpg) no-repeat right;
}
#header .banner .clientsimage
{
height:200px;
background:url(../images/bannerimg_clients.jpg) no-repeat right;
}
#header .banner .designimage
{
height:200px;
background:url(../images/bannerimg_design.jpg) no-repeat right;
}
#header .banner .marketingimage
{
height:200px;
background:url(../images/bannerimg_marketing.jpg) no-repeat right;
}
#header .banner h1
{
font-size:24px;
font-weight:bold;
color:#FFFFFF;
padding:20px 0 0 20px;
}
#header .banner .greentext
{
color:#cfd48f;
}
#header .banner .text36
{
font-size:34px;
}
#header .banner h2
{
font-size:14px;
font-weight:bold;
color:#fbf5c2;
line-height:24px;
padding:40px 0 0 20px;
}
#header .bannertext
{
font-size:12px;
font-weight:bold;
line-height:18px;
color:#3f3f3f;
height:46px;
border-bottom:1px solid #828282;
background:#f1f5f8;
padding:10px 15px 0 15px;
}
#header .bannertext .redtext
{
color:#a20000;
}
/* middle starts here */
#middle_container
{
margin:8px 0 0 0;
width:100%;
overflow:hidden;
border-top:3px solid #3779bf;
}
.content_container
{
width:100%;
overflow:hidden;
}
.content_container h3
{
font-size:14px;
font-weight:bold;
color:#7e8718;
padding:10px 0 10px 0;
}
.content_container p
{
line-height:18px;
}
.companies
{
float:left;
width:29%;
overflow:hidden;
padding:0 0 0 15px;
}
.companies ul
{
list-style:none;
}
.companies li
{
font-size:12px;
color:#006579;
background:url(../images/icn_greentick.gif) no-repeat 0 2px;
padding:0 0 6px 20px;
}
.graydevider
{
float:left;
width:2%;
height:245px;
background:url(../images/graydevider.gif) no-repeat;
}
.services
{
float:left;
width:29%;
overflow:hidden;
padding:0 0 0 15px;
}
.services ul
{
list-style:none;
}
.services li
{
font-size:12px;
color:#006579;
background:url(../images/icn_greendott.gif) no-repeat 2px 2px;
padding:0 0 6px 20px;
}
.services li a
{
color:#006579;
text-decoration:none;
}
.services li a:hover
{
text-decoration:underline;
}
.customer
{
float:left;
width:32%;
overflow:hidden;
padding:0 0 0 15px;
}
.customer p
{
font-size:12px;
color:#483a03;
line-height:16px;
}
.customer .morelink
{
clear:both;
float:right;
font-size:12px;
color:#245087;
text-decoration:underline;
padding:0 20px 10px 0;
}
.customer .morelink:hover
{
text-decoration:none;
}
#servicebox_panel
{
width:99%;
overflow:hidden;
padding-left:10px;
}
#servicebox_panel .greenboxbg
{
float:left;
width:32%;
margin:5px 12px 0 0;
padding:0px 0 0 0;
background:url(../images/servicebox_greenbg.gif) no-repeat top left;
}
#servicebox_panel .greenboxtop
{
background:url(../images/servicebox_greenbg_right.gif) no-repeat top right;
height:5px;
}
#servicebox_panel .greenbox
{
height:240px;
border-bottom:1px solid #3779bf;
border-left:1px solid #3779bf;
border-right:1px solid #3779bf;
}
#servicebox_panel .blueboxbg
{
float:left;
width:32%;
margin:5px 12px 0 0;
background:url(../images/servicebox_bluebg.gif) no-repeat top left;
}
#servicebox_panel .blueboxtop
{
background:url(../images/servicebox_bluebg_right.gif) no-repeat top right;
height:5px;
}
#servicebox_panel .bluebox
{
height:240px;
border-bottom:1px solid #3779bf;
border-left:1px solid #3779bf;
border-right:1px solid #3779bf;
}
#servicebox_panel .greenbox h2
{
display:block;
height:26px;
font-size:14px;
font-weight:bold;
color:#7e8718;
padding:8px 0 0 40px;
}
#servicebox_panel .greenbox h2 a
{
font-size:14px;
font-weight:bold;
color:#7e8718;
text-decoration:none;
}
#servicebox_panel .greenbox h2 a:hover
{
color:#433e2f;
}
#servicebox_panel .bluebox h2
{
display:block;
height:26px;
font-size:14px;
font-weight:bold;
color:#1e66b0;
padding:8px 0 0 40px;
}
#servicebox_panel .bluebox h2 a
{
font-size:14px;
font-weight:bold;
color:#1e66b0;
text-decoration:none;
}
#servicebox_panel .bluebox h2 a:hover
{
color:#433e2f;
}
#servicebox_panel p
{
font-size:12px;
color:#222222;
padding:8px 15px 8px 15px;
}
#servicebox_panel h3
{
font-size:14px;
font-weight:bold;
color:#9e1b0d;
text-align:center;
}
#servicebox_panel .morelink
{
float:right;
font-size:11px;
color:#245087;
text-decoration:underline;
background:url(../images/icn_more.gif) no-repeat 0 0px;
padding:0 15px 10px 20px;
vertical-align:bottom;
}
#servicebox_panel .morelink:hover
{
text-decoration:none;
}
/* servicebox h2 icons */
#servicebox_panel .greenbox .icn_webdesign
{
background:url(../images/icn_webdesign.gif) no-repeat 10px 4px #f0f1e6;
}
#servicebox_panel .greenbox .icn_email
{
background:url(../images/icn_email.gif) no-repeat 10px 6px #f0f1e6;
}
#servicebox_panel .greenbox .icn_searchengine
{
background:url(../images/icn_searchengine.gif) no-repeat 10px 4px #f0f1e6;
}
#servicebox_panel .bluebox .icn_ecommerce
{
background:url(../images/icn_ecommerce.gif) no-repeat 10px 4px #e3ebf4;
}
#servicebox_panel .bluebox .icn_hosting
{
background:url(../images/icn_hosting.gif) no-repeat 10px 4px #e3ebf4;
}
#servicebox_panel .bluebox .icn_seo
{
background:url(../images/icn_seo.gif) no-repeat 10px 4px #e3ebf4;
}
#servicebox_panel .greenbox .icn_identity
{
background:url(../images/icn_identity.gif) no-repeat 10px 4px #f0f1e6;
}
#servicebox_panel .greenbox .icn_multimedia
{
background:url(../images/icn_multimedia.gif) no-repeat 10px 4px #f0f1e6;
}
#servicebox_panel .greenbox .icn_webdevelopment
{
background:url(../images/icn_webdevelopment.gif) no-repeat 10px 4px #f0f1e6;
}
#submit_panel_outer
{
width:98%;
padding:0px 10px;
overflow:hidden;
}
#submit_panel
{
float:left;
margin:10px 0 0 0;
width:47%;
height:367px;
overflow:hidden;
background:#d5e2f0;
padding:15px 15px 0px 15px;
}
 
#submit_panel h2
{
font-size:14px;
font-weight:bold;
color:#1e66b0;
padding:0px;
margin:0px;
}
#submit_panel p
{
font-size:12px;
color:#222222;
padding:8px 0 6px 0;
margin:0px;
}
#submit_panel .redtext
{
color:#6c2c1f;
}
#submit_panel .inputpanel
{
width:98%;
padding:8px 0 0 15px;
}
#submit_panel .inputpanel label
{
float:left;
width:104px;
font-size:12px;
color:#1e66b0;
padding:2px 0 0 0;
margin:0px;
}
#submit_panel .inputpanel input, textarea
{
font-size:11px;
color:#222222;
width:145px;
height:17px;
border:1px solid #7f9db9;
padding:2px 0 0 0;
margin:0px;
}
#submit_panel .btn_yellow
{
font-size:12px;
font-weight:bold;
color:#fefefe;
width:65px;
height:25px;
border:none;
background:url(../images/btn_yellowbg.gif) repeat-x;
margin:10px 0 0 120px;
}

#onlinepresence
{
float:right;
margin:10px 0 0 0;
width:45%;
height:367px;
overflow:hidden;
background:#f1f5f8;
padding:15px 10px 0px 10px;
}
#onlinepresence h2
{
font-size:14px;
font-weight:bold;
color:#1e66b0;
padding:0;
margin:0;
}
#onlinepresence span
{
display:block;
font-size:12px;
color:#222222;
padding:5px 0 15px 0;
}
#onlinepresence p
{
font-size:12px;
color:#222222;
line-height:18px;
padding:0 0 15px 25px;
background:url(../images/icn_lightgreen.gif) no-repeat 5px 4px;
}
/* Inner Pages */

#breadcrumb
{
width:99%;
overflow:hidden;
padding:5px 0 10px 8px;
}
#breadcrumb a
{
float:left;
font-size:12px;
color:#a20000;
text-decoration:none;
padding:0 10px 0 0;
background:url(../images/icn_breadcrumb.gif) no-repeat right center;
}
#breadcrumb a:hover
{
text-decoration:underline;
}
#breadcrumb p
{
font-size:12px;
color:#5f5c00;
line-height:normal;
padding:0 0 0 10px;
}
#breadcrumbnew
{
width:40%;
float:right;
overflow:hidden;
padding:20px 8px 0px 8px;
text-align:right;
}
#breadcrumbnew a
{
font-size:12px;
color:#a20000;
text-decoration:none;
padding:0 10px 0 0;
background:url(../images/icn_breadcrumb.gif) no-repeat right center;
}
#breadcrumbnew a:hover
{
text-decoration:underline;
}
#breadcrumbnew span
{
font-size:12px;
color:#5f5c00;
line-height:normal;
padding:0 0 0 4px;
}
.content_container h1
{
display:block;
height:24px;
font-size:15px;
font-weight:bold;
color:#929941;
background:#f1f5f8;
margin:0 0 0 0px;
padding:5px 0 0 10px;
border-bottom:1px solid #d6e5f0;
}
.content_container h2
{
font-size:14px;
font-weight:bold;
color:#a20000;
margin:0 0 0 10px;
padding:5px 0 5px 0;
}
/* Pagination */
.pagination
{
margin:10px 0 10px 0;
width:99%;
height:28px;
background:#f0f0f1;
padding:7px 15px 0 0;
text-align:right;
}
.pagination .buttons
{
float:right;
height:18px;
border:1px solid #d4d4d4;
font-size:12px;
color:#404040;
text-align:center;
background:#FFFFFF;
padding:2px 10px 0 10px;
}
.pagination .buttons a
{
text-decoration:none;
color:#404040;
}
.pagination .buttons a:hover
{
color:#b30202;
}
.pagination .pages
{
float:right;
margin:4px 15px 0 15px;
width:75px;
font-size:12px;
color:#1c65ae;
}
.pagination .pages .active
{
color:#b30202;
}
.pagination .pages a
{
color:#1c65ae;
text-decoration:none;
}
.pagination .pages a:hover
{
color:#b30202;
}
#portfolio_panel
{
width:94%;
overflow:hidden;
padding:0 10px 0 10px;
}
#portfolio_panel .portfolo
{
float:left;
margin:0 2% 1% 0;
width:32%;
overflow:hidden;
}
#portfolio_panel .portfolo .bluelink
{
font-size:14px;
font-weight:bold;
color:#1c65ae;
text-decoration:underline;
}
#portfolio_panel .portfolo .bluelink:hover
{
text-decoration:none;
}
#portfolio_panel .portfolo img
{
margin:10px 0 10px 0;
padding:4px;
border:1px solid #b6b6b6;
}
#portfolio_panel .portfolo .graybold
{
font-size:12px;
font-weight:bold;
color:#3a3a3a;
padding:0 0 5px 0;
}
#portfolio_panel .portfolo .normaltext
{
font-size:12px;
font-weight:normal;
color:#3a3a3a;
}
#portfolio_panel .portfolo .smallgreenlink
{
font-size:12px;
font-weight:normal;
color:#646b0f;
text-decoration:none;
}
#portfolio_panel .portfolo .smallgreenlink:hover
{
text-decoration:underline;
}
#portfolio_panel .portfolo .greenlink
{
font-size:12px;
font-weight:bold;
color:#768116;
text-decoration:underline;
}
#portfolio_panel .portfolo .greenlink:hover
{
text-decoration:none;
padding:5px 0 10px 0;
}
.content_container .green14bold
{
font-size:14px;
font-weight:bold;
color:#929941;
}
.content_container .icn_graphic
{
background:url(../images/icn_graphic.gif) no-repeat 0 2px;
padding:5px 0 5px 35px;
}
.content_container .icn_print
{
background:url(../images/icn_print.gif) no-repeat 0 2px;
padding:5px 0 5px 35px;
}
.content_container .icn_branding
{
background:url(../images/icn_brand.gif) no-repeat 0 2px;
padding:5px 0 5px 35px;
}
.webservice
{
width:940px;
padding:0 10px 0 10px;
overflow:hidden;
}
.webservice ul
{
list-style:none;
padding:10px 0 10px 0;
}
.webservice li
{
font-size:12px;
color:#1c65ae;
background:url(../images/icn_lightgreentick.gif) no-repeat 0 2px;
padding:0 0 6px 20px;
}
.domainareas
{
margin:8px 0 10px 0;
width:98%;
padding:20px 10px 10px 10px;
overflow:hidden;
background:url(../images/img_domainarea.jpg) no-repeat top right #f7f7f7;
border-bottom:1px solid #b1b1b1;
}
.domainareas ul
{
float:left;
width:45%;
list-style:none;
}
.domainareas li
{
font-size:11px;
color:#515151;
font-weight:bold;
background:url(../images/icn_lightgreentick.gif) no-repeat 0 2px;
padding:0 0 6px 20px;
}
.designplans
{
float:left;
margin:10px 2% 10px 0;
width:32%;
height:212px;
overflow:hidden;
background:url(../images/bg_designplans.jpg) repeat-x;
}
.designplansbg2
{
background:url(../images/bg_designplans2.jpg) repeat-x;
}
.designplansbg3
{
background:url(../images/bg_designplans3.jpg) repeat-x;
}
.designplans h2
{
font-size:16px;
font-weight:bold;
text-align:center;
margin:0 0 10px 0;
}
.designplans .redcolor
{
color:#8f3b3b;
}
.designplans .graycolor
{
color:#5f5f5f;
}
.designplans .bluecolor
{
color:#3a80b5;
}
.designplans .bluebg
{
background:#9dbac4;
}
.designplans .greebg
{
background:#c8d3c1;
}
.designplans .graybg
{
background:#d1d1d1;
}
.designplans p
{
width:283px;
font-size:12px;
color:#4b4b4b;
padding:0 15px 2px 15px;
}
.designplans .bluelink
{
display:block;
font-size:14px;
font-weight:bold;
color:#1c65ae;
text-decoration:underline;
margin:10px 0 8px 15px;
}
.designplans .bluelink:hover
{
text-decoration:none;
}
.designplans .greenlink
{
display:block;
font-size:16px;
font-weight:bold;
color:#929941;
text-align:center;
text-decoration:underline;
margin:10px 0 8px 15px;
}
.designplans .greenlink:hover
{
text-decoration:none;
}
/* Web hosting */
.hostingplans
{
float:left;
margin:1% 2% 0 0;
width:32%;
height:165px;
overflow:hidden;
border-bottom:1px solid #b1b1b1;
background:url(../images/bg_designplans.jpg) repeat-x;
}
.hostingplans2
{
background:url(../images/bg_designplans2.jpg) repeat-x;
}
.hostingplans3
{
background:url(../images/bg_designplans3.jpg) repeat-x;
}
.hostingplans .h2bluebg
{
background:#9dbac4;
}
.hostingplans .h2greenbg
{
background:#c8d3c1;
}
.hostingplans .h2graybg
{
background:#d1d1d1;
}
.hostingplans .redcolor
{
color:#8f3b3b;
}
.hostingplans .graycolor
{
color:#5f5f5f;
}
.hostingplans .bluecolor
{
color:#3a80b5;
}
.hostingplans h2
{
font-size:16px;
font-weight:bold;
text-align:center;
margin:0 0 10px 0;
}
.hostingplans p
{
width:283px;
font-size:12px;
color:#4b4b4b;
padding:0 15px 0 15px;
}
.hostingplans_panel
{
clear:both;
width:100%;
overflow:hidden;
margin:1% 0 2% 0;
}
.hostingplans_panel .plan
{
float:left;
margin:0 2% 0 0;
width:32%;
height:355px;
border-bottom:1px solid #b1b1b1;
background:#e8edf2;
}
.hostingplans_panel .plan2
{
background:#f5f9f0;
}
.hostingplans_panel .plan3
{
background:#f6f6f6;
}
.hostingplans_panel p
{
font-size:12px;
color:#4b4b4b;
padding:0 0 2px 0;
}
.hostingplans_panel .content1
{
float:left;
width:60%;
padding:15px 0 15px 15px;
}
.hostingplans_panel .content2
{
float:left;
width:10%;
padding:15px 0 15px 15px;
}
.hostingplans_panel .greenlink
{
clear:both;
font-size:16px;
font-weight:bold;
color:#929941;
text-decoration:underline;
margin:0 0 0 98px;
}
.hostingplans_panel .greenlink:hover
{
text-decoration:none;
}
/*---------------------------------------------------------------------------------
4. COMMON SITE FOOTER
---------------------------------------------------------------------------------*/
#footer
{
margin:8px 0 0 0;
width:100%;
height:70px;
font-size:11px;
font-weight:bold;
color:#222222;
line-height:20px;
text-align:center;
overflow:hidden;
border-top:3px solid #3779bf;
}
#footer a
{
color:#222222;
text-decoration:none;
padding:0 7px 0 7px;
}
#footer a:hover
{
color:#1e66b0;
}
#footer .copyright
{
font-size:11px;
font-weight:normal;
color:#1c65ae;
padding:5px 0 0 0;
}