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


/*
COLORS:
yellow: #ffcc00 

*/

*
{
padding:0;
margin:0;
}

html, body{
	background: #000;
	height:100%;
}

body
{
text-align:center;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
color:#999999;
background:#000000 url(../images/bg-body.jpg) no-repeat center top;
}

.clear { clear: both; }

.wrapper
{
text-align:left;
margin:0 auto;
width:935px;
min-height:100%;
height:auto !important;
}

label, input.txt-field, textarea.textarea  {font-size:12px; font-family:Arial, Helvetica, sans-serif;}
textarea {overflow:auto;}
label 
{
color:#999999;
line-height:22px;
margin-right:4px;

}
input.txt-field
{
border:1px solid #585858;
background-color:#1d1d1d;
color:#999999;
padding:0 3px;
width:218px;
width:212px;
height:22px;
padding-top:4px;
height:18px;
/*font-weight:bold;*/
}



textarea.textarea 
{
border:1px solid #585858;
background-color:#1d1d1d;
padding:4px 3px;
width:212px;
height:100px;
color:#999999;
}

textarea.bigger {width:400px;}
input.txt-field-active, textarea.textarea-active  {border:1px solid #ffcc00;}

input.txt-field:focus, textarea.textarea:focus {border:1px solid #ffcc00;}

h1, h2, h3, h4, h5 {margin-top:3px; color:#4c4c4c;}

h1
{
font-size:20px;
margin-bottom:0.8em;
font-weight:normal;
color:#FFFFFF;
text-transform:uppercase;

}

h1.hservice-m {
    text-transform: none;
}

h2
{
font-size:18px;
margin-bottom:0.8em;
font-weight:normal;
color:#FFFFFF;
}

h3
{
font-size:18px;
margin-bottom:0.8em;
font-weight:normal;
color:#4c4c4c;
}

h4
{
font-size:15px;
margin-bottom:0.8em;
font-weight:bold;
}


h5{font-size:12px; margin-bottom:0.8em; line-height:23px; font-weight:normal; color:#999999;}


a {color:#00000; text-decoration:none; /*font-weight:bold;*/}
a:hover {text-decoration:none;}
a:focus { outline: none; }/*Fix the Firefox outlined-link issue*/
p a {/*font-weight:bold;*/ }

a.plain {color:#666666; font-weight:normal;}

a.requestquote, a.requestquote2, a.viewportfolio, a.readmore, a.viewexamples, a.launchsite, a.casestudies,a.webdesign, a.ecommerce, a.customization, a.maintenance
{
background:url(../images/btn-request-a-quote.gif) no-repeat left top;
width:172px;
height:33px;
float:left;

text-indent:-9999px;
margin-bottom:5px;
}
a.viewportfolio {background-image:url(../images/btn-view-portfolio.gif);}

a.webdesign {background-image:url(../images/services/webdesign.gif);width:188px; height:33px; float:left;}
a.ecommerce {background-image:url(../images/services/ecommerce.gif); width:188px; height:33px; float:left;}
a.customization {background-image:url(../images/services/customization.gif); width:188px; height:33px; float:left;}
a.maintenance {background-image:url(../images/services/maintenance.gif); width:188px; height:33px; float:left;}


a.requestquote:hover, a.requestquote2:hover, a.viewportfolio:hover, a.readmore:hover, a.viewexamples:hover, a.launchsite:hover, a.casestudies:hover, a.webdesign:hover, a.ecommerce:hover, a.customization:hover, a.maintenance:hover   {background-position: left bottom;}


a.readmore {background-image:url(../images/btn-read-more.gif); width:188px;}
a.viewexamples {background-image:url(../images/btn-view-examples.gif); width:188px;}
a.launchsite {background-image:url(../images/btn-launch-site.gif); width:127px; height:30px;}
a.casestudies {background-image:url(../images/btn-view-case-studies.gif); width:195px;}
a.requestquote2 {background-image:url(../images/btn-request-a-quote2.gif); width:195px;;}




.arrowt, .readmore{background:url(../images/arrow-aftertitle.gif) no-repeat right center; 
padding-right:10px; display:inline;}


ul li {padding:2px 0 3px 0; list-style:none;}
ul li a {color:#ffffff;}


p {line-height:1.20em;  color:#999999; margin-bottom:1em; font-size:1em;}


/* ---------------------------------- header ---------------------------------------  */

#header
{
height:101px;
position:relative;
width:100%;
margin-bottom:20px;
}

#logo
{
position:relative;
top:10px;
width:280px;
height:85px;
float:left;
outline:none;
background:url(../images/microsharweb-logo.gif) no-repeat top left;
text-indent:-9999px;
}

/* ---------------------------------- main navigation - mainnav ---------------------------------------  */
#mainnav 
{
position:absolute;
right:-1px; top:58px;
top:59px;
top:58px;

top:61px;
list-style:none;
float:right;
}

#mainnav li
{
display:inline;

list-style:none;
float:left;
}

#mainnav li a
{
color:#666666;
font-weight:bold;
display:block;
height:59px;
height:58px;
height:58px;
text-decoration:none;
text-indent:-9999px;
padding:0;

outline:none;
background:url(../images/menu/mainnav-contact-us.png) no-repeat center bottom;  width:132px;
cursor:pointer;
}



#mainnav li#mainnav-who a{background-image:url(../images/menu/mainnav-who-we-are.png);  width:132px; width:130px;}

#mainnav li#mainnav-what a{background-image:url(../images/menu/mainnav-what-we-do.png);  width:121px; width:120px;}

#mainnav li#mainnav-work a{background-image:url(../images/menu/mainnav-our-work.png);  width:121px; width:120px;}

#mainnav li#mainnav-contact a{background-image:url(../images/menu/mainnav-contact-us.png);  width:122px; width:121px;}

#mainnav li a:hover, #mainnav li.active a {background-position: center top;}

/* end: main nav */


/* ---------------------------------- top links ---------------------------------------  */
#top-links
{
position:absolute;
right:0px; top:2px;
list-style:none;
float:right;

}

#top-links li
{
display:inline;
list-style:none;
float:left;
background:url(../images/bullet-toplinks.gif) no-repeat left center;
padding-left:10px;
margin-left:20px;
line-height:14px;

}
#top-links li a, #top-links li a:hover {text-decoration:none;}

#top-links li, #top-links li a
{
color:#999999;
font-size:12px;
}

#top-links li em, #top-links li a em
{color:#ffffff; font-style:normal;}

#top-links li a:hover em{
color:#ffcc00;}
/* end: top links */

/* flash content */
#flashcontent {padding:0px 0 ; clear:both; line-height:1px; font-size:1px;}

/* end: flash content */

/* ---------------------------------- maincontent ---------------------------------------  */
#maincontent{float:left; margin-bottom:20px; padding-top:20px; height: inherit; display: block;}


#maincontent p a {color:#ffffff;}
#maincontent p a:hover {color:#ffcc00; text-decoration:none;}

/* end: maincontent  */

/* ---------------------------------- main ---------------------------------------  */
.mainwork {float:left; width:460px;}


/* ---------------------------------- sidebar and main ---------------------------------------  */

.sidebar 
{
float:left;
width:195px;
margin-right:10px;
margin-left:10px;
margin-bottom:20px;
}


.main 
{
float:left;
width:720px;
}

.main h2{
color:#999;
}

.main h3{color:#fff;margin-bottom:1px;}

.main strong{color:#999;}
.main a:link{color:#fff;}
.main a:visited{color:#666;}
.main a:hover{color:#ffcc00;}
.main a:active{color:#fff;}

.main div.col1 /* width:320px; */
{
float:left;
width:320px;
margin-right:40px;
}

.main  div.col2 /* width:360px; */
{
float:left;
width:360px;
}

.main div.col3 /* width:320px; */
{
float:left;
width:700px;

}

.main ul
{
height: inherit;
margin-left:20px;
margin-bottom:10px;
}

.main ul li{
height: inherit;
list-style-type:square;
}

.main ol
{
height: inherit;
margin-left:20px;
margin-bottom:20px;
}
.sidebar .buttons 
{
background:url(../images/bg-buttonsrounded.gif) no-repeat left top;
height:91px;
padding-top:9px;
padding-left:11px;
text-align:center;
}


/* ---------------------------------- homepage boxes ---------------------------------------  */

/* end: homepage boxes  */
#box1 /* width:320px;*/
{
float:left;
width:320px;
}

#box1 h1.heading, #box2 h1.heading, #box3 h1.heading
{
background:url(../images/headings/welcome-to-ciplex.gif) no-repeat left top;
text-indent:-9999px;
height:37px;
height:41px;
border-bottom:1px solid #1e1e1e;
padding-bottom:6px;
padding-bottom:2px;
margin-bottom:7px;
margin-top:0; 
padding-top:0;
}


#box2 /* width:310px;*/
{
float:left;
width:310px;
margin:0 20px;
}

#box2 h1.heading {background-image:url(../images/headings/websites-starting-from.gif);}

#box3 /* width:265px;*/
{
float:left;
width:265px;
background:url(../images/bg-roundedbox.gif) no-repeat left top;
padding:15px 20px 10px 20px;
width:225px;
text-align:center;
min-height:150px;

}

#box3 h1.heading {background-image:url(../images/headings/high-end-agency-services.gif); border:none; margin-bottom:5px; padding-bottom:0;}

#box3 a.requestquote{margin:-8px auto 0 auto; margin:0px auto 0 auto;  margin-bottom:4px; float:none; display:block;}
#box3 a.viewportfolio{margin:0 auto;float:none; display:block;}



#box4 /* width:265px;*/
{
float:left;
width:310px;
background:url(../images/bg-roundedbox2.gif) no-repeat left top;
padding:10px 20px 10px 20px;
width:225px;
text-align:center;
min-height:205px;
margin:0 40px;

}

#box4 h1.heading {background-image:url(../images/headings/high-end-agency-services.gif); border:none; margin-bottom:5px; padding-bottom:0;}

#box4 a.webdesign{margin:-8px auto 0 auto; margin:0px auto 0 auto;  margin-bottom:4px; float:none; display:block;}
#box4 a.ecommerce{margin:-8px auto 0 auto; margin:0px auto 0 auto;  margin-bottom:4px; float:none; display:block;}
#box4 a.customization{margin:-8px auto 0 auto; margin:0px auto 0 auto;  margin-bottom:4px; float:none; display:block;}
#box4 a.maintenance{margin:0 auto;float:none; display:block;}
 
/* ---------------------------------- articles ---------------------------------------  */
#articles 
{
clear:both;
border-top:1px solid #1e1e1e;
padding:20px 0;
padding-bottom:16px; /* 5px less from li in the article list */

float:left;
width:100%;
}

#articles  h1.heading
{
background:url(../images/headings/articles-and-news.gif) no-repeat left center;
text-indent:-9999px;
height:12px;
width:105px;
display:inline;
float:left;
line-height:17px;
font-size:13px;
margin:0; padding:0;
padding-top:3px;
}


#articles ul
{
list-style:none;
float:left;
margin-left:10px;
}

#articles ul li
{
display:inline;
list-style:none;
float:left;

padding:0;

margin-right:40px;
line-height:17px;
margin-bottom:5px;
_margin-bottom:0px;
}

#articles ul li a
{
padding-left:25px;
background:url(../images/bullet-articles-off-on.gif) no-repeat left top;
color:#757575;
}

#articles ul li a:hover {background-position:left bottom; text-decoration:none;}
#articles ul li a span.more {color:#ffffff;}
#articles ul li a:hover span.more {color:#ffcc00;}

#articles ul li, #articles ul li a
{
color:#999999;
font-size:12px;
}



/* ---------------------------------- our work - menu : services  ---------------------------------------  */

ul.workservices
{
list-style:none;
float:left;
margin-right:27px;
margin-left:30px;
}

ul.workservices li
{
list-style:none;

padding:0;

margin-bottom:7px;
line-height:18px;
display:block;
height:18px;
}

ul.workservices li a
{
text-decoration:none;
color:#666666;
text-transform:uppercase;

text-indent:-9999px;
padding:0;

outline:none;
background:url(../images/workservices-web-design.gif) no-repeat left bottom;  
width:111px;

height:18px;
display:block;

}

ul.workservices li#work-ecommerce a{background-image:url(../images/workservices-ecommerce.gif) ;  width:121px;}
ul.workservices li#work-marketing a{background-image:url(../images/workservices-marketing.gif) ;  width:162px;}
ul.workservices li#work-print a{background-image:url(../images/workservices-print.gif) ;  width:146px;}


ul.workservices li a:hover, ul.workservices li.active a {color:#FFFFFF; background-position:left top;}

/* ---------------------------------- sections list rounded on contact sidebar ------------------  */
ul.sections
{
background:url(../images/bg-sidecontactrounded.png) no-repeat left top;
height:243px;
margin-bottom:20px;
}
ul.sections li
{
border-bottom: 1px solid #333333;
padding:7px 0;
padding-left:38px;
padding-left:23px;
padding-right:23px;
}
ul.sections li.title {
padding-top:20px;
padding-bottom:8px;
padding-left:21px;
}

ul.sections li.last {border:none;}

ul.sections li a
{
color:#999999;
background:url(../images/bullet-ciplex-yellow.gif) no-repeat left 4px;
padding-left:14px;
display:block;
}

ul.sections li a:hover, ul.sections li.active a {color:#ffcc00;}

ul.sections h1.heading-med
{
padding:0;
/*
margin-top:16px;
margin-bottom:10px;

*/
margin-top:10px;
margin-bottom:2px;
}



ul.sections h1.heading-med
{
padding:0;
/*
margin-top:16px;
margin-bottom:10px;

*/
margin-top:10px;
margin-bottom:2px;
}


/* ---------------------------------- what do we do page    ---------------------------------------  */

/* ---------------------------------- services rounded boxes   ---------------------------------------  */

.servicebox
{
float:left;
background:url(../images/bg-servicerounded.jpg) no-repeat left top;
background:url(../images/bg-servicerounded.png) no-repeat left top;
width:201px;
height:343px;
margin:0 4px;
padding:0 7px;
padding:0 16px;
padding-top:20px;
width:187px;
width:169px;
position:relative;
height:340px;
}

.servicebox p.buttons {
position:absolute;
bottom:20px;
left:7px;
margin:0;
}

.servicebox p.buttons .viewexamples{margin-bottom:0;}

/*
.servicebox p, .servicebox h1, .servicebox h2, .servicebox h3, .servicebox h4, .servicebox ul {margin-left:7px; margin-right:7px;
}
*/

h1.heading-med
{
background:url(../images/headings/web-design-hmed.gif) no-repeat left top;


height:24px;
text-indent:-9999px;
padding-bottom:7px;
border-bottom:1px solid #424242;
margin-bottom:20px;
margin-top:0; 
padding-top:0;
}




#service-design h1.heading-med{background-image:url(../images/headings/web-design-hmed.gif) ;}
#service-ecommerce h1.heading-med{background-image:url(../images/headings/ecommerce-hmed.gif) ;}
#service-marketing h1.heading-med{background-image:url(../images/headings/online-marketing-hmed.gif) ; }
#service-print h1.heading-med{background-image:url(../images/headings/print-hmed.gif) ; }

#service-design {margin-left:50px;}


/* ---------------------------------- contact us page    ---------------------------------------  */

#contactform {margin:0; padding:0;}
#contactform ul {list-style:none; width:355px; margin-right:20px; float:left; padding:0;}

#contactform ul li {margin-bottom:5px; float:left; width:100%; padding:0;list-style:none;}

#contactform ul li.submit {border-top:1px solid #1e1e1e; padding-top:10px; margin-top:12px; text-align:right; padding-bottom:0; margin-bottom:0;}

#contactform ul li label { width:130px; float:left; }
#contactform ul li p.fields, #contactform ul.checkboxes{float:left; width:210px;  margin:0; padding-bottom:0; margin-bottom:0; }

#contactform ul.checkboxes li {float:none;}
#contactform ul.checkboxes li label{float:none;}
#contactform ul.checkboxes li input {margin-right:5px;}

/* ---------------------------------- overview page    ---------------------------------------  */

#overviewPromises {margin-left:0;}
#overviewPromises li{margin-bottom:20px;list-style-type:none;}

/* ---------------------------------- headings replacement  ---------------------------------------  */

h1.heading-gradient
{
background:url(../images/headings/web-design-gradient.gif) no-repeat left top;

height:39px;
text-indent:-9999px;
margin-bottom:0px;
margin-top:0; 
padding-top:0;
}

h1#hwebdesign {background-image:url(../images/headings/web-design-gradient.gif); }
h1#hecommerce {background-image:url(../images/headings/ecommerce-gradient.gif); }
h1#hmarketing {background-image:url(../images/headings/online-marketing-gradient.gif); }
h1#hprint {background-image:url(../images/headings/print-gradient.gif); }

h1#hwherenext {background-image:url(../images/headings/where-next-hmed.gif); border:none;  padding-top:0; margin-top:0;}

h1#hourwork {background-image:url(../images/headings/our-work-hmed.gif); border:none;  padding-top:0; margin-top:0;}



/* ---------------------------------- list ---------------------------------------  */
ul.ciplexlist
{
list-style:none;
margin-bottom:20px;
margin-left:20px;
}
ul.ciplexlist li
{
padding:7px 0;
padding-left:15px;
background:url(../images/bullet-ciplex-yellow.gif) no-repeat left 11px;
color:#999999;
}


ul.ciplexlist li a 
{
color:#999999;
color:#ffffff;
}

ul.ciplexlist li a:hover {color:#ffcc00;}


/* ---------------------------------- footer ---------------------------------------  */
#footer
{
border-top:1px solid #1e1e1e;
clear:both;
padding-top:10px;
width:100%;
color:#666666;
}

ul#footernav 
{
list-style:none;
margin-left:-10px;
float:left;
width:530px;
color:#666666;
}

ul#footernav li
{
display:inline;
padding:0;
background:url(../images/dots-mainnav.gif) no-repeat right 8px;
line-height:14px;
height:14px;

}

ul#footernav li.last{background:none;}

ul#footernav li a {
color:#666666;
font-size:12px;
line-height:14px;
text-decoration:none;
padding:0 10px;
font-weight:normal;
}

ul#footernav li a:hover, ul#footernav li.active a{color:#ffcc00;}


#footer .side
{
float:right;
width:265px;
}

#footer .side p{text-align:right; }
#footer .side p.copy{color:#666666;}
#footer .side .lighter {color:#cccccc;}
#footer .side p a {color:#ABABAB; text-decoration:none;}
#footer .side p a:hover{text-decoration:underline;}
/* end: footer */



.clear{clear:both;}

img{border:none;}
img.topimg {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #1e1e1e;}

img.left
{
float:left;
margin-right:10px;
}

img.right
{
float:right;
margin-left:10px;
}


.fltl {float:left;}
.fltr {float:right;}


p.indented
{
text-indent:40px;
}

p.larger
{
font-size:14px;
}

p.nomargin
{
margin:0;
}

.topneg {margin-top:-15px;}

.smaller {font-size:11px;}
p.smaller{line-height:20px;}
.normalweight,  .normalweight a {font-weight:normal;}

#maincontent p.darker, .darker {color:#333333;}

span.vertical {padding:0 4px;}


/* page differences */

#ourworkpage #maincontent
{
background:url(../images/bg-maincontent-work.jpg) no-repeat left top;  width:100%; 
padding-bottom:40px;
}

#whatpage #maincontent {
background:url(../images/bg-maincontent-what.jpg) no-repeat left top;  width:100%; 
padding-top:30px;
min-height:478px;
height:auto !important;
height:478px;
}

#portfoliopage .main /*720*/
{
background:#000;
padding:18px 18px 18px 17px;
width:685px;
margin-top:-18px;
}


/*what-we-do image styling*/
#service-design img{margin-left:-15px;}
#service-ecommerce img{margin-left:-15px;}
#service-marketing img{margin-left:-15px;}
#service-print img{margin-left:-15px;}

/*internet marketing page*/
#impQuestions{
background-color:#11111;
padding:10px 20px 5px 20px;
margin-bottom:20px;

}
#impQuestions p{
font-size:1.2em;
margin-bottom:10px;
}

/* portfolio page */

#portfoliopage ul.sections {}

.portfolioholder {
border:5px solid #333333;
position:relative;
}

.portfolioholder .imageholder {width:675px;line-height:1px; margin:0; position:relative; font-size:1px; height:380px; }


.imageholder .images {position:relative; overflow: hidden; width: 675px; height: 380px;}
.imageholder .imageswrapper {width:3000px; position:relative;}

.imageholder .images img {float:left;}

.loader {background:url(../images/ajax-loader.gif) no-repeat center 184px;}

.portfolioinfo {
line-height:normal;
background:#0c0c0c url(../images/bg-portfolioinfo.jpg) repeat-x left top;
padding:11px 8px 1px 16px;
clear:both;
position:relative;
min-height:42px;
height:auto !important;
height:42px;


}

.portfolioinfo .launchsite {float:right; position:relative; top:-29px; top:12px; position:absolute; right:8px}

.portfolioinfo p {margin-bottom:0; color:#d3d3d3; font-size:11px; line-height:1.3em; width:460px; margin-top:4px; }
.portfolioinfo .name {color:#fff; text-transform:uppercase;}

.main .sliders {
/*position:absolute;
top:144px;*/
list-style:none;
margin:0;
/*width:685px;*/
}

.main .sliders li {background:none; list-style:none ; }

.sliders .prev, .sliders .next {
position:absolute;
z-index:10;
left:0; 
height:97px;
width:25px;
width:21px;
top:144px;
}

.sliders .prev a, .sliders .next a {
background:url(../images/btn-slide-left.png) no-repeat left top;
height:97px;
width:25px;
width:21px;
display:block;
text-indent:-9999px;
}

.sliders .prev a:hover, .sliders .next a:hover {background-position:left bottom;}

.sliders .next a {background:url(../images/btn-slide-right.png) no-repeat left top;}
.sliders .next { left:auto;right:0; }

.sliders .nomorenext a:hover {background-position:left top; cursor:default;}
.sliders .nomoreprev a:hover {background-position:left top; cursor:default;}