/* @group Initialize */

* {margin: 0;padding: 0;}

*:focus {outline: 0 none;}

input {border: 0;}
a {text-decoration: none;color: #767978;cursor: pointer;}
img {border: 0;}
.clear {clear: both;}
.float {float: left;}
table tr {vertical-align: top;}
.caps, a.caps { text-transform: uppercase;}

@font-face {
	font-family: AvantGarBoo;
	src: url('../font/AvantGarBoo.otf');
}

@font-face {
	font-family: AvantGarBoo;
	font-weight: bold;
	src: url('../font/AvantGarDem.otf');
}

@font-face {
	font-family: AvantGarBoo;
	src: url('../font/AvantGarBooObl.otf');
	font-style: italic;
}

@font-face {
	font-family: AvantGarBoo;
	font-weight: bold;
	src: url('../font/AvantGarDemObl.otf');
	font-style: italic;
}


/* @end */

html {

}

body {
	margin: 0;
	padding: 0;
	font: 12px/16px "AvantGarBoo", "Trebuchet MS", Geneva, sans-serif;
	color: #000;
	background: #303231;
}

#Content {
	position: absolute;
	margin-left: 20px;
	visibility: hidden;
	z-index: 1000;
}

#Logo {
	position: absolute;
	z-index: 900;
	top: 15px;
	left: 20px;
	width: 140px;
	height: 140px;
	background: url(../images/css/logo.png) no-repeat;
}

#Menu {
	position: absolute;
	z-index: 900;
	padding: 5px;
	top: 320px;
	left: 0px;
	width: 220px;
	height: 430px;
	color: #303231;
	background-color: #262727;
}

#Menu a {
	color: #434544;
	display: block;
	float: left;
	clear: left;
	margin: 0 0 0 5px;
	text-transform: uppercase;
}

#Menu #WorkHomeInfo {
	position: absolute;
	width: 130px;
	top: 200px;
	left: 10px;
	color: #fff224;
}

#Menu #WorkHomeInfo p {
	padding: 0 0 0 15px;
	text-indent: -15px;
}

#ContentMain{
	position: relative;
}

#WebpageContentTarget {
	position: relative;
	display: none;
	z-index: 1000;
	top: 320px;
	left: 150px;
	width: 300px;
	color: #757776;
}

#WebpageContent {
	position: relative;
	top: 5px;
	width: 260px;
	height: 430px;
	overflow: hidden;
}

#WebpageContentToScroll {
	padding: 5px;
}

#WebpageContentToScroll p {
	/*text-indent: 25px;*/
	margin-bottom: 10px;
}

#closewebpage {
	position: absolute;
	display: none;
	cursor: pointer;
	top: 5px;
	right: 7px;
	height: 9px;
	width: 9px;
	background: url(../images/close.gif) no-repeat;
	z-index: 2000;
}

.TinyText a {
	border-bottom: 1px dotted #fff224;
}

.TinyText a:hover {
	border-bottom: 1px solid #fff224;
}


.yellow, a.yellow, #Menu a:hover, #Menu a.select, #Menu a.select:hover {
	color: #fff224;
}

#Loading {
	position: absolute;
	display: none;
	top: 0px;
	left: 20px;
	width: 110px;
	height: 70px;
	background: #303231 url(../images/loading.gif) no-repeat;
	z-index: 500;
}

#Background {
	background: url(../images/x.gif) repeat;
}

/* @group Slide */

.SlideTarget {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 710px;
	height: 470px;
	z-index: 100;
	background-color: #262727;
}

.SlideTarget img {
	position: absolute;
	top: 0px;
	left: 0px;
}

#SlideTargetBtPrev {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 50%;
	height: 100%;
	opacity: 0.5;
	z-index: 1000;
	letter-spacing: -0.5px;
	background: url(../images/x.gif) repeat;
}

#SlideTargetBtNext {
	position: absolute;
	top: 0px;
	left: 50%;
	display: block;
	width: 50%;
	height: 100%;
	opacity: 0.5;
	z-index: 1000;
	background: url(../images/x.gif) repeat;
}

#SlideNumber {
	position: absolute;
	visibility: hidden;
	padding: 8px 0 0 5px;
	top: 440px;
	left: 360px;
	height: 25px;
	width: 345px;
	background-color: #303231;
	text-transform: uppercase;
	color: #757776;
	z-index: 1000;
}

#SlideNumber a.selected, #SlideNumber a:hover.selected {
	color: #1b1b1b;
}

#SlideNumber a:hover {
	color: #fff224;
}

#WorkTitle {
	position: absolute;
	visibility: hidden;
	padding: 8px 0 0 5px;
	top: 440px;
	left: 0px;
	height: 25px;
	width: 345px;
	/*background: url(../images/alphagrey.png) repeat;*/
	text-transform: uppercase;
	background-color: #303231;
	color: #757776;
	z-index: 1000;
}

#WorkTitle a:hover {
	color: #fff224;
}

#WorkInfo {
	position: absolute;
	display: none;
	padding: 5px 5px 50px 5px;
	top: 480px;
	left: 0px;
	width: 340px;
	color: #757776;
}

#WorkInfo p {
	text-indent: 25px;
}

#WorkInfo .TinyText p {
	margin-bottom: 10px;
}

#WorkInfo .TinyText a {
	border-bottom: 1px dotted #fff224;
}

#WorkInfo .TinyText a:hover {
	border-bottom: 1px solid #fff224;
}

/* @end */

/* @group Image */

.Image {
	position: absolute;
	z-index: 200;
	overflow: hidden;
}

.Image img {
	position: absolute;
	height: 100%;
	display: none;
}

.Image.large {
	width: 470px;
	height: 310px;
}

.Image.medium {
	width: 230px;
	height: 150px;
}

.Image.small {
	width: 110px;
	height: 70px;
}

.Image.thumb {
	width: 50px;
	height: 30px;
}

.Image.portrait {
	width: 110px;
	height: 150px;
}

/* @end */

/* @group x & y */

.x1 { left: 0px; }
.x2 { left: 60px; }
.x3 { left: 120px; }
.x4 { left: 180px; }
.x5 { left: 240px; }
.x6 { left: 300px; }
.x7 { left: 360px; }
.x8 { left: 420px; }
.x9 { left: 480px; }
.x10 { left: 540px; }
.x11 { left: 600px; }
.x12 { left: 660px; }
.x13 { left: 720px; }
.x14 { left: 780px; }
.x15 { left: 840px; }
.x16 { left: 900px; }

.y1 { top: 0px; }
.y2 { top: 40px; }
.y3 { top: 80px; }
.y4 { top: 120px; }
.y5 { top: 160px; }
.y6 { top: 200px; }
.y7 { top: 240px; }
.y8 { top: 280px; }
.y9 { top: 320px; }
.y10 { top: 360px; }
.y11 { top: 400px; }
.y12 { top: 440px; }
.y13 { top: 480px; }
.y14 { top: 520px; }
.y15 { top: 560px; }
.y16 { top: 600px; }
.y17 { top: 640px; }
.y18 { top: 680px; }
.y19 { top: 720px; }
.y20 { top: 760px; }


/* @end */


/* @group margin & border */

.ml { margin-left: 20px; }
.mt { margin-top: 20px; }
.mmt { margin-top: 15px; }
.mmb { margin-bottom: 15px; }
.mpt { padding-top: 10px; }
.mpb { padding-bottom: 10px; }
.lpb { padding-bottom: 20px; }
.bp { padding-bottom: 20px; }
.brdt { border-top: 1px solid #000; }
.brdb { border-bottom: 1px solid #000; }
.nomargin { margin: 0; }
hr { line-height: 1px; height: 1px; border: 0; border-top: 1px solid #000; margin: 10px 0; clear: left; }


/* @end */

div#PreviewAlert{ background-color: #fff224; color: #fff; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 5000; }
div#PreviewAlert a{ color: #303231; margin: 10px 20px; display: block;}

/* @group scroll */

.scrollbar-vert{
	position: absolute;
	right: -9px;
	top: 25px;
	width: 12px;
	height: 180px;
	z-index: 900;
	border-right: 1px solid #757776;
}
.handle-vert{
	position: absolute;
	display: block;
	right: -5px;
	z-index: 1000;
	height: 1px;
	line-height: 0px;
	font-size: 1px;
	width: 9px;
	background-color: #fff224;
	border-top: 1px solid #262727;
	border-bottom: 1px solid #262727;
	cursor: pointer;
}
/* @end */

/* @group Download */



.downloadFile {
	width: 280px;
	margin-right: 5px;
	margin-bottom: 10px;
	overflow: hidden;
}

.downloadFile .fileIco {
	width: 20px;
	font-family: Verdana, sans-serif;
	height: 17px;
	color: #303231;
	font-size: 9px;
	padding: 5px 0;
	text-align: center;
	float: left;
	background: url(../images/ico.gif);
	margin: 0 10px 0 0;
}

.downloadFile .fileIco a {
	color: #303231;
}

.downloadFile .fileInfo {
	float: left;
	width: 250px;
	padding: 10px 0 0 0;
}
.downloadFile .fileInfo .fileSize {
	color: #444;
}

/* @end */

/* @group tips */

.tip {
	font-size: 10px;
	z-index: 1000;
	position: relative;
	background-color: #262727;
	padding: 5px;
	width: 220px;
	-webkit-box-shadow: 1px 1px 2px #222;
	-moz-box-shadow: #222 1px 1px 4px;
	font-weight: normal;
	font-style: normal;
}
.tip-top {
}
.tip-title {
	padding: 0;
	margin: 0;
	margin-bottom: 3px;
	color:#fff224;
}
.tip-text {
	padding: 0;
	margin: 0;
	color:#fff224;
}
.tip-bottom {

}



/* @end */