/* Aress Software Typography Styles
   Updated: Fri 16.01.09 @ 09:00 a.m.
   Author: Aress Design Studio
   Version: 1.0
   ----------------------------------------------------*/


/* RESET
   ----------------------------------------------------
   
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}*/


/* GENERIC
   ----------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	background: url(../images/bg.jpg) repeat-x;
	font: 12px/14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #757575
}

body.inner {
	margin: 0px;
	padding: 0px;
	background: url(../images/bg-inner.jpg) repeat-x top;
	font: 12px/14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #757575
}

body.inner2 {
	margin: 0px;
	padding: 0px;
	background: url(../images/bg2.jpg) repeat-x top;
	font: 12px/14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #757575
}

img {
	border:none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
.clear {
	clear: both
}
.mainwrapper {
	width: 1004px;
	margin: 0px auto
}
h1, h2, h3, h4, h5 {
	margin: 0px;
	padding: 0px
}
/* TOP SECTION
   ----------------------------------------------------*/
.homeheader {
	width: 940px;
	height: 228px;
	margin: 0px auto
}

.innerheader {
	width: 940px;
	height: 260px;
	margin: 0px auto
}

.innerheader1 {
	width: 940px;
	height: 250px;
	margin: 0px auto
}

.top {
	height: auto;
	padding-top: 12px
}
.logo {
	width: 293px;
	float: left
}
.logo {
	text-indent: -13000px;
	background: url(../images/logo.jpg) no-repeat;
	height: 102px;
	display: block;
	padding: 0px;
	margin: 0px
}
.nav {
	width: 631px;
	float: right;
	text-align: right;
	padding-top: 22px
}

.skip { margin-bottom: 16px; height: 22px; text-align: right; padding-right: 8px; font-size: 10px }

.skip a{ border-bottom: dotted #757575 1px;
	font-size: 10px;
	color: #757575;
	text-decoration: none }


.headtext {
	color: #b3b3b3;
	font-size: 16px;
	text-align: center;
	font-family:arial, 'Delicious', georgia, serif;
	padding-top: 15px;
	font-weight: bold;
	height: 32px;
}

.headtext h1 {visibility:hidden;}
.headtext h3 {visibility:hidden;}

.pagetext {
	color: #b3b3b3;
	font-size: 16px;
	text-align: justify;
	padding-top: 20px;
	height: 115px;
	font-weight: normal;
	margin-bottom: 10px
}

.pagetext1 {
 color: #b3b3b3;
 font-size: 16px;
 text-align: justify;
 padding-top: 20px;
 height: auto;
 font-weight: normal;
 margin-bottom: 20px;
 padding-left:5px;
}

.pagetext h4, .pagetext h5 { color: #498ec2 }

.pagetext h5 { font-weight: normal; font-size: 12px }

/* SLIDER
   ----------------------------------------------------*/
#masthead {
	margin: 0px auto 0;
	width: 1004px;
}
#masthead-inner {
	height: 228px;
	position: relative;
}
#masthead h2 {
	color: #AAAE44;
	height: 47px;
	font-size: 40px;
	letter-spacing: -3px;
	text-indent: -13000em;
}
#masthead a:link#back, #masthead a:visited#back, #masthead a:link#next, #masthead a:visited#next {
	background: transparent url(../images/rtarrow1.png) no-repeat 0 0;
	display: block;
	height: 53px;
	position: absolute;
	right: 10px;
	top: 79px;
	text-indent: -13000em;
	width: 53px;
	z-index: 10;
}
#masthead a:link#back, #masthead a:visited#back {
	background-image: url(../images/ltarrow1.png);
	left: 15px;
	right: auto;
}
#masthead a:link#next, #masthead a:visited#next {
	left: auto;
	right: 15px;
}
#masthead a:hover#back, #masthead a:active#back, #masthead a:hover#next, #masthead a:active#next {
	background-position: 0 -52px;
	z-index: 7;
}
#featured {
	bottom: 105px;
	height: 228px;
	left: 327px;
	position: absolute;
	width: 354px;
	z-index: 10;
}
#featured img {
	position: absolute;
	top: 100px;
}

#featured a{ color: #090 }

#featured #panel {
	background: #0a0b07;
	bottom: -85px;
	height: 36px;
	left: 42px;
	overflow: hidden;
	position: absolute;
	width: 260px;
	z-index: 1;
}
#featured #panel h2 {
	font-size: 0;
	text-indent: -13000em;
}
#featured #panel h2 a:link,  #featured #panel h2 a:visited {
	background: #000000 url(../images/button-featured.png) no-repeat 0 0;
	display: block;
	height: 36px;
}
#featured #panel h2 a:hover,  #featured #panel h2 a:active {
	background-position: 0 -36px;
}
#featured #panel h2 a:link.act,  #featured #panel h2 a:visited.act {
	background-position: 0 -72px;
}
#featured #panel p {
	color: #efd093;
	font-size: 11px;
	line-height: 20px;
	margin: 0 20px 15px;
	text-align: center;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
#featured #panel p a:link{
	color: #efd093;
}
#project-slider-wrap {
	height: 250px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	width: 100%;
	z-index: 2;
}
#project-slider {
	height: 198px;
	list-style: none;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	top: 20px;
	width: 978px;
	z-index: 0;
}
#project-slider li {
	float: left;
	height: 198px;
	position: relative;
	width: 326px;
}
#project-slider li img {
	left: 0px;
	position: absolute;
	top: 0px;
}
#project-slider li .panel {
	background: #0a0b07;
	bottom: 28px;
	height: 26px;
	left: 41px;
	overflow: hidden;
	position: absolute;
	width: 192px;
	z-index: 15;
}
#project-slider li .panel h2 {
	font-size: 0;
	text-indent: -13000em;
}
#project-slider li .panel h2 a:link,  #project-slider li .panel h2 a:visited {
	background: #000000 url(../images/button-project.png) no-repeat 0 0;
	display: block;
	height: 26px;
}
#project-slider li .panel h2 a:hover,  #project-slider li .panel h2 a:active {
	background-position: 0 -26px;
}
#project-slider li .panel h2 a:link.act,  #project-slider li .panel h2 a:visited.act {
	background-position: 0 -52px;
}
#project-slider li .panel p {
	color: #93945e;
	font-size: 11px;
	line-height: 18px;
	margin: 0 20px 15px;
	text-align: center;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}
/* HOME CONTENT
   ----------------------------------------------------*/
.homecontent {
	color: #757575;
	width: 929px;
	margin: 0px auto
}
.post {
	width: 267px;
	float: left;
	margin-right: 64px;
	margin-bottom: 50px
}
.post2 {
	width: 283px;
	float: left;
	margin-right: 72px;
	margin-bottom: 30px
}
.post3 {
	width: 222px;
	float: left;
	text-align: center;
	margin-right: 21px
}
.post a, .post2 a {
	border-bottom: dotted #458ab0 1px;
	font-size: 10px;
	color: #458ab0;
	text-decoration: none
}
.post3 img {
	padding: 0px;
	margin-top: 13px;
	margin-bottom: 5px;
	border: none;
}
.postright {
	float: right;
}
.postclear {
	clear: both;
}
.posttitle {
	color: #000;
	font-size: 16px;
	border-bottom: dotted #000 1px;
	display: block;
	padding-bottom: 4px;
}
.postbold {
	font-weight: bold;
	color: #000;
	font-size: 11px; 
}
p.postbold { margin-bottom: 0px; padding-bottom: 0px; }

.post2 p{ margin-top: 0px }

.post2 .posttitle { margin-top: 16px }

.servicesblock {
	background-color: #183657;
	width: 100%;
	color: #fff
}
.services {
	width: 940px;
	margin: 0px auto;
	padding-bottom: 22px;
	padding-top: 12px
}


.servicespost { float: left; margin-right: 65px }

.servicespost2 { float: left; }

.services ul li { color: #2d98c1; }

.services ul li a{ color: #2d98c1; text-decoration: none }

.services ul { margin: 0px; padding: 0px 0 0 16px }

.services li { list-style-image: url(../images/green.jpg); font: 11px/20px "Lucida Grande", "Lucida Sans Unicode", sans-serif; border-bottom: dotted #8c9bab 1px }

.services li.last { list-style-image: url(../images/green.jpg); font: 11px/20px "Lucida Grande", "Lucida Sans Unicode", sans-serif; border-bottom: none  }


.services2 {
	width: 940px;
	margin: 0px auto;
	padding-bottom: 22px;
	padding-top: 12px;
	border-top: dotted #41668f 1px
}

.servicesfoot {
	width: 840px;
	margin: 0px auto;
}

.question { width: 355px; float: left; margin-right: 65px; padding-left: 57px; background: url(../images/mark.jpg) no-repeat top left }

.question img { border: none }

.client { float: left; width: 298px; border-left: dotted #41668f 1px; padding-left: 60px }

.clogo { width: 248px; height: 72px; border: solid #465e79 0px; text-align: center; padding: 4px }

.smallform { border-top: dotted #41668f 1px; padding-top: 10px }

.field { border: solid #0c2642 1px; background-color: #465e79; color: #fff; padding: 0 3px 0 3px; height: 21px; width: 130px }

.field2 { border: solid #0c2642 1px; height: 40px; background-color: #465e79; color: #fff; padding: 0 3px 0 3px }

form.link{
    margin:0;
    padding:0;
    }
.link button{
    margin:0;
    padding:0;
    border:0;
    width:61px;
    font-size:11px;
	font-weight:bold;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
	background: url(../images/but.jpg);
	height: 22px
    }



.link button:hover,
.link button:focus{
    color: #c5dd52;
    }


/* FOOTER
   ----------------------------------------------------*/
.footer { padding: 23px 0 23px 0; text-align: center; font-size: 11px; color: #727272 }

.footer a {
	border-bottom: dotted #727272 1px;
	color: #727272;
	text-decoration: none
}


.footer2 { padding: 23px 0 23px 0; text-align: left; font-size: 11px; color: #727272; border-top: solid #ccc 1px;margin-top: 150px }

.footer2 a {
	border-bottom: dotted #727272 1px;
	color: #727272;
	text-decoration: none
}



/* SUB PAGES
   ----------------------------------------------------*/
.innercontent {
	color: #757575;
	width: 940px;
	margin: 0px auto
}

.bread { padding-top: 40px; border-bottom: solid #f7f7f7 2px; padding-bottom: 10px; font-size: 11px }

.bread a{ color:#757575; text-decoration: none }

.bread a:hover{ color:#757575; text-decoration: none; border-bottom: dotted #757575 1px }

.sec { float: left; width: 677px }

.sec1 { float: left; width: 459px }

.sec1 a{ color:#af0606; border-bottom: dotted #af0606 1px; text-decoration: none }

.sec2 { float: left; width: 218px }

.sec3 { float: left; width: 213px; text-align: center; background: url(../images/in-right-bg.jpg) no-repeat; height: 471px; padding-left: 41px; padding-right: 9px }

.sec3 img{ margin-bottom: 18px }

.inservices { margin-bottom: 34px }

.sec4 { float: left; width: 518px }

.sec4 a{ color:#af0606; border-bottom: dotted #af0606 1px; text-decoration: none }

.sec5 { float: left; width: 159px }


.portfolioblock {
	background-color: #183657;
	width: 100%;
	color: #fff
}
.portfolio {
	width: 940px;
	margin: 0px auto;
	padding-bottom: 22px;
	padding-top: 12px
}

.portfolio a{ text-decoration: none }

.portfoliopost { float: left; margin-right: 25px; border-right: dotted #ccc 1px; width: 205px; height: 460px}

.portfoliopost2 { float: left;  }

.portfolio ul { overflow: hidden; float: left; list-style: none; width: 175px; margin: 0 -20px 0 0; padding: 0; background: transparent url(../images/porto-over1.jpg) repeat-y 195px 0; }
.portfolio li { float: left; padding: 0 20px 0 19px; margin-left: -20px; border-left: 1px solid #EDEDED; }
.portfolio li span,
.portfolio li a { float: left; width: 175px; height: 19px; padding: 1px 0 0 8px; background: transparent url(../images/porto-over-new.jpg) no-repeat 0 22px; color: #2d98c1; font-size: .917em; 

/*text-transform: lowercase;*/ }
.portfolio li span strong,
.portfolio li a strong { overflow: hidden; display: block; width: 150px; margin: 0 0 -1px; color: #F47F20; font-size: 12px; font-weight: 400; text-transform: none; white-space: nowrap; }
.portfolio li a:hover { background-color: #000; background-position: 0 0; color: #777; }
.portfolio li a:hover strong { color: #FFF; }
.portfolio li span { background-position: 0 -38px; }
.portfolio li span strong { color: #757575; }
.portfolio div.ehm { overflow: hidden; }
.portfolio li a:hover span { color: #333 }


.workmain { margin-bottom: 20px; border: solid #ccc 1px; text-align: center }

.work { margin-bottom: 20px; }

.asterics { color: #F00 }



/*
** tooltips
*/
p#tooltip-alt { position: absolute; padding: 0 0 0 15px; background: transparent url(../images/tooltip_alt_left.png) no-repeat 0 0; color: #000; font-size: .917em; line-height: 26px; }
p#tooltip-alt span { display: block; padding: 0 10px 0 0; background: transparent url(../images/tooltip_alt_right.png) no-repeat 100% 0; }


.workmain .screenshot { width: 460px; padding: 20px 19px 25px 0; }
.workmain .screenshot p { position: absolute; padding: 0; }
.workmain .screenshot div { position: relative; z-index: 2; overflow: hidden; width: 460px; padding: 345px 0 0; font-size: .917em; text-align: right; line-height: 17px; }
.workmain .screenshot div p { position: static; float: left; }
.workmain .screenshot div.right { width: auto; margin-top: 0; padding: 0; background: transparent; font-size: 1em; }
.workmain .screenshot .right p { position: static; padding-right: 9px; text-align: right; }
.workmain .screenshot .right ul { float: left; list-style: none; margin: 0; padding: 0; }
.workmain .screenshot .right li { float: left; }
.work .screenshot .right a { float: left; width: 18px; margin-left: 1px; background: transparent url(../images/button_04.png) no-repeat 0 0; color: #888; font-size: .909em; text-align: center; }
.workmain .screenshot .right a.selected,
.workmain .screenshot .right a:hover { background-color: #000; background-position: 0 100%; color: #FFF; }

.workall { width: 612px; margin: 22px auto; height: auto }

.workth { float: left; width: 200px; margin-bottom: 6px; height: 78px; background-image: url(../images/blank-th.jpg) }

.workthmid { float: left; width: 200px; margin: 0px 6px 6px 6px; height: 78px; background-image: url(../images/blank-th.jpg) }




/* TABBED DATA
   ----------------------------------------------------*/

.tabbedBox { height: 363px }

#idList {
	margin: 0;
	padding: 0;
	
}

#idList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 120px;
	background: #333;
	color: #888;
	
}

#tablist{
padding: 26px 0;
margin: 0;
background-image: url(../images/tab-bg.png);
width: 673px; height: 118px;
background-repeat: no-repeat
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 0px ;
margin-left: 0px;
border-bottom: none;

}


#tablist li img{
border: none;
}

#tablist li a:link, #tablist li a:visited{
color: navy; 
}

#tablist li a.current{

}

#tabMain { border-top: solid #dedede 1px; border-left: solid #dedede 1px; border-right: solid #dedede 1px; background-color: #fafaf4; width: 661px; margin: 0px auto; color: #484848 }

#tabcontentcontainer{

/* Insert Optional Height definition here to give all the content a unified height */
padding: 0px;
height: 310px;
}

.tabcontent{
display:none;
}

.tabcontent a{ color: #2775b0; border-bottom: dotted #2775b0 1px; text-decoration: none }

.tabdesign { background-image: url(../images/1.png) }

#sc1 { text-align: justify; background-color: #fafaf4; padding: 12px }
#sc2 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/design-tab.jpg) no-repeat; min-height: 192px }
#sc3 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/opti-tab.jpg) no-repeat; min-height: 192px }
#sc4 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/logo-tab.jpg) no-repeat; min-height: 192px }
#sc5 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/joomla-tab.jpg) no-repeat; min-height: 192px }
#sc6 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/flash-tab.jpg) no-repeat; min-height: 192px }
#sc7 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/print-tab.jpg) no-repeat; min-height: 192px }
#sc8 { text-align: justify; background-color: #fafaf4; padding: 12px; background: url(../images/analy-tab.jpg) no-repeat; min-height: 192px }





#panel1b {left: 0; width: 89px; height: 118px; }
#panel2b {left: 96px; width: 75px;}
#panel3b {left: 172px; width: 110px;}
#panel4b {left: 283px; width: 117px;}

#panel1b a:hover, #panel2b a:hover, #panel3b a:hover, #panel4b a:hover, #panel5b a:hover, #panel6b a:hover, #panel7b a:hover { position: relative; top: -30px }


/* LIGHTBOX
   ----------------------------------------------------*/
.demo-stream
{
	list-style:				none;
	margin:					0px;
	width: 100%;
}

.demo-stream li
{
	float:					left;
	padding:				0px;
	width:					200px;
	height:					78px;
	margin-bottom: 6px;
	display: inline
}

.workall ul { padding-left: 0px }



/* PAGINATION
   ----------------------------------------------------*/
div.pagination {
	padding:3px;
	margin:3px;
	text-align:right;
}

div.pagination a {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid #2C2C2C;
	text-decoration: none; 
	color: #fff;
	background: #2C2C2C url(../images/image1.gif);
}

div.pagination a:hover, div.pagination a:active {
	border:1px solid #AAD83E;
	color: #FFF;
	background: #AAD83E url(../images/image2.gif);
}

div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid #AAD83E;
  font-weight: bold;
	background: #AAD83E url(image2.gif);
	color: #FFF;
}

div.pagination span.disabled {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid #f3f3f3;
	color: #ccc;
}



/* CONTACT
   ----------------------------------------------------*/
   
.contact-left { float: left; width: 327px }

.contact-right { float: left; width: 350px } 
   

dd, dt { padding-bottom: 14px; font-size: .9em }

dd a, dt a { text-decoration: none; color: #069 }

dd a:hover, dt a:hover { text-decoration: none; color: #069; border-bottom: dotted #069 1px }

dt { font-weight: bold }
   
   


.buttonmain {background: #fff; padding: 1px; font-family: Geneva, Vera, Arial, Helvetica, sans-serif; font-size: x-small; font-variant: small-caps; border:  solid #999999 1px; margin-right: 5px }

.blueblock { color: #ffffff; background: #0298bd; padding: 0px 3px 0px 3px; }

.yellowblock { color: #ffffff; background: #ffb61f; padding: 0px 3px 0px 3px; }

.greyblock { color: #000; background: #f7f7f7; padding: 0px 12px 0px 3px; }