/* ### main html items ### */

html, body {
 height: 100%;
}

body {
 font: 10pt Tahoma, Verdana,  Arial, sans-serif;
 color: #000;
 background: #212323;
}

* {
 margin: 0; padding: 0;
}

h1, .hidden { display: none; }

a {
 color: #cc224a;
}

a:hover {
 color: #000;
}

div.hr {
  height: 1px;
  background: #bfbca3;
}

div.hr hr {
  display: none;
}

input.button {
 width: 117px; height: 29px;
 border: 0;
 font-weight: bold;
 cursor: pointer;
}

.clear {
 clear: both;
}


div#container {
 width: 1000px;
 margin: 0 auto;
 background: url("../_images/breadcrumb_back.gif") #979797 repeat-x 0 193px;
}


/* ### header### */

div#header {
 height: 193px;
 background: url("../_images/header.jpg") #000 no-repeat left top;
}

div#header img {
 position:relative;
 top: 114px;
 left: 34px;
}


/* ### main menu ### */

ul#mainmenu {
 float: right;
 list-style: none;
}

ul#mainmenu li {
 display: inline;
 float: left;
 height: 36px;
 background: #212323;
}

ul#mainmenu a {
 display: block;
 float: left;
 padding-top: 10px;
 width: 117px; height: 33px;
 color: #fff;
 text-align: center;
 letter-spacing: 0.1em;
 text-decoration: none;
 border: 1px solid #383838;
 text-transform: lowercase;
 background: url("../_images/menu_item_back.gif") #212323 no-repeat 102px 17px;
}

ul#mainmenu a:hover {
 display: block;
 float: left;
 font-weight: bold;
 padding-top: 4px;
 letter-spacing: 0em;
 width: 105px; height: 21px;
 border: 7px solid #bfeb00;
 background: #848484;
}


/* ### breadcrumb ### */

ul#breadcrumb {
 float: left;
 padding-top: 16px;
 height: 22px;
 list-style: none;
}

ul#breadcrumb li {
 display: inline;
 float: left;
 padding-left: 10px;
}

ul#breadcrumb li a {
 display: block;
 float: left;
 color:#fff;
 padding-left: 18px;
 text-decoration: none;
 text-transform: lowercase;
}

ul#breadcrumb li li a {
 background: url("../_images/breadcrumb_item.gif") transparent no-repeat 0 7px;
}

div#content {
 overflow: auto;
 clear: both;
 padding: 0 0 0 20px;
 zoom: 1;
 background: url("../_images/page_bottom.gif") #ebebeb no-repeat right bottom;
}



/* ### left item ### */

div#leftitem {
 float: left;
 width: 240px;
 margin: 20px 20px 0 0;
 background: url("../_images/leftitem_corner.gif") #bfeb00 no-repeat right bottom;
}

#detail div#leftitem {
 float: left;
 width: 240px;
 margin: 1px 20px 0 0;
 background: none;
}

div#leftitem h3 {
 padding: 4px 20px;
 color: #bcbcbc;
 font-size: 100%;
 background: url("../_images/leftitem_heading.gif") #000 no-repeat 220px 8px;
 border-bottom: 2px solid #fff;
}

div#leftitem ul {
 list-style: none;
}

div#leftitem ul li {
 border-bottom:1px dotted #000;
}

div#leftitem ul li a {
 display: block;
 padding: 4px 20px;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
}

div#leftitem ul li a:hover {
 color: #000;
}

label#searchheading {
 display: block;
 margin: 10px 0 0 20px;
 width: 173px; height: 17px;
 text-indent: -5000px;
 background: url("../_images/search_heading.gif") transparent no-repeat left top;
}

div#leftitem input {
 width: 190px;
 margin: 4px 20px;
 padding: 1px;
}

input#searchbutton {
 border: 0;
 position: relative;
 left: 96px;
 width: 100px !important; height: 21px;
 color: #fff;
 text-align: left;
 font-weight: bold;
 font-size: 80%; 
 padding: 0 0 3px 14px !important;
 background: url("../_images/search_back.gif") transparent no-repeat left top;
} 


/* ### middle (content) ### */

div#middleitem {
 float: left;
 margin: 0 20px 30px 20px;
 padding-top: 40px;
 width: 300px;
 color: #7d7d7d;
 texfft-align: justify;
 background: url("../_images/content_back.gif") transparent no-repeat left top;
}

div#middleitem li {
margin-left:15px;
}


div#middleitem h2 {
 padding-left: 12px;
 color: #e7b313;
 font-weight: bold;
 font-size: 150%;
 background: url("../_images/heading_item.gif") transparent no-repeat left center;
 text-transform: lowercase;
}

#detail div#middleitem h2 {
 color: #bfeb00;
}

div#middleitem p {
 margin: 4px 0 16px 0;
}

a.readmore {
 display: block;
 padding: 2px 0 0 20px;
 width: 290px; height: 21px;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 background: url("../_images/readmore_back.gif") transparent no-repeat left top;
}

a.launch {
 display: block;
 padding: 2px 0 0 20px;
 width: 290px; height: 21px;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 background: url("../_images/launch_back.gif") transparent no-repeat left top;
}



/* ### right item ### */

div#rightitem {
 float: left;
 margin-left: 20px;
 width: 340px;
 color: #fff;
}

ul#portfoliomenu {
 float: left;
 margin-top: 40px;
 list-style: none;
}

ul#portfoliomenu li a {
 display: block;
 width: 18px;
 text-indent: -9000px;
}

li#development a {
 height: 96px;
 background: url("../_images/portfolio_development.gif") transparent no-repeat left top;
}

li#design a {
 height: 68px;
 background: url("../_images/portfolio_design.gif") transparent no-repeat left top;
}

li#hosting a {
 height: 69px;
 background: url("../_images/portfolio_hosting.gif") transparent no-repeat left top;
}

li#other a {
 height: 83px;
 background: url("../_images/portfolio_other.gif") transparent no-repeat left top;
}

iframe#portfolioframe {
float: right;
border:0;
width: 321px; 
height: 410px;
overflow: hidden;
margin-bottom: 20px;
}

body#frame {
 padding: 0; margin: 0;
 background: #ebebeb;
}

div#portfolio {
 border-top: 1px solid #979797;
 font-size: 80%;
 padding:0 20px;
 height: 400px;
 background: url("../_images/rightitem_corner.gif") #979797 no-repeat right bottom;
}

div#portfolio h3 {
 font: bold 160% "Trebuchet MS", Tahoma, Verdana,  Arial, sans-serif;
}

div#portfolio h3 a {
 color: #baea02;
 text-transform: lowercase;
}

div#portfolio h3 a:hover {
 color: #baea02;
 background: transparent;
}

div#portfolio a {
 color: #000;
 text-decoration: none;
}

div#portfolio a:hover {
 background: #fff;
}

div#portfolio img {
 display: block;
 border: 0;
 padding: 18px 11px 11px 19px;
 width: 100px; height: 100px;
 background: url("../_images/portfolio_item_back.gif") #fff no-repeat left top;
}

div#portfolio img.first {
 float: right;
}

div#portfolio img.second {
 float: left;
 margin: 0 10px 10px 0;
}

div#portfolio div.hr {
 clear:both;
 height: 12px;
 margin: 8px 0;
 background: url("../_images/pattern.gif") transparent repeat left top;
}

div#portfolio a.last {
 display: block;
 float: left;
 padding: 3px 0 0 80px;
 width: 60px; height: 21px;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 background: url("../_images/portfolio_last_back.gif") transparent no-repeat left top;
}

div#portfolio a.next {
 display: block;
 float: right;
 padding: 3px 0 0 20px;
 width: 120px; height: 21px;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 background: url("../_images/portfolio_next_back.gif") transparent no-repeat left top;
}

/* ### footer ### */

div#footer {
 position: relative;
 bottom: 30px;
 clear: both;
 width: 990px;
 float: left;
 margin: 0 10px 10px 0;
 padding: 2px 10px 0 0;
 color: #848484;
 text-align: right;
 font-size: 80%;
 border-top: 10px solid #bfbfbf;
}

div#footer a {
 color: #848484;
}

.cleaner {
 clear: both;
}