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

/* Reset */
img, em, ul, ol, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin:0;padding:0;border:0;outline:0; }
p      { line-height:1.25em; }
ul, li { list-style-type:none; }

.clear     { clear:both; }
.left      { float:left; }
.right     { float:right; }
.nomargin  { margin:0; }
.nopadding { padding:0; }
.no-back   { background:none !important; padding-left:0 !important; }
.dot-line  { background:url(../images/dotted-line.gif) repeat-x bottom; width:100%; padding-bottom:7px; }

a:focus, 
a:hover, 
a:active { outline:none; -moz-outline:none; }  
a        { cursor:pointer; }
/* Reset End */

html, body {
	background-color:#FFF;
	margin:0px; 
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:14px;
}

/* Heading Styles */
h1 { font-size:13px; margin:10px 5px 0 5px; color:#333; font-weight:bold; text-transform:uppercase; }
h2 { font-size:9px; margin:0 0 20px 0; font-weight:normal; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#555; line-height:1.25em; text-transform:uppercase; }
h3 { font-size:26px; margin:0; font-style:italic; font-weight:bold; letter-spacing:-1px; color:#333; }
h4 { font-size:16px; margin:0 0 5px 0; font-style:italic; font-weight:normal; color:#5f5c5c; }
h5 { font-size:16px; margin:0 0 5px 0; font-weight:bold; font-family: Tahoma, Geneva, sans-serif; color:#EEE; }
h6 { font-size:24px; margin:40px 40px 0 40px; font-weight:bold; color:#333; letter-spacing:-2px; font-style:italic; }

/* Icon Attributes Setup */
[icon^="psd"]  { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools.png) -40px 0px no-repeat; }
[icon^="fla"]  { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools.png) -80px 0px no-repeat; }
[icon^="php"]  { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools.png) -120px 0px no-repeat; }
[icon^="htm"]  { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools.png) 0px 0px no-repeat; }
[icon^="css"]  { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools.png) -160px 0px no-repeat; }
[icon^="wp"]   { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools.png) -200px 0px no-repeat; }
[icon^="ruby"] { display:block; width:40px; height:40px; float:left; background:transparent url(../images/icons-tools-ruby.jpg) no-repeat top left; }

/* Cufon */
#quote {
	width:290px;
	font-size:22px;
	line-height:1.25em;
	letter-spacing:-1px;
	background:url(../images/quote-open.png) no-repeat top left;
	padding:0 0 0 50px;
	float:left;
	margin:20px 0 0 10px;
}
#quote-close { 
	width:39px; 
	height:30px; 
	background:url(../images/quote-close.png) no-repeat top left; 
	float:right; 
	margin:10px 20px 0 0;
}

/* Link Styles */
a:link    { text-decoration:none; color:#0DB2DF; font-weight:bold; }
a:visited {	text-decoration:none; color:#0DB2DF; font-weight:bold; }
a:active  { text-decoration:none; color:#00A5DF; font-weight:bold; }
a:hover   { text-decoration:none; color:#CF0017; font-weight:bold; }


/* Wrappers */
.main-back      { background:url(../images/back-main.jpg) no-repeat top center #fff; width:100%; height:auto; overflow:hidden; }
.wrapper-page   { width:1000px; height:auto; margin:auto; overflow:hidden; }
.page           { width:100%; overflow:hidden; }
.wrapper-slider { width:100%; height:41px; background:url(../images/back-rep-outter-top.gif) repeat-x; }
.slider-tabs    { width:1000px; height:41px; margin:auto; background:url(../images/back-rep-inner-top.gif) repeat-x; }
.logo           { margin:55px 0 0 45px; float:left; }
.content        { margin:20px 0 0 0; float:left; width:1000px; }
.handwriting    { margin:30px 50px 0 0; float:right; }

#featured-projects  { margin-top:40px; }
#portfolio-projects { margin:40px 0; height:400px; background:url(../images/portfolio-projects-back.jpg) no-repeat top left; }

.left-column           { width:595px; float:left; margin:30px 20px 30px 10px; text-align:justify; background:url(../images/dotted-line.gif) top repeat-x; }
.left-column-services  { width:700px; float:left; margin:30px 10px 30px 10px; text-align:justify; background:url(../images/dotted-line.gif) top repeat-x; }
.right-column-services { width:655px; float:left; margin:60px 10px 0px 30px; text-align:justify; }
.right-column          { width:360px; float:left; }

.right-menu    { width:205px; float:left; margin:30px 0 0 40px;  }
.right-menu li { display:block; padding:7px 20px; margin:3px 0 3px 0; background-color:#e9e8e2; }

.bold-italic-georgia { font-weight:bold; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; }

/* Breadcrumb */
ul.breadcrumb  { margin:-20px 0 40px 10px; }
.breadcrumb li { display:inline-block; float:left; height:15px; padding-left:10px; background-color:#d2d2c6; color:#343233; font-size:0.7em; text-transform:uppercase; max-width:100px; }
.breadcrumb li .bc-mid { background:url(../images/bc-mid.gif) no-repeat top left; display:block; float:right; height:15px; width:11px; }
.breadcrumb li .bc-end { background:url(../images/bc-mid.gif) no-repeat top right; display:block; float:right; height:15px; width:9px; }
.breadcrumb li span { float:left; }

/* Left Navigation Menu */
.left-menu-wrapper  { width:295px; float:left; background:url(../images/back-left-menu.png) no-repeat top left; margin:60px 0 0 10px; }
.left-menu          { width:295px; height:502px; float:left; }
.left-menu-list     { width:210px; margin:20px 40px; font-size:12px; }
.left-menu-list li  { padding:7px 0px; background:url(../images/dotted-line.gif) repeat-x bottom; }
.left-menu ul li a  { padding-left:23px; background:url(../images/arrow-right.gif) no-repeat top left; display:block; width:100%; }

.left-menu ul li a,
.left-menu ul li a:visited { font-weight:normal; color:#333; }
.left-menu ul li a:hover,
.left-menu ul li a:active,
.left-menu ul li #active   { color:#0DB2DF; }

.left-menu ul li #active   { padding-left:23px; background:url(../images/arrow-down.gif) no-repeat top left; }

/* Navigation */
.navigation      { display:block; float:left; margin:70px 0 0 100px; width:500px;  }
.navigation li   { display:inline; float:left; height:30px; }
.navigation li a,
.home span,
.services span,  
.quote-req span,
.portfolio span, 
.contacts span { display:block; float:left; background-image:url(../images/navigation.gif); background-repeat:no-repeat; height:27px; }
 
.home a      { background-position:18px 7px; width:75px; }
.services a  { background-position:-63px 7px; width:87px; }
.quote-req a { background-position:-161px 7px; width:129px; }
.portfolio a { background-position:-303px 7px; width:100px; }
.contacts a  { background-position:-410px 7px; width:100px; }

.home span      { background-position:18px -12px; width:75px; }
.services span  { background-position:-63px -12px; width:87px; }
.quote-req span { background-position:-161px -12px; width:129px; }
.portfolio span { background-position:-303px -12px; width:100px; }
.contacts span  { background-position:-410px -12px; width:100px; } 

/* Services Menu */
.services-menu             { background:url(../images/services-menu-back.gif) no-repeat top center; width:1000px; height:68px; margin-left:3px; font-size:12px; }
.services-menu ul          { position:absolute; z-index:0; width:1000px; }
.services-menu ul li       { width:250px; display:block; float:left; margin-top:4px; }
.host .services-thumbs img { margin-top:12px; }

.services-thumbs         { height:200px; margin-top:20px; }
.services-text           { padding:0 5px; text-align:center; }

.web, 
.graphic, 
.host, 
.print { width:250px; margin-top:0px;  text-align:center; float:left; position:relative; z-index:2; display:block;  cursor:pointer; }

li.drop-web,
li.drop-graphic,
li.drop-print,
li.drop-host     { height:0px; position:relative; z-index:1; }

li.drop-web      { background:url(../images/active-section-left.png) no-repeat top center; }
li.drop-graphic  { background:url(../images/active-section.png) no-repeat top center; }
li.drop-print    { background:url(../images/active-section.png) no-repeat top center; }
li.drop-host     { background:url(../images/active-section-right.png) no-repeat top center; }

/* Footer */
.wrapper-footer { width:100%; background:url(../images/back-footer-rep.jpg) repeat-x bottom; padding-top:40px; }
.footer         { width:980px; margin:auto; padding:10px; overflow:hidden; font-size:12px; }
.social-media,
.w3c,
.payments       { float:left; width:315px; padding:10px 10px 10px 0; }
.payments img   { margin:20px 0 0 0; }

/* Copyright */
#copyright { width:960px; }
.terms     { text-align:right; font-size:11px; width:230px; }
.terms img { margin-bottom:5px; }
.copy a    { font-weight:bold; }
.copy      { width:650px; font-size:11px; color:#333; }

/* Form Labels */
form p { position:relative; }
label  { position:absolute; top:0; left: 0; }
form p { position: relative; margin: 10px 0; }
form p label { position: absolute; top: 0; left: 0; }
form p br    { display: none; } 

form fieldset p input,
form fieldset p textarea {
	display: block;
	padding: 4px;
	width: 150px;
	margin: 0;
}
form fieldset p label {
	width: 130px;
	display: block;
	margin: 6px 5px 5px 30px;
	padding: 0; cursor:text;
} 

/* Newletter */
.newsletter             { float:left; width:270px; height:139px; margin:65px 0 0 55px; background:url(../images/newsletter.png) no-repeat top left; padding:70px 0 0 30px; }
.button-subscribe       { background:url(../images/button-subscribe.png) top left no-repeat; width:106px; height:30px; border:none; margin:10px 60px 0 0; float:right; }
.button-subscribe:hover { background:url(../images/button-subscribe.png) top right no-repeat; cursor:pointer; }
#newsletter-email       { width:175px; padding:5px 5px 9px 30px; background:url(../images/input-icons.gif) no-repeat 0 -42px #fff; border:solid 1px #CFCFCF; }
#newsletter-code-input  { width:75px; padding:5px 5px 6px 30px; background:url(../images/input-icons.gif) no-repeat bottom left #fff; float:left; border:solid 1px #CFCFCF; margin-top:10px; }
#newsletter-code        { float:left; margin-top:15px; }
.newsletter-privacy     { font-size:10px; color:#999; margin:10px 0 0 65px; width:260px; float:left;} 

#newsletter-code-input:hover, 
#newsletter-email:hover, 
#newsletter-code-input:focus, 
#newsletter-email:focus { border:solid 1px #20CAFD; }

#code-input { margin:15px 0 0 130px; }
#frmSS1 p   { margin:0; }
#frmSS1 label,
#frmSS1 input { font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:11px; letter-spacing:-1px; }

/* 404 Error Page */
.error-page      { width:565px; height:272px; background:url(../images/back-404.png) no-repeat top left; margin:100px 0 130px 200px; float:left; padding:30px 0 0 30px; }
.error-page div  { float:left; }
.error-page img  { padding-right:200px; }
.error-page span { font-size:18px; color:#333; letter-spacing:-1px; }
.error-page em   { font-family:Georgia, 'Times New Roman', Times, serif; }

.error-page a      { width:249px; height:64px; background: url(../images/button-back.gif) no-repeat top right; display:block; margin:121px 0 0 32px; float:left; }
.error-page a span { background:url(../images/button-back.gif) no-repeat top left; display:block; width:249px; height:64px; }

/* Portfolio */
.fade     { float:left; display:block; z-index:10;}
.fade div { position:absolute; display:none; float:left; overflow:hidden; z-index:1; }
.tools-used { }
.project-right-menu    { margin:40px 0 0 30px; }
.project-right-menu li { padding:10px; display:block; width:300px; }
.project-right-menu li.title { background-color:#d8d8d1; vertical-align:middle; }

#fb    { float:left; }
#fb span:hover { opacity:1 !important; }
.share { text-align:right; margin-top:-15px; padding-left:417px; }
.after-share { padding-top:15px; clear:both; }
.tweet { margin-top:0px; float:left; }

/* SiteMap */
ul.sitemap         { float:left; }
ul.sitemap a       { color:#FFF; font-weight:bold; }
ul.sitemap a:hover { color:#CCC; }
ul.sitemap li {
	background-color:#535F5F;
	color:#99AFAF;
	padding:15px 5px;
	width:111px;
	margin:10px 5px;
	text-align:center;
	
	border-radius: 4px;
	-opera-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.light { background-color:#7D8F8F !important; }