@charset "UTF-8";

* { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; }

html, body {
	width: 100%;
	height: 100%;
}

body {
	font-family:Helvetica, Arial, sans-serif;
	width: 100%;
	overflow: hidden;
}

h1 {
	position:relative;
	font-family:Helvetica, Arial, sans-serif;
	color:#FFFFFF;
	font-size:19pt;
	font-weight:normal;
	text-shadow: rgba(0,0,0,0.75) 0px 1px 2px;
}

h1 {
	height: 97px;
	width: 260px;
	display: block;
	_background: url(../bkm/logo.png) 18px 15px no-repeat;
	position:absolute;
}

h1 span {
	display: block;
	position: absolute;
	top: 15px;
	background-image: url(../bkm/logo.png);
	background-repeat: no-repeat;
	-webkit-transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	transition: opacity .2s linear;
}

h1 span:first-child {
	background-position: 4px 4px;
	height: 75px;
	width: 75px;
	top: 11px;
	left: 14px;

	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	
	-webkit-animation-name: rot;
	-webkit-animation-duration: 5s;
	-webkit-animation-delay: 0s;
  	-webkit-animation-iteration-count: 1; /* use 0 to infinite */
  	-webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
  	-webkit-animation-timing-function: easy-in-out;

  	-moz-animation-name: rot;
	-moz-animation-duration: 5s;
	-moz-animation-delay: 0s;
  	-moz-animation-iteration-count: 1; /* use 0 to infinite */
  	-moz-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
  	-moz-animation-timing-function: easy-in-out;

  	animation-name: rot;
	animation-duration: 5s;
	animation-delay: 0s;
  	animation-iteration-count: 1; /* use 0 to infinite */
  	animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
  	animation-timing-function: easy-in-out;
}

h1:hover span {
	opacity: .5;
}

@-webkit-keyframes rot{
    0% {-webkit-transform: rotate(0deg); opacity: 0;}
    100% {-webkit-transform: rotate(7200deg); opacity: 1;}
}
@-moz-keyframes rot{
    0% {-moz-transform: rotate(0deg); opacity: 0;}
    100% {-moz-transform: rotate(7200deg); opacity: 1;}
}
@keyframes rot{
    0% {transform: rotate(0deg); opacity: 0;}
    100% {transform: rotate(7200deg); opacity: 1;}
}


h1 span:last-child {
	background-position: -67px 0;
	height: 66px;
	width: 175px;
	right: 0;
}

h3 {
	font-size:10pt;
}

#background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	text-align: right;
	left: 0;
	background: #fff;
	overflow: hidden;
}
#background IMG {
	height: 100%;
	width: auto;
}

#credits {
	height: 40px;
	width: 146px;
	display: block;
	text-align: center;
	padding: 4px 0 0 4px;
	position: absolute;
	right: 0;
	bottom: 0;

	background: transparent url(../bkm/white_semitransparent.png) 0 0 repeat;
	-webkit-border-top-left-radius: 10px;	
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
}

#credits a {
	font-size: 13px;
	font-weight: normal;
	line-height: 3;
	color: #c0c0c0;
	height: 39px;
	width: 145px;
	display: block;
	position: relative;
	border-top: 1px solid #51575d;
	border-left: 1px solid #51575d;
	
	background-color: #383e44;
	background-image: -webkit-gradient(linear, left top, left bottom
		, color-stop(.5, #3e454c)
		, color-stop(.5, #383e44)
		);
	background-image: -moz-linear-gradient(center top
		, #3e454c 50%
		, #383e44 50%
		);
	background-image: -o-linear-gradient(
		, #3e454c 50%
		, #383e44 50%
		);

	-webkit-border-top-left-radius: 10px;	
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	text-shadow: 0 1px 2px black;
	z-index:10;
	
}

#credits a:before {
	content: '';
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-top: 1px solid #656c74;
	border-left: 1px solid #656c74;
	-webkit-border-top-left-radius: 10px;	
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	z-index: -1;
	
}

#credits a:hover {
	color: white;
}

#name, #email, #message {
	border:1px #A5A5A5 solid;
	background-color:#FFFFFF;;
	font-family:Helvetica, Arial, sans-serif;
	font-size:10pt;
	resize:none;
	color:#888888;
}

#name, #email {
	height:20px;
	width:166px;
	padding-top:4px;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
}

#message {
	width:344px;
	height:51px;
	padding-top:4px;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
}

#submit {
	padding-top:6px;
}

#leftSide {
	position:absolute;
	left:0px;
	right:67%;
	top:0px;
	bottom:0px;
	z-index: 2;
	width:auto;
	height:auto;
	
	background-image:url(../bkm/leftSide.png);
	background-position:right;
	background-repeat:repeat-y;
}

#leftSide:after {
	content: '';
	height: 100%;
	width: 9px;
	display: block;
	position: absolute;
	right: -9px;
	background: transparent url(../bkm/semitransparent.png) 0 0 repeat;
}

#lang {
	font-size: 13px;
	font-weight: normal;
	color: #c0c0c0;
	display: block;
	text-align: right;
	position: absolute;
	top: 20px;
	right: 20px;
}

#lang a {
	color: #c0c0c0;
	text-decoration: none;
	display: block;
	text-shadow: 0 1px 2px black;
}

#lang a:hover {
	color: #ffffff;
}

#lang a.active span {
	height: 9px;
	width: 9px;
	display: block;
	margin: 3px 5px 0 0;
	float: left;
	background: transparent url(../bkm/lang_arrow.png) 0 0  no-repeat;
}

#rights {
	font-size: 13px;
	font-weight: normal;
	color: #909294;
	display: block;
	position: absolute;
	right: 20px;
	bottom: 20px;
	text-align:right;
	text-shadow: 0 1px 2px black;
}

#title {
	position:absolute;
	top:50%;
	margin-top:-60px;
	right:275px;
	width:auto;
	height:66px;
	text-align:right;
	line-height:26px;
	cursor:pointer;
}

.titleSubText {
	font-family:Helvetica, Arial, sans-serif;
	color:#a2a0a0;
	font-size:10pt;
	text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}

#arrowWrapper {
	position:absolute;
	top:50%;
	margin-top:-123px;
	right:-10px;
	width:12px;
	height:229px;
}
#arrow {
	position:absolute;
	left:0px;
	top:32px;
	width:12px;
	height:20px;
	background-image:url(../bkm/highlightArrow.png);	
}

#buttonsWrapper {
	position:absolute;
	top:50%;
	margin-top:-123px;
	right:-93px;
	width:84px;
	height:229px;
	background: transparent url(../bkm/semitransparent.png) 0 0 repeat;

	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#aboutButtonWrapper {
	position:absolute;
	left:10px;
	top:13px;
	width:145px;
	height:64px;
}

#aboutButton {
	background-position:0px 2px;
}

#portfolioButtonWrapper {
	position:absolute;
	left:0px;
	top:76px;
	width:145px;
	height:64px;
}

#portfolioButton {
	background-position:0px -64px;
}

#servicesButtonWrapper {
	position:absolute;
	left:10px;
	top:84px;
	_top:148px;
	width:145px;
	height:64px;
}

#servicesButton {
	background-position:0px -128px;
}

#contactButtonWrapper {
	position:absolute;
	left:10px;
	top:155px;
	_top:221px;
	width:145px;
	height:64px;
}

#contactButton {
	background-position:0px -192px;
}

.navButton {
	position:absolute;
	left:0px;
	top:0px;
	width:65px;
	height:64px;
	background-image:url(../bkm/icons.png);
	cursor:pointer;
	z-index:2;
}

.navCaption {
	position:absolute;
	text-align: center;
	left:50px;
	top:0px;
	width: 74px;
	height: 57px;
	padding: 17px 0 0 80px;
	opacity:0;
	z-index:1;
	background: transparent url(../bkm/hover_button.png) 0 0 no-repeat;
	
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;

}

.navCaptionText {
	font-family:Helvetica, Arial, sans-serif;
	_color:#c2c2c2;
	color: #ffffff;
	font-size:11pt;
	text-shadow: 0px 0px 2px black;
}

.navSubCaptionText {
	font-family:Helvetica, Arial, sans-serif;
	_color:#898989;
	color: #ffffff;
	font-size:8pt;
	text-shadow: rgb(0,0,0) 0px 1px 2px;
}

#contentPanelWrapper {
	position:absolute;
	top:50%;
	margin-top:-143px;
	left:110%;
	right:0px;
	width:auto;
	height:270px;
	background-image:url(../bkm/panelBack.png);
	background-repeat: repeat-x;
	border-style: solid;
	border-width: 1px 0 1px 0;
	border-color: #6d757e;

	box-shadow: 0 0 0 9px rgba(0,0,0,0.2);
	overflow-y:hidden;
	overflow-x:auto;
}

#contentPanelEdge {
	position:absolute;
	left:0px;
	top:-1px;
	width:24px;
	height:270px;
	background-image:url(../bkm/panelEdge.png);
	border-style: solid;
	border-width: 1px 0 1px 1px;
	border-color: #6d757e;

}

.content {
	position:absolute;
	text-align: left;
	left:37px;
	top:27px;
	width:565px;
	height:185px;
	padding-top:45px;
}

.contentTitle {
	position:absolute;
	left:0px;
	top:0px;
	width:565px;
	height:30px;
	font-family:Helvetica, Arial, sans-serif;
	color:#434242;
	font-size:16pt;
	text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
}

#aboutContent {
	display:none;	
}

#aboutText {
	max-height:170px;
	font-family:Helvetica, Arial, sans-serif;
	color:#434242;
	font-size:10pt;
	text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;	
	overflow:auto;
}

#portfolioContent {
	background-image:url(../bkm/sliderBack.png);
	background-position:-3px 50px;
	background-repeat:no-repeat;
	display:none;
}

#portfolioSlider {
	position:absolute;
	left:8px;
	top:60px;
	width:541px;
	height:139px;
	overflow:hidden;
}

#imageWrapper {
	position:absolute;
	left:0px;
	top:0px;
	width:541px;
	height:139px;
}

#imgList ul { 
	list-style:none;
}

#imgList li {
	display:inline;
	float:left;
}

#sliderToolbar {
	position:absolute;
	top:85px;
	left:193px;
	width:154px;
	height:48px;
	background-image:url(../bkm/navbarBack.png);
	z-index:3;
}

.sliderButton {
	position:absolute;
	top:8px;
	width:32px;
	height:31px;
	background-image:url(../bkm/navButtons.png);
	cursor:pointer;
}

#prevButton {
	left:26px;
	background-position:0px 0px;
}
#prevButton:active {
	background-position:32px 0px;
}

#nextButton {
	left:99px;
	background-position:0px -62px;
}
#nextButton:active {
	background-position:32px -62px;
}

#servicesContent {
	display:none;
}

.serviceColumn {
	position:absolute;
	top:55px;
	width:165px;
	height:165px;
	font-family:Helvetica, Arial, sans-serif;
	color:#434242;
	font-size:8pt;
	text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
	line-height:12pt;
}

#serviceColumn1 {
	left:0px;
}

#serviceColumn2 {
	left:200px;
}

#serviceColumn3 {
	left:400px;
}

#contactContent {
	display:none;
}

#contactFormWrapper {
	font-family:Helvetica, Arial, sans-serif;
	color:#434242;
	font-size:8pt;
	position:absolute;
	left:2px;
	top:67px;
	width:350px;
	height:150px;
}

#contact {
	line-height:7px;
	letter-spacing:1px;
	text-align:right;
}

#successMessage {
	position:absolute;
	left:0px;
	top:102px;
	width:129px;
	height:27px;
	background-image:url(../bkm/sentBadge.png);
	z-index:3;
	display:none;
}

#submit {
	width:84px;
	height:27px;
}

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }