table
	{
	width: 100%;
	border-collapse: collapse;
	background-color: white;
	color: black;
	font: 10pt verdana, arial;
	margin-bottom: 25%; /* %, px, em, ex ? */
	}

tr.subhead
	{
	background-color: #cccccc;
	}

th
	{
	padding: 0 3%;
	}

th.alt
	{
	background-color: black;
	color: white;
	padding: 3% 3% 2%;
	}

td
	{
	padding: 0 3%;
	}

tr.alt
	{
	background-color: #eeeeee;
	}

h1
	{
	font: 24pt verdana, arial;
	margin: 0;
	}

h2
	{
	font: 18pt verdana, arial;
	margin: 0;
	}

h3
	{
	font: 12pt verdana, arial;
	margin: 0;
	}

th a
	{
	color: #00008b;
	font: 8pt verdana, arial;
	}

a
	{
	color: #00008b;
	text-decoration: none;
	}

a:hover
	{
	color: #00008b;
	text-decoration: underline;
	}

div.outer
	{
	width: 90%;
	margin: 15%;
	}

table.viewmenu td
	{
	background-color: #006699;
	color: white;
	padding: 0 5%;
	}

table.viewmenu td.end
	{
	padding: 0;
	}

table.viewmenu a
	{
	color: white;
	font: 8pt verdana, arial;
	}

table.viewmenu a:hover
	{
	color: white;
	font: 8pt verdana, arial;
	}

a.tinylink
	{
	color: #00008b;
	font: 8pt verdana, arial;
	text-decoration: underline;
	}

a.link
	{
	color: #00008b;
	text-decoration: underline;
	}

div.buffer
	{
	padding-top: 7%;
	padding-bottom: 17%;
	}

.small
	{
	font: 8pt verdana, arial;
	}

table td
	{
	padding-right: 20%;
	}

table td.nopad
	{
	padding-right: 5%;
	}

body {
	margin: 0;
	padding: 0;
	color: #333;
	font: 0.7em "Century Gothic", sans-serif;
	background: #fff url(../images/header_bg.jpg) no-repeat center top;
}
#content-wrapper {
	position: relative;
}
a {
	text-decoration: none;
}
.red {
	color: red;
	font-weight: bold;
}
.yellow {
	color: #d9dc01;
	font-weight: bold;
}
.green {
	color: green;
	font-weight: bold;
}
.clear-all {
	clear: both;
	height: 1px;
	line-height: 1px;
}
/* @group Header */
#header {
	position: relative;
	margin: 0 auto;
	width: 1024px;
	height: 245px;
	
}
h1 {
	position: absolute;
	margin: 0;
	width: 216px;
	height: 84px;
	overflow: hidden;
	bottom: 0;
	left: 30px;

}
h2 {
	color: #25b1dc;
	font-size: 2em;
	font-weight: normal;
	margin: 0;	
}
.topic {
	margin-left: 50px;
	padding-top: 10px;
}
.topic-main {
	position: relative;
	padding: 3px 0;
	border-top: 1px solid #e1f0f7;
	border-bottom: 1px solid #e1f0f7;
}
.topic-main span {
	position: relative;
	left: 320px;
}
.tsp {
	margin-top: 30px;
}
a.logo {
	display: block;
	width: 216px;
	height: 84px;
	background: url(../images/logo.gif) no-repeat left top;
}
/* @end */

/* @group Menu */
#menu {
	position: absolute;
	bottom: 15px !important;
	bottom: 12px;
	left: 280px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: bold;
}
#menu li {
	display: inline;
}
#menu li a {
	display: block;
	width: 200px;
	height: 23px;
	margin: 0 7px;
	background: url(../images/menu_bg.gif) no-repeat left top;
	text-align: center;
	line-height: 25px;
	float: left;
	text-decoration: none;
	color: #585858;
}
#menu li a.selected {
	background: url(../images/menu_hover_bg.gif) no-repeat left top;
}
#menu li a:hover {
	text-decoration: underline;
}
/* @end */

#content {
	position: relative;
	margin: 0 auto;
	width: 1024px;
}
#content-header {
	position: relative;
	left: 265px;
	width: 678px;
	background: url(../images/m_photo_bg.png) no-repeat left top;
}
#content-header img {
	margin: 20px 0 0 30px;
}
.content-header-detail {
	padding: 0 30px 30px 50px;
}
.content-header-detail li,.content-header-detail strong, .content-header-detail {
	font-size: 14px;
}
.content-header-detail ul {

}
#portfolio-list, .portfolio-kind-list, #contact-form {
	position: relative;
	top: 20px;
	left: 300px;
	width: 620px;
}
.portfolio-item {
	padding-bottom: 40px;
	margin-top: 20px;
	clear: both;
	border-bottom: 1px dotted #25b1dc;
}
.first-item {
	margin-top: 0;
}
.port-photo * {
	cursor: pointer;
}
.port-photo {
	display: block;
	float: left;
	position: relative; 
	height: 137px;
	width: 194px;
	background: url(../images/portfolios/port_shadow.jpg) no-repeat left top;
}
.port-photo em {
	font-weight: bold;
	background: url(../images/hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	color: #000;
	top: -85px;
	left: 0;
	text-align: center;
	font-style: normal;
	padding: 20px 12px 10px;
	z-index: 2;
	display: none;
}
.port-photo img {
	margin: 6px 0 0 5px;
	border: 2px solid #e1f0f7;
}
.port-photo span {
	position: absolute;  
	display: block;
	top: 1px;
	left: 2px;
	height: 100%;
	width: 100%;
	background: url(../images/portfolios/port_hl.png) no-repeat left top;
}
.portfolio-item-detail{
	margin-top: 10px;
	margin-left: 210px;
	width: 400px;
}
.portfolio-item-detail p {
	color: #333;
	font-size: 11px;
	margin: 30px 0 0 0;
}
.portfolio-name {
	color: #25b1dc;
	font-size: 16px;
	display: block;
}
.view-screens, #sendBtn {
	color: #25b1dc;
	display: block;
	padding: 3px 5px;
	width: 80px;
	text-align: center;
	border: 1px solid #25b1dc;
}
.view-screens:hover {
	color: #fff;
	padding: 3px 5px;
	border: 1px solid #25b1dc;
	background: #25b1dc;
}

.portfolio-kind-list {
	clear: both;
}
.portfolio-kind {
	margin-top: 50px;
	
}
.portfolio-progress {
	font-style: normal;
}
#contact-form p {
	clear: both;
	position: relative;
	margin: 3px 0;
}
#contact-form label {
	float: left;
	text-align: right;
	width: 100px;
	padding-right: 15px;
	margin-top: 3px;
	font-size: 14px;
	color: #999;
}
#contact-form .txtBox {
	background: #d2eef5;
	border: 1px solid #aec5cb;
	height: 20px;
	width: 250px;
}
#contact-form textarea {
	background: #d2eef5;
	border: 1px solid #aec5cb;
	height: 80px;
	width: 300px;
}
#sendBtn {
	background: #fff;
	cursor: pointer;
	margin: 15px 0 15px 115px;
}
#footer, #footer * {
	position: relative;
	padding: 10px 0;
	text-align: center;
	margin: 80px 0 0 0;
	font-weight: bold;
	color: #fff;
	border-top: 1px solid #e1f0f7;
	border-bottom: 1px solid #e1f0f7;
	background: #5BC6DC;
}