/********************************************

BASIC CSS
This Page is For All HTML pages
Contains layout and header/footer

********************************************/



/********************************************
BASIC LAYOUT
********************************************/

* {
	margin: 0;
	padding: 0
}
html,
body,
table,
tr,
th,
td,
p,
div,
a,
form {
	margin:0;
	padding:0;
	outline:0;
	border:0;
	font-size: 100%;
	vertical-align: baseline;
	outline-color:invert;
	outline-style:none;
	outline-width:0pt;
}
img {
	border:none;
}
#thePage {
}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:15px;
	color: #333;
	background:#09c url(../images/bg_test1.png) repeat-x top center;
	padding-bottom:0px;
	behavior:url("csshover.htc");
}
body#portfolio {
	background:#e95016 url(../images/bg_portfolio2.png) repeat-x top center;
}
body#about {
	background:#9c3 url(../images/bg_about.png) repeat-x top center;
}
body#contact {
	background:#d9ffb2 url(../images/bg_contact.png) repeat-x top center;
}
body#kablog {
	background:#cff url(../images/bg_kablog.png) repeat-x top center;
}
a,
a:link,
a:visited {
	color:#06c;
	text-decoration: none;
}
a:focus,
a:link:hover,
a:visited:hover,
a:active {
	text-decoration: underline;
}
a.arrow,
a.arrow:link,
a.arrow:visited {
	padding-left: 12px;
	background: url(../images/bullet_arrow.gif) no-repeat 0 0;
}
h1 {
	display:none;
}

blockquote {margin:15px 30px;}
#header {
	width: 930px;
	margin-left: auto;
	margin-right: auto;
	margin-top:0px;
	display:block;
	height:50px;
}
#home #logo {
	display:none;
}
#home #flash_logo {
	position:absolute;
	width:289px;
	height:139px;
	margin-left:14px;
	margin-top:15px
}
#main_body {
	width:930px;
	margin-left: auto;
	margin-right: auto;
	height:500px;
}
#home #main_body {
	/*background:transparent url(../images/logo_home.png) no-repeat 33px 40px;*/
}
#main_body:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
}
#main_body {
	display: block;
}
#bot_wrapper {
	width: 930px;
}
#window_wrapper {
	clear:both;
}
#nav_wrapper {
	width: 450px;
	height:45px;
	float:right;
}

#footer { display: none;}


/* home news items ------------------------ */


    
    #home .hm_item {
        width:200px;
        position:absolute
    }
    #home .hm_item .about_inner {
        background:url(../images/bg_border.png);
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_border.png', sizingMethod='scale');
        width:200px !important;
        padding:10px;
    }
    .hm_item .inner {
        background-color:#fff;
        padding:15px 15px;
    }
    .hm_item h2 {
        font-size:16px; 
        font-weight:bold;
         line-height:19px; 
         margin-bottom:4px;
    }
    .hm_item h3 {
        font-size:12px;
        line-height: 15px;
        margin-bottom:10px;
    }
    .hm_item p {
        font-size:12px;
        line-height: 15px;
        
    }


/* home site promos ----------------------- */

	#home .hm_site {
		width: 300px;
		position:absolute
	}
	 #home .hm_site .about_inner {
		background:url(../images/bg_border_hm_site.png);
		width: 300px !important;
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_border.png', sizingMethod='scale');
    }
    #home .hm_site .inner {
        padding:10px;
        width: 280px !important;
    }
    
    .hm_site h3 {
        font-size:13px;
        margin-bottom:10px;
        color:#333;
    }
    .hm_site .site_info {
        padding-top:8px;
    }
    .hm_site .date {
        font-weight:bold; 
		font-size:11px
    }
    .hm_site .details {
        float:right;
        font-weight:bold;
		font-size:11px
    }


/* client list ---------------------------- */
    
    #clients_list {
        clear:both;
        padding-top:20px;
    }
	#clients_list .case_info1 {
        font-size:10px;
        color:#fff;
        background:transparent url(../images/icon_clients_reveal_key.gif) no-repeat 5px 6px;
        padding:6px 15px 6px 16px;
    }
    #clients_list .case_info {
        font-size:10px;
        color:#fc0;
        background:transparent url(../images/icon_clients_cs_key.gif) no-repeat 5px 6px;
        padding:6px 15px 6px 20px;
    }
    #clients_list .case_info2 {
        font-size:10px;
        color:#9ff;
        background:transparent url(../images/icon_clients_site_key.gif) no-repeat 5px 6px;
        padding:6px 15px 6px 20px;
    }
    #clients_list #col1 {
        float:left;
        padding-right:15px
    }
    #clients_list #col2 {
        float:left;
        padding-right:15px
    }
    #clients_list #col3 {
        float:left;
    }
    #clients_list #col_right {
        float:right
    }
    #key {
        clear:both;
        padding-bottom:10px;
    }
    
    #portfolio .client {
        display: block;
        width: 300px;
        background: transparent url(../images/bg_client_bar.png) repeat 0 0;
        padding-bottom: 0px;
        margin-bottom: 1px;
    }
    #portfolio .client div {
    }
    #portfolio .client div.hover {
        background-image: url(../images/bg_client_bar.png);
    }
    #portfolio .client {
        _background: #D56369;
    }
    #portfolio .client div.hover {
        _background: #DDA9AB;
    }
    #portfolio .client h3 {
        display: block;
        font-size:12px;
        line-height: 17px;
        color: #fff;
        padding: 7px 5px 7px 20px;
        font-weight: normal;
    }
    #portfolio .client div.projects h3.trigger {
        background: url(../images/bullet_clients_closed.gif) no-repeat 2px 7px !important;
        cursor: pointer;
    }
    #portfolio .client div.opened h3.trigger {
        background: url(../images/bullet_clients_open.gif) no-repeat 2px 10px !important;
        padding-bottom:3px;
    }
    #portfolio .client div ul {
        display: none;
    }
    #portfolio .client div.opened ul {
        display: block;
        list-style-type: none;
        padding: 0px 5px 6px 20px;
    }
    #portfolio .client div.opened ul li {
        color:#fff;
        padding:3px 0;
    }
    #portfolio .client a.cs,
    #portfolio .client a.ln {
        width: 15px;
        height: 17px;
        display:-moz-inline-box;
        display:inline-block;
        background:transparent none left center no-repeat;
        text-indent:-3000px;
        font:0/17px Arial;
        overflow:hidden;
        vertical-align:bottom;
        margin-left: 10px;
    }
    #portfolio .client a.cs {
        background-image: url(../images/icon_clients_cs.png);
        _background-image:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icon_clients_cs.png');
    }
    #portfolio .client a.ln {
        background-image: url(../images/icon_clients_site.gif)
    }
    #portfolio .client a:hover,
    #portfolio .client a:active {
        background-color: none;
        text-decoration: none;
        cursor: pointer !important;
    }

/* case study ----------------------------- */
    
    #case_study .client {
        width:300px;
        margin-bottom:1px;
        background: url(../images/bg_client_bar.png);
        text-decoration:none;
        _background:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_client_bar.png', sizingMethod='scale');
    }
    
    #case_study .client a {
        display:block;
        text-decoration:none;
    }
    #case_study .client a span {
        position:relative;
        display:block;
        font-size:11px;
        line-height:15px;
        font-weight: bold;
        color:#fff;
        padding:6px;
    }
    #case_study .client.case_study a span {
        text-decoration:none;
    }
    #case_study em {
        font-style:normal;
        font-weight:normal;
    }
    #case_study .client a:hover, #case_study .client a.activeSlide {
        background: url(../images/bg_client_bar.png);
        text-decoration:none;
        _background: #C56FA8 !important;
        position:relative;
    }


/* case study previews -------------------- */

	#portfolio .case_site {
		width: 224px;
		position:absolute
	}
	#portfolio .theTop,
    #portfolio .theTop .about_right_shadow {
		background: none;
	}
	#portfolio .about_inner {
		background:url(../images/bg_border_hm_site.png);
		_background:none;
		width: 224px;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_border_hm_site.png', sizingMethod='scale');
	}
	#portfolio .about_info .inner {
		padding:20px;
	}
	
	#portfolio .about_info .content {
		background-color:#fff;
		padding:20px;
	}
    #portfolio .case_site .inner {
        padding:7px;
    }
    #portfolio .case_site h3 {
        float:left;
        font-size:11px;
        line-height: 13px;
        margin-bottom:5px;
        width:185px;
    }
    .case_site .site_info {
        padding-top:8px;
    }

    .exp { }
    .exp a {
        float: right; 
        display:block;
        background:transparent url(../images/icon_exp.gif) no-repeat 0 0;
        width:21px;
        height:18px;
        margin-bottom:5px;
        text-indent: -999em;
    }
    .exp a:hover {
        background-position:bottom;
    }

    
    
    #the_case_study {
        width:550px;
        background:transparent url(../images/about_bot_shadow.png) no-repeat bottom left;
        _background: none;
        z-index:150;
        position:absolute;
        margin-left:13px;
        padding-bottom:10px;
    }
    #the_case_study .case_right_shadow {
        background:transparent url(../images/about_right_shadow.png) no-repeat top right;
        _background: none;
        padding-right:10px;
    }
    #the_case_study .case_inner {
        background:#FFf0e6 url(../images/bg_cs.png) repeat-x;
    }
    
    
    #the_case_study .content {
        padding:20px;
    }
    .buttons {
        display:inline-block;
        width:71px;
        float:right;
        padding-top:0;
        padding-left:0;
    
        text-indent:-999em;
    }
    .window {
        float:left;
        display:block;
        width:16px;
        height:16px;
        margin-right:10px;
        border:0px solid red;
    }
    .window a {
        display:block;
        width:16px;
        height:16px;
        background:transparent url(../images/icon_window.gif) no-repeat 0 0;
    }
    .window a:hover {
        background-position:bottom;
    }
    .print {
        float:left;
        margin-right:10px;
    }
    .print a {
        display:block;
        width:20px;
        height:16px;
        background:transparent url(../images/icon_print.gif) no-repeat 0 0;
    }
    .print a:hover {
        background-position:bottom;
    }
    .close {
        float:right;
    }
    .close a {
        display:block;
        width:15px;
        height:16px;
        background:transparent url(../images/icon_close.gif) no-repeat 0 0px;
    }
    .close a:hover {
        background-position:bottom;
    }
    #the_case_study h2 {
        color:#906;
        font-weight: bold;
        font-size: 18px;
        line-height:20px;
    }
    #the_case_study h2 .date {
        font-weight: normal;
    }
    #the_case_study h4 {
        color:#906;
        font-weight: bold;
        margin-bottom:10px;
    }
    .photo {
        padding-top:0px;
        padding-bottom:0;
    }
    .cs_main_photo {
        width: 500px;
        margin-top:10px;
        margin-bottom:5px;
        text-align:center;
    }
    .cs_main_logo {
        width: 500px;
        margin-top:15px;
        margin-bottom:0px;
        text-align:center;
    }
    .thumbs {
        height:28px;
        padding:3px 0 0px 0;
        margin-bottom:20px;
        borsder-top:1px solid #906;
    }
    .thumbs a {
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
        display:block;
        margin-right:6px;
        float:left;
    }
    .thumbs a:hover {
        filter:alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        padding-bottom: 1px;
        border-bottom:3px solid #999;
    }
    .thumbs a.activeSlide {
        filter:alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        padding-bottom: 1px;
        border-bottom:3px solid #906;
    }
    .thumbs a.last {
        margin-right:0;
    }
    .website {
        margin-bottom:10px;
    }
    .logowebsite {
        margin-bottom:0;
        margin-top:10px;
    }
    .case_text {/*height:190px;overflow : auto; */
        display:block;
        padding-right:15px;
        clear:left;
    }
    .case_text p {
        padding-bottom:15px;
    }
    .case_text ul {
        list-style-type: none;
        padding: 0;
        margin-bottom: 15px;
    }
    .case_text ul li {
        padding-left:10px;
        background: url(../images/bullet2.gif) no-repeat 0px 3px;
        margin: 0 0 7px 0;
    }


/* about ---------------------------------- */
	
	.about_info {
		width:550px;
		padding-bottom:10px;
		_padding-bottom: 0;
		position:absolute
	}
	#about .theTop {
		background:transparent url(../images/about_bot_shadow.png) no-repeat bottom left;
		_background: none;
	}
	#about .theTop .about_right_shadow {
		background:transparent url(../images/about_right_shadow.png) no-repeat top right;
		padding-right:10px;
		_background: none;
		_padding-right: 0;
	}
	.about_inner {
		background:url(../images/bg_border.png);
		_background:none;
		_width: 540px;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg_border.png', sizingMethod='scale');
	}
	.about_info .inner {
		padding:20px;
	}
	.about_info .content {
		background-color:#fff;
		padding:20px;
	}
	.about_info p {
		padding-bottom:15px
	}
	.about_info .photo {
		padding-bottom:20px;
	}
	#about h2 {
		font-size: 18px;
		line-height:23px;
		padding-bottom:10px;
		color:#099;
		font-weight:bold;
	}
	#about h3 {
		font-size: 12px;
		line-height:15px;
		padding-bottom:10px;
		color:#099;
		font-weight:bold;
		padding:0;
		margin:0;
	}
	#about h3 .normal {
		font-weight:normal;
	}
	#about strong {
		color:#099;
	}
	#about .content ul {
		padding-bottom:15px;
	}
	#about .content ul li {
		list-style-type:none;
		background:transparent url(../images/about_bullet.gif) no-repeat 0 5px;
		padding-left:12px;
	}
	#about .buttons {	
		width:20px;
	}
	#about .print a {
		background:transparent url(../images/icon_about_print.gif) no-repeat 0 0;
	}
	#about .print a:hover {
		background-position:bottom;
	}


/* contact --------------------------------- */

	#contact .theTop {
		background:transparent url(../images/about_bot_shadow.png) no-repeat bottom left;
		_background: none;
	}
	#contact .theTop .about_right_shadow {
		background:transparent url(../images/about_right_shadow.png) no-repeat top right;
		padding-right:10px;
		_background: none;
		_padding-right: 0;
	}
	#contact h2 {
		width:460px;
		height:21px;
		margin-bottom:10px;
		text-indent: -999em;
	}
	#contact h3 {
		color:#f60;
		font-weight:normal;
		margin:10px 0 5px 0;
	}
	#contact .photo {
		padding:5px 0 20px 0;
		margin:0;
	}
	#contact form .textBox {
		width:450px;
		border:none;
		background-color:#ede9e0;
		padding:4px;
	}
	#contact form .textArea {
		width:450px;
		border:none;
		background-color:#ede9e0;
		padding:4px;
	}
	#contact form button {
		background: url(../images/contact_send.gif) no-repeat top;
		border: 0; 
		padding: 0;
		border-collapse: collapse;
		width: 80px;
		height: 26px;
		margin-top: 10px;
	}
	#contact form button span { 
		visibility: hidden; 
	}
	#contact form button:hover {
		background-position: bottom;
	}
	#contact .bgla {
		background: #fff url(../images/contact_bg_la.gif) no-repeat 0 0;
	}
	#contact .bgmil {
		background:#fff url(../images/contact_bg_mil.gif) no-repeat 0 0;
	}
	#contact .buttons {	
		width:20px;
	}
	#contact .print a {
		background:transparent url(../images/icon_contact_print.gif) no-repeat 0 0;
	}
	#contact .print a:hover {
		background-position:bottom;
	}
	

/* kablog small windows ------------------- */

	#kablog .case_site {
		width: 310px;
		position:absolute
	}

	#kablog .about_inner {
		background:url(../images/bg_border_hm_site.png);
		_background:none;
		_width: 290px;
		_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_border_hm_site.png', sizingMethod='scale');
		padding: 15px;
	}
	#kablog .case_site .inner {
		padding: 0;
	}
    
	#kablog .case_site .inner em {
		color:#7a7a7a;
		text-transform:uppercase;
		font-size:11px;
		line-height: 13px;
	}
	#kablog .case_site .inner h3 {
		
		font-weight: bold;
		font-size: 18px;
		line-height:20px;
		color:#825528;
		width:250px;
		margin-bottom:10px;
	}
	#kablog .case_site .inner h3 a,
	#kablog .case_site .inner h3 a:link,
	#kablog .case_site .inner h3 a:visited {
		color:#825528;
	}
	#kablog .case_site .inner p {
		clear:left;
		display:block;
		margin-top:10px;
	}


/* kablog popups -------------------------- */
	
    #kablog #the_case_study .case_inner {
		background:#fff url(../images/bg_blogentry.png) 0 0 repeat-x;
	}
	#kablog #the_case_study p {
		margin-top:15px;
	}
	#kablog #the_case_study h2 {
		color:#825528;
		font-weight: bold;
		font-size: 18px;
		line-height:20px;
	}
	#kablog #the_case_study h3 {
        color:#825528;
        font-weight: bold;
        font-size: 14px;
        line-height:16px;
        margin:15px 0;
        *margin-top: 0;
	}
	#kablog #the_case_study h4 {
		color:#825528;
		font-weight: normal;
		font-size: 12px;
		line-height:15px;
		padding:0;
		margin:8px 0 4px 0;
	}
	#kablog #the_case_study .date {
		color:#7a7a7a;
		text-transform:uppercase;
		font-size:11px;
		line-height: 13px;
	}
	#kablog #the_case_study ul {
		padding-bottom:0px;
		padding-top:15px;
	}
	#kablog #the_case_study ul li {
		list-style-type:none;
		background:transparent url(../images/kablog_bullet.gif) no-repeat 0 5px;
		padding-left:12px;
		padding-bottom:12px
	}
	
	#kablog #the_case_study ul li ul {
		padding-bottom:3px;
		padding-top:15px;
		padding-left:12px;
	}
	
		#kablog #the_case_study ul li ul li{
		padding-bottom:0;
	}
	
	#kablog .exp a {
        float: right; 
        display:block;
        background:transparent url(../images/icon_kablog_exp.gif) no-repeat 0 0;
        width:21px;
        height:18px;
        margin-bottom:5px;
        text-indent: -999em;	
    }
	
  #kablog .exp a:hover {
        background-position:bottom;
    }
	
	#kablog .photo{margin-top:15px;}
	#kablog .buttons {
		width: 45px;
		padding-left:0;
		margin-left:15px;
	}
	#kablog .print a {
		background:transparent url(../images/icon_kablog_print.gif) no-repeat 0 0;
	}
	#kablog .print a:hover {
		background-position:bottom;
	}
	#kablog .close {
		margin-right:0;
	}
	#kablog .close a {
		background:transparent url(../images/icon_kablog_close.gif) no-repeat 0 0;
	}
	#kablog .close a:hover {
		background-position:bottom;
	}
	#kablog form .textBox {
		width:490px;
		border:none;
		background-color:#e6e4dd;
		padding:4px;
	}
	#kablog form .textArea {
		width:490px;
		border:none;
		background-color:#e6e4dd;
		padding:4px;
	}
	#kablog form button {
		background: url(../images/kablog_send.gif) no-repeat top;
		border: 0; 
		padding: 0;
		border-collapse: collapse;
		width: 80px;
		height: 26px;
		margin-top: 10px;
	}
	#kablog form button span { 
		visibility: hidden; 
	}
	#kablog form button:hover {
		background-position: bottom;
	}
	#kablog blockquote{
		color:#825528;
	}
	hr {
		width: 100%;
		clear: both;
		float: left;
		border-collapse: collapse;
		height:1px;
		background-color: #825528;
		color: #825528;
		margin: 15px 0;
        *margin: 15px 0 0 0;
		border:0;
	}
	.sig {
		color:#825528;
	}
	
#kablog #case_study em {
	display:block;
}


/* common styles for transparent items ---- */
    
    #home .transparent .about_inner {
        -moz-opacity: .3;
        opacity: .3;
        filter:alpha(opacity=30);
        *background: #fff;
    }

    #about .transparent .about_inner, 
    #contact .transparent .about_inner {
        *width: 540px;
        -moz-opacity: .3;
        opacity: .3;
        filter:alpha(opacity=30);
        *background: #fff;
    }
    
    #kablog .transparent .about_inner, 
    #case_study .transparent .about_inner {
        width: 280px;
        -moz-opacity: .3;
        opacity: .3;
        filter:alpha(opacity=30);
        *background: #fff;
    }
    
    #portfolio .transparent .about_inner{
        width: 224px !important;
    }
    
    #kablog .transparent .about_inner, 
    #case_study .transparent .about_inner {
        _width: 280px;
    }
    
    .theTop a, 
    .theTop form { position: relative !important; z-index: 999; }
    .theTop button { cursor: pointer; }
    
    
/* portfolio cycle styles ----------------- */
.cs_main_photo { width:  500px; height:  280px; overflow: hidden; }
.cs_main_photo img { width:  500px; height: 280px; top:  0; left: 0 }