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

/*
	Style Switcher
*/

div#styleswitch {
	position: absolute;
	top: 0;
	right: 0;
	z-index:500;
}

#styleswitch p{
	background: url(../img/btn-slide.png) no-repeat center top;
	text-align: center;
	height: 39px;
	width: 156px;
	margin: -5px auto;	
}
#styleswitch a {
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	line-height: 39px;
}

#styleswitch:hover a{
	color: black;
}
p a.active {
	background-position: right 12px;
}


a:focus {outline:none}

body {
	margin:0px; padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background: white;
}
#outside_container {
	text-align: left;
	width: 950px;
	position: relative;
	margin: 0 auto;
	background:url('../img/default/bg-body.jpg') no-repeat;
}
#container {
	min-height:800px;
	position:relative;
	margin: 0 50px;
}
#header {
	padding-top: 50px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height: 120px;
}
#navigation {
	width: 100%; 
	margin:0;
	position: relative;
	font-weight: bold;
	height: 40px;
	overflow: hidden;
	z-index:1;
}
#content {
	position: relative;
	width:100%;
	color:#674f5d;
	font-size:12px;
	line-height:20px;
}
#inner_content {
	margin-top: 37px;
	padding: 20px;
}
#footer {
	border-top:1px solid #3f2324;
	padding:30px 50px 100px 50px;
	color:#674f5d;
	font-size:9px;
	line-height:14px;
	background-color: #413a3b;
}



/*
	Panel
*/

#panel {
	position: relative;
	height: 175px;
	overflow: hidden;
}

#panel p {
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 1.4em;
	font-size: 21px;
	width: 500px;
	color: #333333;
	padding: 15px 20px;
	height: 100%;
	margin: 0 0 20px;
}

#panel img {
	float: right;
}
.home #panel img {
	margin: 10px 90px 0 0;
}
.portfolio #panel img {
	margin: 5px 10px 0 0;
}
.services #panel img {
	margin: -10px 50px;
}
.contact #panel img {
	margin: -10px 50px;
}

/*
	Logo / navigation
*/

img#logo {
	border: none;
	height: 65px;
	width: 195px;
}

#navigation ul {
	margin: 1px 0 0 0;
	padding: 0;
}
#navigation ul li {
	display: block;
	float: left;
	margin: 0;
	padding: 10px 0;
	width: 140px;
	height: 20px;
	list-style:none;
	font-size:17px;
	text-transform:lowercase;
	text-align: center;
	position: relative;
	z-index: 200;
}
#navigation div.navbg {
	position: absolute;
	z-index: -1;
	display: block;
	height: 180px;
	width: 160px;
	background: url('../img/bg-nav.png') no-repeat top center;
	left: -160px;
}
#navigation ul li a {
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
	color:maroon;
	padding: 10px 0;
}
#navigation ul li a:hover {
	color:black;
}

#navigation ul li.active a {
	color: black;
	border-top: 3px solid blue;	
	padding-top: 7px;
}

#navigation ul li a:hover {
	border-top: 3px solid orange;
	padding-top: 7px;
	border-bottom: 3px solid orange;
	padding-bottom: 6px;
}

em.desc {
	font-weight: normal;
	background: url(../img/hover.png) no-repeat;
	width: 140px;
	height: 50px;
	position: absolute;
	top: 80px;
	left: 0px;
	text-align: center;
	padding: 15px 0px 10px;
	font-style: normal;
	z-index: 1000;
	display: none;
}


/*
	Content Styles
*/

.column1, .column2, .column3 {
	padding: 0 10px;
	width: 250px;
}

.column1 {
	float:left;
}
.column2 {
	float:left;
}
.column3 {
	float:left;
}
.column23 {
	float: left;
	width: 520px;
	padding: 0 10px;
}

.columnclear {
	clear: both;
}

h1, h2, h3 {
	text-transform: lowercase;
}

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #E07A6B;
	font-size: 170%;
	font-weight:normal;
	margin:0 0 10px;
	padding: 0 0 5px 10px;
	border-bottom: 2px solid;
	border-left: 2px solid;
	background: url('../img/bg-h1.gif') no-repeat bottom left;
}

h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 135%;
	font-weight: normal;
	color: #0088a0;
	padding: 0 0 3px 7px;
	border-bottom: 2px solid;
	border-left: 2px solid;
	background: url('../img/bg-h2.gif') no-repeat bottom left;
}

h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	font-weight: normal;
	color:maroon;
	padding: 0 0 0 3px;
	border-bottom: 1px solid;

}

ul {
	list-style: square;
}


/* Menu & Tray */

div#menu, div#tray {
	margin-top: 10px;
}

div#menu {
	padding: 0;
	width: 200px;
	float: left;
}

#tray_design img {
	margin: 5px 0 5px 5px;
	float: right;
}

#tray_development img {
	float: right;
	margin-right: 50px;
}

#tray_marketing img.engines {
	float:right;
	padding-left: 10px;
	padding-bottom: 10px;
}
#tray_marketing img.email {
	float:left;
	padding-right: 15px;
	padding-bottom: 10px;
}

#tray_deployment img{
	float: right;
	padding-top: 10px;
	padding-left: 10px;
}

img.cart {
	margin-top: -7px;
}
img.books {
	padding-right: 50px;
}

div#tray {
	float: left;
	width: 540px;
	padding: 20px 30px 0 30px ;
	border: 3px solid gray;
	background: url('../img/bg-tray.gif') no-repeat top right;
}
div#tray p {
	margin-bottom: 20px;
}
div#menu ul {
	list-style: none;
	margin: 0 0 0 25px;
	padding: 0;
	width: 150px;
}
div#menu ul li {
	text-align: center;
	width: 150px;
	height: 25px;
	margin: 20px 0;
	padding: 7px 5px 5px;
	border: 3px solid #999999;
	background: url('../img/bg-tray.gif') no-repeat top left;
}

div#menu ul li.active {
	width: 163px;
	border-right: 3px solid white;
	position: relative;
	z-index: 100;
}

div#menu ul li.active a, div#menu ul li:hover a {
	color: maroon;
}
div#menu ul li a {
	color: #777777;
	font-size: 130%;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
}
div#menu ul li:hover {
	cursor: pointer;
	color: maroon;	
}


/*	Work List	*/

ul.work {
	margin:15px 0 0 0;
	padding:0;
	list-style-image: none;
}
ul.work li {
	list-style:none;
	margin:0px; padding:0px;
	clear:both;
	padding:5px 10px 5px 10px;	
}
ul.work li {
	color:#e0b882;
	display:block;
	text-decoration:none;
	font-size:10px;
}
ul.work li img {
	float:left;
	margin-right:20px;
	margin-bottom:20px;	
}
ul.work li h4 {
	color:#674f5d;
	margin:0px;
	font-weight:bold;
	font-size:13px;
	border-bottom: 1px solid;
	margin-bottom: 10px;
}
ul.work li:hover {
	cursor: pointer;
}
ul.work li h4 a, ul.work li h4 a {
	color: #674f5d;
	text-decoration: none;
}
ul.work li:hover h4 a, ul.work li:hover h4{
	color:black;
}

ul.work li img {
	border: 3px solid #999999;
}
ul.work li:hover img {
	border: 3px solid maroon;
}
ul.work li span {
	color: maroon;
}
ul.work li:hover span {
	color: black;
}
ul.work li {
	border: 3px solid #CCCCCC;
}

ul.work li:hover {
	border-color: gray;
}

ul.work li a.new {
	display: block;
	float: right;
	width: 85px;
	margin-top: 20px;
	margin-left: -20px;
	height: 36px;
	background: url('../img/btn-open.png') no-repeat bottom right;
	line-height: 36px;
	padding-left: 5px;
}

ul.work li a.new:hover {
	border-left: 3px solid gray;
	text-decoration: none;
}

/*
	Gallery
*/
#gallery_menu{
	float:left;
	width: 250px;
	padding: 0 10px;
}
#gallery_tray {
	border: 3px solid #CCCCCC;
	float: left;
	width: 514px;
	padding: 0 10px;
	height: 520px;
}

.galleria li {
	display:block;
	width:80px;
	height:80px;
	overflow:hidden;
	float:left;
	margin:0 10px 10px 0;

}
.galleria {
	border-bottom: 3px dashed #CCCCCC;
	display: block;
	width: 444px;
	height: 100px;
	margin: 0 0 20px -10px;
	padding-top: 20px;
	padding-left: 90px;
}
.galleria li div img{
	cursor:pointer;
}
.galleria li.active div img,.galleria li.active div{
	display:block
}
.galleria li img.thumb{
	cursor:pointer;
	display:block;
}
.galleria li .caption{
	display:block;
	padding-top:.5em
}
* html .galleria li div span{width:400px} /* MSIE bug */
.main_image{
	margin:0 auto;
	width: 100%;
	clear: both;
	width: 450px;
	height: 360px;
}

/*
	Footer
*/

#footer {
	text-align: left;
}
#footer img.logo {
	width: 148px;
	height: 47px;
	float:left;
	margin-right:30px;
}
#footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer ul li {
	display: inline;
	padding: 0 10px 0 0;
}
#footer span {

}
#footer a {
	color:#9e8292;
	text-decoration:none;
}
#footer a:hover { color:#ffffff; }

#footer p, #footer ul {
	margin-left: 180px;
}
#footer img {
	border: none;
	margin-top: 10px;
	padding-right: 10px;
}




/* contact form */

form {
  margin: 0;
  padding: 0;
  font-size: 100%;
  min-width: 560px;
  max-width: 850px;
}



form fieldset {
  border-color: #000000;
  border-width: 1px 0 0 0;
  border-style: solid none none none;
  padding: 10px;
  margin: 0 0 0 0;
}



form fieldset legend {
  font-weight: normal;
  color: #000000;
  margin: 0 0 0 0;
  padding: 0 5px;
}



label {
  font-size: 100%;
}



input, select, textarea {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 100%;
  color: #000000;
}



form div {
  clear: left;
  display: block;
  width: 354px;
  margin: 5px 0 0 0;
  padding: 1px 3px;
}



form fieldset div.notes {
  float: right;
  width: 30%;
  height: auto;
  margin: 0 0 10px 10px;
  padding: 0 10px;
  border: 1px solid #666666;
  background-color: #ffffe1;
  color: #666666;
  font-size: 88%;
}



form fieldset div.notes h4 {

  background-image: url(../img/icon-info.gif);
  background-repeat: no-repeat;
  background-position: top left;
  padding: 0 0 5px 27px;
  border-width: 0 0 1px 0;
  margin: 10px 0;
  border-style: solid;
  border-color: #666666;
  color: #666666;
  font-size: 110%;
}

form fieldset div.notes p {
  color: #666666;
}

form div fieldset {
  clear: none;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;
}



form div fieldset legend {
  font-size: 100%;
  padding: 0 3px 0 9px;
}



form div.required fieldset legend {
  font-weight: bold;
}



form div label {
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px;
  margin: 0 0 5px 0;
  text-align: right;
}



form div.optional label, label.optional {
  font-weight: normal;
}



form div.required label, label.required {
  font-weight: bold;
}



form div label.labelCheckbox, form div label.labelRadio {
  float: none;
  display: block;
  width: 200px;
  padding: 0;
  margin: 0 0 5px 142px;
  text-align: left;
}



form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {
  margin: 0 0 5px 0;
  width: 170px;
}



form div fieldset label.labelRadio span {

	margin-left: 10px;
}



span.container {

	display: block;

	margin-top: 10px;
}



form div img {
  border: 1px solid #000000;
}



p.error {
  background-color: #ff0000;
  background-image: url(../img/icon-error.gif);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  color: #ffffff;
  padding: 3px 3px 5px 27px;
  border: 1px solid #000000;
  margin: auto 100px;
}



form div.error {
  background-color: #ffffe1;
  background-image: url(../img/required_bg.gif);
  background-repeat: no-repeat;
  background-position: top left;
  color: #666666;
  border: 1px solid #ff0000;
}



form div.error p.error {
  background-image: url(../img/bg-form-required.gif);
  background-position: top left;
  background-color: transparent;
  border-style: none;
  font-size: 88%;
  font-weight: bold;
  margin: 0 0 0 118px;
  width: 200px;
  color: #ff0000;
}



form div select, form div textarea  {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}
form div textarea {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 -3px;
}

form div input.inputText {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}



form div input.inputFile {
  width: 211px;
}



form div select.selectOne  {
  width: 211px;
  padding: 1px 3px;
}



form div input.inputCheckbox {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  margin: 0;
}



form div.submit {
  width: 214px;
  padding: 0 0 0 30%;
}



form div.submit div {
  display: inline;
  float: left;
  text-align: left;
  width: auto;
  padding: 0;
  margin: 0;
}



form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {
  background-color: #cccccc;
  color: #000000;
  width: auto;
  padding: 0 6px;
  margin: 0;
}



form div.submit div input.inputSubmit, form div.submit div input.inputButton {
  float: right;
  margin: 0 0 0 5px;
}



form div small {
  display: block;
  margin: 0 0 5px 142px;
  padding: 1px 3px;
  font-size: 88%;
}

table#bundles {
	border-bottom: 1px solid gray;
}

table#bundles th {
	text-align: center;
	font-family: georgia;
	color: green;
	
}

table#bundles td {
	padding: 6px;
	vertical-align: top;
	border-top: 1px solid gray;
}

table#bundles td.mid {
	border-left: 1px dotted lightgray;
	border-right: 1px dotted lightgray;
	background: #DDFFFF;
}