/* Css Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}
table { border-collapse:collapse; border-spacing:0;}
fieldset,img {	border:0;}
ol,ul {list-style:none;}

/* Start Styling */
a:link, a:visited, a:hover {text-decoration: none; color : white}
a:active{ text-decoration: none ; color:white}
body{font-family:"Gill Sans","Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;background: url(../images/background.gif) repeat-x #932568;color:white;position: relative;}


/* Global classes */

.clear{clear:both;height: 1px; font-size: 1px;}
.pink{color:#ff0099}
.wrapper{width:1024px;margin:0 auto 0 auto;border:0px solid red;position:relative;}
.right{text-align: right;}
.space{padding:10px 0 10px 0}
.main {padding: 30px 0 30px 0}
.small{font-size:12px!important}
.title{font-size:20px}
.greeny{color:#0cb5b5}
.center{text-align: center;}
.live-help{position:absolute;top:0;left:0;width:102px;height:78px;background: url(../images/livehelp.png);cursor:pointer;z-index:10}
.green{color: #3d69c0;padding-top: 10px;}

.live-chat{cursor: pointer;}
/** Side pannels **/

#free-marketing-checklist{position:absolute;top:370px;right:0;width:117px;height:78px;background: url(../images/fmc.png);cursor:pointer;z-index:10}
#how-can-we-help-you{position:absolute;top:480px;right:0;width:117px;height:78px;background: url(../images/hcwh.png);cursor:pointer;z-index:10}

#our-process {position:absolute;top:1850px;right:0;width:124px;height:78px;background: url(../images/our-process.png);cursor:pointer;z-index:10}

#filter-showall {position:absolute;top:2785px;right:0;height:87px;cursor:pointer;font-size:18px;z-index:10}
#writing {position:absolute;top:2850px;right:0;width:99px;height:70px;background: url(../images/writing.png);cursor:pointer;z-index:10}
#webdesign {position:absolute;top:2950px;right:0;width:99px;height:70px;background: url(../images/webdesign.png);cursor:pointer;z-index:10}
#graphic-design {position:absolute;top:3050px;right:0;width:99px;height:70px;background: url(../images/graphicdesign.png);cursor:pointer;z-index:10}
#multimedia {position:absolute;top:3150px;right:0;width:99px;height:70px;background: url(../images/multimedia.png);cursor:pointer;z-index:10}
#internet-marketing {position:absolute;top:3250px;right:0;width:99px;height:70px;background: url(../images/internetmarketing.png);cursor:pointer;z-index:10}
#project-menagment {position:absolute;top:3350px;right:0;width:99px;height:70px;background: url(../images/projectmenagment.png);cursor:pointer;z-index:10}

#help {position:absolute;top:3750px;right:0;width:124px;height:78px;background: url(../images/help.png);cursor:pointer;z-index:10}
/**#comments {position:absolute;top:4230px;right:0;width:124px;height:78px;background: url(../images/comments.png);cursor:pointer;z-index:10}**/
#categories {position:absolute;top:4850px;right:0;width:124px;height:78px;background: url(../images/cat.png);cursor:pointer;z-index:10;}
.mac #filter-showall {top:2645px;}
.mac #writing {top:2680px;}
.mac #webdesign {top:2780px;}
.mac #graphic-design {top:2880px;} 
.mac #multimedia {top:2980px;} 
.mac #internet-marketing {top:3080px;}
.mac #project-menagment {top:3180px;display:none}  
.mac #categories {position:absolute;top:4650px;right:0;width:124px;height:78px;background: url(../images/cat.png);cursor:pointer;z-index:10;}

#live-home{top:450px;display: none;}
#live-about{top:1310px;display: none;}
#live-services{top:80px;display: none;}
#live-portfolio{top:2930px;display: none;}
#live-contact{top:3730px;display: none;}


/** HEADER **/

#ab-fix{position: absolute;z-index: 100;}
#dirty-hax {background: white;display: none;position: absolute;width:100%}

#header-main {position:fixed;top:0;left:50%;z-index:100;width:100%;margin-left:-50%;}

#header{height:46px;}
	#header #go-home-nav {position:absolute;top:5px;left:50px;background: url(../images/chem-logo.png) 0 2px no-repeat;padding:5px 0 0 40px;height:51px;padding-top:5px;width:206px}
	#header ul {position:absolute;top:31px;left:400px}
	#header li {display: inline;padding:15px}
	#header a {font-size:21px;color:white}
	#header a:hover {color:#ff0099}
	#header #header-dynamic-content{ padding: 60px 20px 0 500px; display: none;color:black}

#under-header{padding-left:490px}
	#under-header .callback {float:left; background: url(../images/callback.png) no-repeat ;height:26px;width:174px;text-align: center;cursor:pointer;margin:0 2px 0 2px}
	#under-header .client {float:left;background: url(../images/client.png) no-repeat;height:26px;width:120px;text-align: center;cursor:pointer;color:black;margin:0 2px 0 2px}
	#under-header .live-chat {float:left;background: url(../images/client.png) no-repeat;height:26px;width:120px;text-align: center;cursor:pointer;color:black;margin:0 2px 0 2px}
	
/** Home section **/
#home {padding:60px 0  0 50px }

	#home p.create{line-height: 22px;}
	#home .welcome{font-size:25px;padding:0;color:#90caee}
	#home .create {padding-top:10px;font-size:21px;width:620px;line-height: 24px!important}
	
	#home a.justask{background:url(../images/justask.png) no-repeat 0 0 ; width:100px;height:100%}
	#home .who-we-are {float:left;width: 187px;margin:35px 0 0 0;font-size:12px;text-align: justify;}
	#home .what-we-do {float:left;width: 187px;margin:35px 150px 0 150px;font-size:12px;text-align: justify;}
	#home .how-we-help {float:left;width: 207px;margin:35px 0 0 0;font-size:12px;text-align: justify;}
	#home .our-projects {float:left;width: 187px;margin:35px 0 0 0;font-size:12px;text-align: justify;}
	#home h3{font-size:20px;font-weight:normal;color:#173260;padding:20px 0 10px 0}
	#home img.home-small-image{margin:5px 22px 0 0;}
	#home img.home-small-last{margin:5px 0 0 0;}
	#home li{list-style: disc;color: #bb6ba7;list-style-position: inside;line-height: 20px;}
	#home li span {color:white}
	
	#home .sci {position:absolute;top:110px;right:10px;width:300px;margin:0 0 0 0}
	#home .we-can-help{float:right;width:500px;margin:15px 0 0 30px;font-size:14px;padding:0 50px 0 0}
	#home .we-can-help ul{padding:0 0 0 10px}
	#home .right{padding-right:90px}
	#just-ask-home{position:absolute;top:230px;right:600px;width:77px;height:26px}
	
	.mac #just-ask-home{top:223px;right:750px}
	
/** About section **/
#about {padding:20px 50px 100px 50px;margin-top:240px}
	#about strong {display: block;padding-bottom:0px}
	#about .who-we-are{font-size:25px;padding:0 0 0 0;margin:-10px 0 0 0 ;color:#658bcb;}
	#about .left{float: left;width:440px;margin: 0 0 0 0;text-align: justify;font-size:14px}
	#about .right{float: left;width:400px;margin: 50px 0 0 50px;}
	#about .belive {float:left;width:205px;margin:30px 0 0 0;font-size:14px;padding:0 0 0 0}
	#about .spj {float:left;width:178px;margin:30px 0 0 30px;font-size:14px;text-align: justify;background: url(../images/spj.png) no-repeat 20px 20px ;padding-bottom:40px;line-height: 18px;}
	#about .quiz {float:left;width:178px;margin:30px 40px 0 30px;font-size:14px;text-align: justify;background: url(../images/quiz.png) no-repeat 35px 10px ;padding-bottom:40px;line-height: 18px;}
	#about .appe {float:left;width:178px;margin:30px 0 0 0;font-size:14px;text-align: justify;background: url(../images/door.png) no-repeat 30px 20px ;line-height: 18px;}

/** Services section **/	
#services {padding:50px;margin-top:140px}
	.services-bg h5 {font-size:15px;padding:0 0 10px 0;height:30px;position:relative;display: block;width:160px}
	.services-bg h5 img {position:absolute;top:0;left:0}
	.services-bg h5 span {position:absolute;top:8px;right:0}
	#services .cdm {font-size:25px;padding:0 0 20px 0;color:#6b68a9;margin:-10px 0 0 0}
	#services .first {font-size:14px}

	.services-bg { background: url("../images/service-bg.gif") repeat-x;}

	.services-bg div.wrp{font-size:14px;}


	.services-bg div.scrollable div.item { 
	    float:left; 
	    margin:20px 20px 0 0;
	    width:300px;
	    padding:0 10px 0 0;
	    position:relative;
	    height:210px;
	    background: url("../images/item-bg.gif") 2px 0 repeat-y;
	} 
	.services-bg .more{position:absolute;bottom:10px;left:0}
	.services-bg h6 {font-weight: normal;color:#856dd5;position:relative;cursor: pointer;font-size:16px;line-height: 32px;display: inline;margin:20px 0 0 0;}
	.services-bg h6 span {position: absolute; top:4px;left:0}
	.services-bg img.arrow {position: absolute;top:3px;right:-30px;}

/** Portfolio section **/
#portfolio {padding:50px;margin-top:230px;height:600px}
	#portfolio .whats-up{font-size:25px;padding:0 0 0 0;color:#8f72b2;margin:-10px 0 0 0}
	#portfolio .main {padding:0 0 0 0;margin:0}
	#portfolio .main img {float:left;border:5px solid black;margin:10px 20px 0 0;cursor: pointer;}
	
/** Contact section **/
#contact {padding:50px;margin-top:210px}

	#contact .h5{font-size:13px;position: relative;font-weight: bold;height:55px}
	#contact .h5 span{float:left;padding:10px 10px 0 0}
	#contact .h5 .img{float:left}
 	#contact .input {border:0;width:150px;padding:2px;margin:5px 0 5px 0;color:#6f7273;font-family: arial;font-weight: normal;}
 	#contact .txtarea {border:0;width:150px;padding:2px;margin:5px 0 5px 0;color:#6f7273;font-family: arial;font-size:14px;height:50px}
 	#contact .send {border:0;width:50px;padding:2px;background: url(../images/send.png) no-repeat;margin:10px 0 0 110px}
	#contact .touch{font-size:25px;padding:0 0 0 0;color:#b47fbe;margin:-10px 0 0 0}
	#contact .avail{padding:10px 0 20px 0}
	#contact .message{float:left;width:250px;margin:0 30px 30px 0px; font-size:14px;background: url(../images/line.gif) 245px 120px no-repeat;}
	#contact .message p{padding-bottom:5px}
	#contact .started{float:left;width:260px;margin:0 50px 30px 0;background: url(../images/line.gif) 255px 120px no-repeat; font-size:14px}
	#contact .connect{float:left;width:230px;margin:0 30px 30px 0;font-size:14px;height:400px;}
	#contact .connect a img{padding:15px 0 0 0;float:left;}
	#contact .item{padding:10px 0 0 0;cursor: pointer; }
	#contact .ico {float:left}
	#contact .txt {float:left;padding:15px 0 0 20px;letter-spacing: -1px;}
	
/** Blog section **/
#blog {padding:50px 50px 340px 50px;margin-top:150px;}
	#blog .lab{font-size:25px;padding:0 0 10px 0;color:#bb6ba7;margin:-10px 0 0 0}
	#blog p.title{font-size:18px}
	#blog p.bigTitle{font-size:24px}
	#blog .post p{padding:10px 0 10px 0;font-size:15px}
	#blog .narro {width: 500px;}
	#blog .btn {cursor: pointer;}
	#blog .left{float:left;width:400px;margin-right: 20px; text-align: justify;}
	#blog .right{float:left;width:400px; text-align: justify;}

#main-content {float:left;width:1024px}

#full-content {float:left;width:1024px;margin:300px 0 0 0;clear:both}
#full-content a {color:gray;text-decoration: underline;}

/** Request Callback **/
.input{ border:1px solid black;color:#868789;font-size:16px;padding:4px;font-weight:bold;margin:10px}
.submit{ border:0;font-weight:bold;margin:10px;background: url(../images/sendbig.png) no-repeat; width:70px; height:32px;cursor: pointer;}
.narrow{margin:0 auto 0 auto;width:240px;text-align: right;}

#request-callback{color:black;display: none;padding-bottom:13px}
	#request-callback div.left{float:left;width:240px;margin:100px 0 0 250px;color:#acd47c;font-size: 16px;}
	#request-callback div.mid{float:left;width:200px;margin:70px 0 0 30px}
	#request-callback div.right{float:left;width:200px;margin:70px 0 0 30px}

/** Client Login **/
#client-login {color:black;display: none;height:236px}
	#client-login div.left{float:left;width:240px;margin:70px 0 0 450px;color:#acd47c;font-size: 16px;}
	#client-login div.right{float:left;width:200px;margin:70px 0 0 30px}

/* Modal Box */
#modal{display: none;}
#simplemodal-overlay {background-color:gray;}
#simplemodal-container { width:770px; color:#bbb; background-color:white; padding:30px;-moz-border-radius: 15px;-webkit-border-radius: 15px;height: 550px;}
#simplemodal-container a.modalCloseImg {background:url(../images/xx.png) no-repeat; width:60px; height:60px; display:inline; z-index:3200; position:absolute; top:-10px; right:-10px; cursor:pointer;}
#simplemodal-container h1 {font-size:33px;font-weight: normal;color:#57a2e7;border-bottom:3px solid #57a2e7;padding:0 0 10px 50px}

#simplemodal-container h1.gift {background: url(../images/giftmodal.gif) no-repeat;}
#simplemodal-container h1.how {background: url(../images/howmodal.gif) no-repeat;}
#simplemodal-container h1.web {background: url(../images/webmodal.gif) no-repeat;}
#simplemodal-container h1.graph {background: url(../images/graphmodal.gif) no-repeat;}
#simplemodal-container h1.write {background: url(../images/blogmodal.gif) no-repeat;}
#simplemodal-container h1.mult {background: url(../images/multmodal.gif) no-repeat;}
#simplemodal-container h1.mark {background: url(../images/marmodal.gif) no-repeat;}
#simplemodal-container h1.help {background: url(../images/helpmodal.gif) no-repeat;}
#simplemodal-container h1.our-process {background: url(../images/op.gif) no-repeat;padding: 0 0 10px 60px}
#simplemodal-container h1.cons {background: url(../images/cons.png) no-repeat;padding: 0 0 10px 60px}
#simplemodal-container h1.cat {background: url(../images/cat-i.gif) no-repeat;padding: 0 0 10px 60px}


#simplemodal-container a:link, #simplemodal-container a:visited{color:gray}
#simplemodal-container h4 {font-size:25px;font-weight: normal;color: #3d69c0;padding:0 0 10px 0;margin:0}
#simplemodal-container p {font-size:20px;font-weight: normal;padding:10px 0 10px 0;color: #3d69c0}
#simplemodal-container p.gray{font-size:16px;font-weight: normal;color:#a3a5a1;padding:0 0 5px 0}
#simplemodal-container p.small{font-size:16px;font-weight: normal;color: #3d69c0;padding:0 0 5px 0}
#simplemodal-container p.wd{font-size:15px;font-weight: normal;color: #3d69c0;}

#simplemodal-container h3{font-size:17px}
#simplemodal-container .cat-re li {list-style: none;}


#modal img.alignright {float:right; margin:0 0 1em 1em}
#modal img.alignleft {float:left; margin:0 1em 1em 0}
#modal img.aligncenter {display: block; margin-left: auto; margin-right: auto}
#modal a img.alignright {float:right; margin:0 0 1em 1em}
#modal a img.alignleft {float:left; margin:0 1em 1em 0}
#modal a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

#spacing-fix p{line-height: 22px;}
#spacing-fix h4{padding-top:10px}

.btn-fix{margin:0 auto 0 auto; position:relative; width:1100px}

	div.scrollable { 
		margin:20px auto 0 auto;
	    position:relative; 
	    overflow:hidden; 
		width:960px;
	    height:276px; 
	} 
 	#srlx{position: absolute;top:130px;left:0;z-index: 100000;width:28px;height:28px;cursor: pointer;}
 	#srr{position: absolute;top:130px;right:0;z-index: 100000;width:28px;height:28px;cursor: pointer;}

	div.scrollable div.items { 
	    /* this cannot be too large */ 
	    margin:20px 0 0 0;
	    width:20000em; 
	    position:absolute; 
	} 
	 
	/* 
	    a single item. must be floated in horizontal scrolling. 
	    typically, this element is the one that *you* will style 
	    the most. 
	*/ 
	div.scrollable div.item { 
	    float:left; 
	    margin:20px 10px 0 0;
	    width:300px;
	} 
	 
	/* you may want to setup some decorations to active the item */ 
	div.items div.active { 
	    border:1px inset #ccc; 
	    background-color:#fff; 
	}

.h3po4{font-size:9px!important;padding:5px 0 5px 0}
.comment-body {position: relative;}
.zcomment .zleft{background: url("../images/com.png") no-repeat;height: 120px;width:143px;float: left;padding:6px 0 0 7px;margin:5px 0 5px 0}
.zcomment .zright{float: left;width:600px;background: url("../images/c.png");min-height: 110px;padding:5px}
.zcomment .zcommtz{padding-top: 15px;color:black}

img.alignright {float:right; margin:0 0 10px 10px}
img.alignleft {float:left; margin:0 10px 10px 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 10px 10px}
a img.alignleft {float:left; margin:0 10px 10px 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}