/*
	BLK // Brandon Lee Kitajchuk
	http://www.brandonleekitajchuk.com
	Copyright 2010 Brandon Lee Kitajchuk
*/

/* BLK Stylsesheet // Global Domination !
-----------------------------------------------------*/
@import url("reset.css");


/* Base Element Styles...
-----------------------------------------------------*/
body {
	font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
	background: #000 url(../blk_images/blk-sitecity-bg.jpg) no-repeat top left;
}

p {
	color: #CCC;
	font-size: 11px;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	text-shadow: 1px 1px 1px #000;
}

p a {
	color: #6DCFF6;
	font-size: 11px;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	text-decoration: none;
} p a:hover {
	color: #0076A3;
	text-decoration: none;
}

h2 {
	color: #6DCFF6;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 10px 0px;
	text-transform: uppercase;
}

.box-style {
	background: transparent url(../blk_images/transparent.png) repeat;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
	border: 1px solid #000;
	padding: 20px;
}

.share-style {
	background: transparent url(../blk_images/transparent-blue.png) repeat;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
	border: 1px solid #000;
	padding: 10px;
}

.link-style a {
	width: 219px;
	height: 35px;
	background: transparent url(../blk_images/link-style.png) no-repeat top;
	display: block;
	float: left;
	clear: left;
	margin: 0px 0px 5px 0px;
	overflow: hidden;
	color: #CCC;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
} .link-style a:hover,
  .link-style a.on-link  {
  	color: #FFF;
	text-shadow: 1px 1px 1px #555;
} .link-style a span {
	display: block;
	padding: 8px 0px 0px 10px;
} .link-style a.portal-on {
	color: #FFF;
	opacity: 1.0;
	background-position: left -35px;
	text-shadow: 1px 1px 1px #555;
}

a.tab-nav {
	opacity: 0.75;
}

.resume {
	margin: 20px 0px 0px 0px;
}

.nimbus {
	margin-top: 20px;
}

.local {
	margin: 20px 0px 0px 0px;
	font-style: italic;
}

.connect {
	margin: 20px 0px 0px 0px;
}

.sites {
	position: relative;
	float: left;
	clear: left;
	margin: 20px 0px 0px 0px;
}

.social {
	display: block;
	padding: 0px 0px 4px 20px;
	background: transparent url(../blk_images/social-icons.png) no-repeat top left;
} .twitter {

} .facebook {
	background-position: left -18px;
} .behance {
	background-position: left -36px;
} .lastfm {
	background-position: left -54px;
} .linkedin {
	background-position: left -72px;
} .flickr {
	background-position: left -90px;
} .tumblr {
	background-position: left -108px;
}

.pic {
	width: 417px;
	height: 250px;
	margin: 0 auto;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
} .pic img {
	display: none;
	border: none;
}

a.launch {
	color: #0076a3;
	font-size: 11px;
	line-height: 14px;
	text-align: left;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	margin: 10px 0px 0px 0px;
}

.tweet-this {
	background: transparent url(../blk_images/tweet-this.png) no-repeat top left;
	padding: 0px 0px 4px 20px;
}

.share-blk {
	position: relative;
	top: 10px;
} .share-blk span {
	position: relative;
	display: block;
	width: 150px;
	float: left;
	clear: none;
} .share-blk span span.share-style {
	opacity: 0.75;
	width: 100px;
	color: #FFF;
	font-size: 11px;
	line-height: 14px;
	font-style: normal;
	font-weight: normal;
	text-shadow: 1px 1px 1px #000;
	position: absolute;
	top: -85px;
	left: 0px;
	text-align: center;
	z-index: 2;
	display: none;
} .share-blk a,
  .share-blk a:hover {
	text-decoration: none;
	color: #6DCFF6;
}

.hide-it {
	display: none;
	visibility: hidden;
}


/* Toggle Sharing Styles...
-----------------------------------------------------*/
#panel {
	width: 220px;
	height: 150px;
	position: absolute;
	top: 0;
	left: 31px;
	margin-top: -200px;
}

.btn-slide {
	background: transparent url(images/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}

.active {
	background-position: right 12px;
}


/* Portfolio Styles...
-----------------------------------------------------*/
.portal {
	background: transparent url(../blk_images/bg-texture.jpg) no-repeat;
	width: 417px;
	height: 250px;
	margin: 0 auto;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
}

.portal div {
	display: none;
}

#id {
	position: relative;
	top: 25px;
	left: 33px;
}

#title-box {
	position: absolute;
	top: 265px;
	left: 46px;
}

#title-box p {
	color: #CCC;
	font-size: 11px;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	position: relative;
	margin: 0px 0px 6px 0px;
	text-shadow: 1px 1px 1px #000;
}

a.prev-btn {
	width: 46px;
	height: 50px;
	display: block;
	position: absolute;
	top: 100px;
	opacity: 0.75;
	background: transparent url(../blk_images/prev-btn.png) no-repeat;
	overflow: hidden;
}

a.next-btn {
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 100px;
	left: 465px;
	opacity: 0.75;
	background: transparent url(../blk_images/next-btn.png) no-repeat;
	overflow: hidden;
}

a.prev-btn:hover,
a.next-btn:hover {
	background-position: left -50px;
}


/* Home Page Content...
-----------------------------------------------------*/
ul.recent li {
	width: 165px;
	height: 300px;
	display: block;
	float: left;
	position: relative;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
	opacity: 0.75;
	filter: alpha(opacity = 75);
	-khtml-opacity: 0.75;
	-moz-opacity: 0.75;
} ul.recent {
	list-style: none;
}

ul.recent li a {
	width: 165px;
	height: 300px;
	display: block;
}

ul.recent img {
	border: none;
}

ul.recent li span {
	opacity: 0.75;
	width: 165px;
	color: #FFF;
	font-size: 11px;
	line-height: 14px;
	font-style: normal;
	text-shadow: 1px 1px 1px #000;
	position: absolute;
	top: -85px;
	left: -20px;
	text-align: center;
	z-index: 2;
	display: none;
}

.left-margin {
	margin: 0px 0px 0px 5px;
}

.caption {
	clear: left;
	position: relative;
	top: 20px;
	display: block;
} .caption span,
  .sites span {
	color: #6DCFF6;
}

.strict {
	width: 417px;
	height: 250px;
	margin: 0 auto;
}


/* About Me // Resume Styles...
-----------------------------------------------------*/
ul#my-skillsets {
	list-style: none;
}

ul#my-skillsets li {
	display: block;
	padding: 5px 0px 5px 0px;
	border-bottom: 1px dashed #555555;
	color: #CCC;
	font-size: 11px;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	text-shadow: 1px 1px 1px #000;
}

ul#my-skillsets li a {
	color: #6DCFF6;
	font-size: 11px;
	line-height: 14px;
	text-align: left;
	font-style: normal;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
} ul#my-skillsets li a:hover {
	color: #0076A3;
	text-decoration: none;
}


/* Structural // Design Styles...
-----------------------------------------------------*/
div#container {
	width: 950px;
	position: relative;
	left: 0px;
	top: 0px;
	height: 850px;
}

div#container .left-col {
	width: 220px;
	height: 400px;
	float: left;
	position: relative;
	left: 51px;
	top: 230px;
}

div#container .right-col {
	width: 510px;
	height: 400px;
	float: left;
	position: relative;
	left: 161px;
	top: 230px;
}

h1.logo-box {
	width: 211px;
	height: 101px;
	display: block;
	position: absolute;
	left: 50px;
	top: 60px;
}

h1.logo-box a {
	width: 211px;
	height: 101px;
	display: block;
	opacity: 0;
	text-indent: -9999px;
	margin: 3px 0px 0px 3px;
	background: transparent url(../blk_images/logo-hover-glow.png) no-repeat;
} .logo-box abbr {
	width: 211px;
	height: 101px;
	display: block;
	opacity: 0;
}

h1.logo-box span {
	display: none;
	width: 211px;
	height: 101px;
}

div.blog-link {
	width: 126px;
	height: 131px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	left: 890px;
	top: 550px;
	background: transparent url(../blk_images/blog-link.png) no-repeat top;
} div.blog-link a {
	width: 126px;
	height: 131px;
	display: block;
} div.blog-link:hover {
	background-position: left -131px;
}

header {
	position: absolute;
	top: 0;
	left: 0;
}


/* Main Navigation Styles...
-----------------------------------------------------*/
nav ul {
	list-style: none;
	height: 140px;
	width: 640px;
	position: absolute;
	top: 0px;
	left: 315px;
}

nav ul li {
	float: left;
	text-indent: -9999px;
}

nav ul li#work a {
	width: 206px;
	height: 141px;
	display: block;
	overflow: hidden;
	background: transparent url(../blk_images/work-nav.png) no-repeat top;
}

nav ul li#about a {
	width: 226px;
	height: 141px;
	display: block;
	overflow: hidden;
	background: transparent url(../blk_images/about-nav.png) no-repeat top;
}

nav ul li#contact a {
	width: 207px;
	height: 141px;
	display: block;
	overflow: hidden;
	background: transparent url(../blk_images/contact-nav.png) no-repeat top;
}

nav ul li#work a:hover,
nav ul li#about a:hover,
nav ul li#contact a:hover {
	background-position: left -141px;
} nav ul li#work a.a-on,
  nav ul li#about a.a-on,
  nav ul li#contact a.a-on {
	background-position: left -141px;
}


/* Form // Input Styles...
-----------------------------------------------------*/
form {
	margin: 0;
	padding: 0;
	width: 465px;
	position: relative;
}

form h2 {
	color: #6DCFF6;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px;
	text-transform: uppercase;
}

input[type="text"] {
	float: left;
	clear: left;
	position: relative;
	width: 465px;
	height: 36px;
	background: transparent url(../blk_images/input-bg.png) no-repeat;
	border: none;
	color: #CCC;
	font-size: 18px;
	font-weight: bold;
	padding: 0px;
	text-indent: 10px;
	margin: 0px 0px 7px 0px;
	font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
} input[type="text"]:focus {
	color: #FFF;
}

input.sign_up_email {
	float: left;
	position: relative;
	top: 5px;
	background: #CCC;
	border: 1px solid #000;
	height: 25px;
	width: 210px;
	color: #555;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 0px 5px 0px;
	text-indent: 10px;
} input.sign_up_email:focus {
	background: #CCC;
	border: 1px solid #00aef0;
	height: 25px;
	width: 210px;
	color: #252525;
} button {
	font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
	float: left;
	clear: left;
	position: relative;
	top: 10px;
	background: #0076a3;
	border: none;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	cursor: pointer;
	padding: 5px 15px 5px 15px;
	opacity: 0.75;
} button:hover {
	background: #00aef0;
} .close-this a {
	color: #9e0b0f;
	display: block;
	position: relative;
	clear: left;
	top: 40px;
	opacity: 0.75;
} .close-this a:hover {
	color: #9e0b0f;
}

textarea {
	float: left;
	clear: left;
	position: relative;
	width: 465px;
	height: 157px;
	background: transparent url(../blk_images/textarea-bg.png) no-repeat;
	border: none;
	color: #CCC;
	font-size: 18px;
	font-weight: bold;
	padding: 7px 10px 7px 10px;
	font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
} textarea:focus {
	color: #FFF;
}

input[type="submit"],
input.blk_submit {
	float: left;
	clear: left;
	text-align: left;
	width: 219px;
	height: 35px;
	display: block;
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	overflow: hidden;
	background: transparent url(../blk_images/link-style.png) no-repeat top;
	color: #CCC;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	font-family: Helvetica Neue, Helvetica, Arial, Sans-Serif;
} input[type="submit"]:hover {
	color: #FFF;
	background-position: left -35px;
	text-shadow: 1px 1px 1px #555;
	cursor: pointer;
}

.error p {
	color: #f58320;
	font-size: 11px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
}

.error h3 {
	color: #CCC;
	font-size: 14px;
	line-height: 22px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
} .error h3 span {
	color: #6DCFF6;
	font-size: 14px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
}

.error a {
	color: #6DCFF6;
	font-size: 11px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid #6DCFF6;
} .error a:hover {
	color: #0076A3;
	text-decoration: none;
	border-bottom: 2px solid #0076A3;
} .error span {
	color: #6DCFF6;
	font-size: 13px;
	text-align: left;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
}

#nameError,
#emailError,
#messageError {
	display: none;
}


/* Footer Styles...
-----------------------------------------------------*/
footer {
	width: 400px;
	height: 30px;
	position: absolute;
	padding: 15px 0px 0px 0px;
	top: 820px;
	left: 51px;
	background: transparent url(../blk_images/blue-box.png) no-repeat left;
}

footer p {
	margin: 0px;
	padding: 0px 0px 0px 27px;
	color: #555;
	font-weight: bold;
	font-style: italic;
	font-size: 10px;
}

footer p span {
	color: #959595;
}

footer p span.get-year {
	color: #555;
}

footer a {
	color: #6DCFF6;
	font-weight: bold;
	font-style: italic;
	font-size: 10px;
}


/* Flexcroll Styles...
-----------------------------------------------------*/
#mycustomscroll {
	width: 220px;
	height: 290px;
	overflow: auto;
	position: relative;
	margin: 0.3em auto;
	padding: 0px 10px 0px 0px;
	text-align: left;
}

.scrollgeneric {
	line-height: 1px;
	font-size: 1px;
	position: absolute;
	top: 0; 
	left: 0;
}

.vscrollerbase {
	width: 10px;
	background-color: #959595;
	opacity: 0.50;
	filter: alpha(opacity = 50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
}

.vscrollerbar {
	width: 10px;
	background-color: #555;
	cursor: pointer;
}

.vscrollerbar {
	background-color: #555;
	height: 50px;
}

.vscrollerbar {
	padding: 0px;
	z-index: 2;
}

.vscrollerbarbeg {
	background: none;
	width: 0px;
	height: 0px !important;
}

.vscrollerbarend {
	background: none;
	width: 0px;
	height: 0px;
}

.scrollerjogbox {
	background: none;
	width: 10px;
	height: 10px;
	top: auto; 
	left: auto;
	bottom: 0px; 
	right: 0px;
}

.vscrollerbase {
	background: #959595;
}

.vscrollerbasebeg {
	background: none;
	width: 0px;
	height: 0px !important;
}

.vscrollerbaseend {
	background: none;
	height: 0px;
	width: 0px;
}

.scrollerjogbox:hover {
	background: none;
}