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


/*
COLORS:
blue: #269ffc

*/

*
{
padding:0;
margin:0;
}

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

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

.clear { clear: both; }

.wrapper
{
text-align:left;
margin:0 auto;
width:900px;
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 #269ffc;}

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

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

h1
{
font-size:24px;
border-bottom:1px solid #1e1e1e;
padding-bottom:2px;
margin-bottom:7px;
text-transform:uppercase;
color:#FFFFFF;
}

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

h1 trademark {
font-size:10px;
line-height:10px;
}

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

h3
{
font-size:17px;
text-transform:uppercase;
color:#777777;
margin-bottom:-5px;
letter-spacing:-1px;
}

h4
{
font-size:14px;
text-transform:uppercase;
color:#777777;
margin-bottom:-5px;
}



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


a {color:#000000; 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.viewportfolio, a.viewexamples
{
background:url(/_img/btn-request-a-quote.gif) no-repeat left top;
width:172px;
height:33px;
float:left;
text-indent:-9999px;
margin-bottom:5px;
}

a.smallportfolio
{
background:url(/_img/btn-request-a-quote.gif) no-repeat left bottom;
width:143px;
height:33px;
float:right;
text-indent:-9999px;
margin:7px 5px 0 0;
}

a.readmore
{
background:url(/_img/btn-small-readmore.png) no-repeat left bottom;
width:138px;
height:33px;
float:left;
text-indent:-9999px;
margin:5px 5px 0 0;
}

a.readmore:hover {background-position: left top;}

a.viewportfolio {background-image:url(/_img/btn-view-portfolio.gif);}

a.requestquote:hover, a.viewportfolio:hover, a.viewexamples:hover{background-position: left bottom;}

a.viewexamples {background-image:url(/_img/btn-view-examples.gif); width:188px;}


.arrowt, .readmore{background:url(/_img/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;}

img { behavior: url(/_img/iepngfix/iepngfix.htc) }


/* ------- tagline --------------
#tagline {
width: 100%;
height: auto;
padding: 5px;
background:#000000;
color:#999999;
font-size:16px;
font-style: normal;
letter-spacing:5px;
text-align:center;
}  */

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

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

#logocontainer {
position:absolute;
top:0px;
width:173px;
height:auto;
float:left;
}

#logo
{
position:absolute;
top:15px;
width:173px;
height:50px;
outline:none;
background:url(/_img/W+5_alt_logo.png) no-repeat top left;
text-indent:-9999px;
}

#slogan {
position:absolute;
font-size:1.1em;
top:70px;
margin-left:8px;
outline:none;
}

/* ---------------------------------- top links ---------------------------------------  */
#top-links
{
position:absolute;
right:0px; top:0px;
list-style:none;
float:right;
background: url(/_img/bg_toplinks.gif) no-repeat right top;
width: 139px;
height: 21px;
}

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

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

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

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

#top-links li a:hover em{
color:#269ffc;}
/* end: top links */
/* ---------------------------------- 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(/_img/menu/mainnav-contact-us.png) no-repeat center bottom;  width:132px;
cursor:pointer;
}



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

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

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

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

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

/* end: main nav */


/* ---------------------------------- flash content ---------- margin-top without nav should be -34px ----------------- */
#flashcontent { position:relative; margin-top:-34px; margin-left:-4px; padding:0px; 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; width: 900px;}
#quote #maincontent{ background:url(../_img/bg-maincontent-what.png); float:left; margin-bottom:20px; padding-top:20px; height: inherit; display:block;}

#maincontent #viewsamples {
position:relative;
width:143px;
float:right;
}

#maincontent p a {color:#ffffff; text-decoration:underline;}
#maincontent p a:hover {color:#269ffc; text-decoration:underline;}

/* end: maincontent  */

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


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

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


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

.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:#269ffc;}
.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 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(/_img/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:310px;
font-size:1.1em;
}

#box1 h1.heading, #box2 h1.heading, #box3 h1.heading
{
background:url(/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;
font-size:1.1em;

}

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

#box2 a.smallportfolio {background-image:url(/_img/btn-small-portfolio.png); display:block;}
#box2 a.smallportfolio:hover {background-position: left top;}

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

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

/* ---------------------------------- articles ---------------------------------------  */
.css3pod-blk {
	background-color:#000e11;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	width:100%;
	min-height:200px;
	margin-bottom:30px;
}

#articles /* former (box3) width:265px;*/
{
float:left;
padding:5px 10px 5px 10px;
width:220px;
}

#articles  h1.heading
{
background:url(/_img/articles-and-news.gif) no-repeat left center;
text-indent:-9999px;
height:15px;
width:175px;
display:inline;
float:left;
line-height:17px;
font-size:14px;
margin:0; padding:0;
padding-top:3px;
padding-bottom:3px;
text-align:center;
}


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

#articles ul li
{
display:inline;
list-style:none;
float:left;
padding:0;
margin-right:0px;
line-height:17px;
margin-bottom:5px;
border-bottom:1px solid #333333;
}

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

#articles ul li.lastli {
	border:none;
	margin-bottom:10px;
}

#articles ul li a:hover {background-position:-2px -18px; text-decoration:none;}
#articles ul li a span.more {color:#ffffff;}
#articles ul li a:hover span.more {color:#269ffc;}

#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(/_img/workservices-web-design.gif) no-repeat left bottom;  
width:111px;

height:18px;
display:block;

}

ul.workservices li#work-ecommerce a{background-image:url(/_img/workservices-ecommerce.gif) ;  width:121px;}
ul.workservices li#work-marketing a{background-image:url(/_img/workservices-marketing.gif) ;  width:162px;}
ul.workservices li#work-print a{background-image:url(/_img/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(/_img/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(/_img/bullet-ciplex-yellow.gif) no-repeat left 4px;
padding-left:14px;
display:block;
}

ul.sections li a:hover {color:#269ffc;}

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(/_img/bg-servicerounded.jpg) no-repeat left top;
background:url(/_img/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(/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(/web-design-hmed.gif) ;}
#service-ecommerce h1.heading-med{background-image:url(/ecommerce-hmed.gif) ;}
#service-marketing h1.heading-med{background-image:url(/online-marketing-hmed.gif) ; }
#service-print h1.heading-med{background-image:url(/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(/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(/web-design-gradient.gif); }
h1#hecommerce {background-image:url(/ecommerce-gradient.gif); }
h1#hmarketing {background-image:url(/online-marketing-gradient.gif); }
h1#hprint {background-image:url(/print-gradient.gif); }

h1#hwherenext {background-image:url(/_img/where-next-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(/_img/bullet-ciplex-yellow.gif) no-repeat left 11px;
color:#999999;
}


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

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


/* ---------------------------------- 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:auto;
color:#666666;
}

ul#footernav li
{
display:inline;
padding:0;
background:url(/_img/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:#269ffc;}


#footer .side
{
float:right;
width:auto;
}

#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{color:#269ffc; text-decoration:none;}
/* 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(/_img/bg-maincontent-work.jpg) no-repeat left top;  width:100%; 
padding-bottom:40px;
}

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

/*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:#111111;
padding:10px 20px 5px 20px;
margin-bottom:20px;

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