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

/* =General
---------------------------------------------- */
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none;}

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }

/* Removes the outline on links */
a {outline: none; border: 0;}
a:hover {border: 0;}

.clearme {display: block; clear: both; height: 0; margin: 0; padding: 0;}
/* Code to clear floats inside containers - add to the outside container */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* End of float clearing trick */

.fr {
float: right;
}

.fl {
float: left;
}


html {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	background-color: #000000;
	background-position: top left;
	background-repeat: no-repeat;
	text-align: center;
	height: 100%;
}
body.lightning1 {
	background-image: url(../images/bkgd-lightning1.jpg)
}
body.lightning2 {
	background-image: url(../images/bkgd-lightning2.jpg)
}
body.bowling1 {
	background-image: url(../images/bkgd-bowling1.jpg)
}
body.bowling2 {
	background-image: url(../images/bkgd-bowling2.jpg)
}
body.bowling3 {
	background-image: url(../images/bkgd-bowling3.jpg)
}
body.strikes1 {
	background-image: url(../images/bkgd-ks1.jpg)
}
body.anvil1 {
	background-image: url(../images/bkgd-anvil1.jpg)
}
body.anvil2 {
	background-image: url(../images/bkgd-anvil2.jpg)
}
body.anvil3 {
	background-image: url(../images/bkgd-anvil3.jpg)
}
body.match1 {
	background-image: url(../images/bkgd-match1.jpg)
}
body.match2 {
	background-image: url(../images/bkgd-match2.jpg)
}
body.match3 {
	background-image: url(../images/bkgd-match3.jpg)
}
body.match4 {
	background-image: url(../images/bkgd-match4.jpg)
}
body.match5 {
	background-image: url(../images/bkgd-match5.jpg)
}

p#credit {
	position: fixed;
	bottom: 0;
	left: 0;
	padding-left: 10px;
	padding-bottom: 8px;
	font: 11px Arial, Helvetica, sans-serif;
	color:#6fb7d1;
}
p#credit a,
p#credit a:visited {
	color:#6fb7d1;
}
p#credit a:hover{
	color:#ffffff;
}

div#wrapper {
	margin: 0 auto;
	text-align: left;
	width: 915px;
	position: relative;
	min-height: 100%;
	background: url(../images/welcomebkgd.png) 295px top repeat-y;
}
div#leftcol {
	width: 295px;
	float: left;
}
div#rightcol {
	width: 555px;
	float: right;
	padding-top: 115px;
}
h1 {
	top: 0;
	left: 0;
	display: block;
	width: 295px;
	height: 130px;
	text-indent: -9999px;
	background: url(../images/strikecreativelogo.png) top left no-repeat;
}
h1 a {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 1em;
}
h1 a:hover {
	border: none;
}





/* ------------------------------- VERTICAL BANNER ----------------------------- */
div#wrapper h2 {
	width: 30px;
	height: 544px;
	display: block;
	text-indent: -9999px;
	position: absolute;
	top: 130px;
	left: 295px;
	background-repeat: no-repeat;
}
div#wrapper h2.welcome {
	background-image: url(../images/welcome.png);
}
div#wrapper h2.impress {
	background-image: url(../images/bar-impress.png);
}
div#wrapper h2.enter {
	background-image: url(../images/bar-enter.png);
}
div#wrapper h2.catch {
	background-image: url(../images/bar-catch.png);
}
div#wrapper h2.ignite {
	background-image: url(../images/bar-ignite.png);
}
div#wrapper h2.inflict {
	background-image: url(../images/bar-inflict.png);
}




/* ------------------------------------ NAV ----------------------------------- */

div#leftcol ul#nav {
	margin-top: 18px;
	margin-right: 35px;
	display: block;
	float: right;
	width: 210px;
	background: url(../images/navbkgd.png);
}
div#leftcol ul#nav li a {
	display: block;
	text-indent: -9999px;
}
div#leftcol ul#nav li#about a {
	width: 210px;
	height: 39px;
	background: url(../images/nav.png) left top no-repeat;
}
div#leftcol ul#nav li#about a:hover, ul#nav li#about a#active {
	background: url(../images/nav.png) right top no-repeat;
}
div#leftcol ul#nav li#logos a {
	width: 185px;
	height: 38px;
	background: url(../images/nav.png) left -39px no-repeat;
}
div#leftcol ul#nav li#logos a:hover, div#leftcol ul#nav li#logos a#active {
	background: url(../images/nav.png) -220px -39px no-repeat;
}
div#leftcol ul#nav li#websites a{
	width: 185px;
	height: 38px;
	background: url(../images/nav.png) left -77px no-repeat;
}
div#leftcol ul#nav li#websites a:hover, div#leftcol ul#nav li#websites a#active {
	background: url(../images/nav.png) -220px -77px no-repeat;
}
div#leftcol ul#nav li#print a{
	width: 185px;
	height: 38px;
	background: url(../images/nav.png) left -115px no-repeat;
}
div#leftcol ul#nav li#print a:hover, div#leftcol ul#nav li#print a#active {
	background: url(../images/nav.png) -220px -115px no-repeat;
}
div#leftcol ul#nav li#email a{
	margin-top: 7px;
	width: 210px;
	height: 25px;
	background: url(../images/nav.png) left -160px no-repeat;
}
div#leftcol ul#nav li#email a:hover, div#leftcol ul#nav li#email a#active {
	background: url(../images/nav.png) right -160px no-repeat;
}
div#leftcol ul#nav li#phone{
	text-indent: -9999px;
	width: 210px;
	height: 25px;
	background: url(../images/nav.png) left -185px no-repeat;
}




/* ------------------------------- RIGHT COL ----------------------------- */

 
/* --------------------- home promo --------------------- */

div#rightcol div#homepromo {
	background: url(../images/homepromobkgd.png) top left no-repeat;
	width: 555px;
	height: 345px;
	position: relative;
}
div#rightcol div#homepromo img {
	position: absolute;
	width: 287px;
	height: 273px;
	top: 36px;
	left: 4px;
}
div#rightcol div#homepromo div#promocopy {
	position: absolute;
	width: 190px;
	height: 230px;
	top: 62px;
	left: 316px;
}
div#rightcol div#homepromo div#promocopy h3 {
	font: 24px/26px Arial, Helvetica, sans-serif;
	font-weight: normal;
	color:#FFFFFF;
	padding-bottom: 20px;
}
div#rightcol div#homepromo div#promocopy p {
	font: 14px/19px Arial, Helvetica, sans-serif;
	color:#6fb7d1;
}
div#rightcol div#homepromo div#promocopy p a {
	font: 10px Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	padding: 2px 3px;
	border: none;
	color:#000000;
	text-decoration: none;
	background-color: #e12d28;
}
div#rightcol div#homepromo div#promocopy a:hover {
	background-color: #6fb7d1;
}



/* --------------------- home featured work --------------------- */

div#rightcol ul#homefeaturedwork {
	display: block;
	width: 539px;
	height: 100px;
	padding-right: 16px;
}
div#rightcol ul#homefeaturedwork li {
	display: block;
	width: 100px;
	height: 100px;
	float: right;
	background: url(../images/homeulshadow.png) top left no-repeat;
}
div#rightcol ul#homefeaturedwork li.title {
	text-indent: -9999px;
	display: block;
	float: right;
	padding-right: 12px;
	padding-top: 5px;
	background: url(../images/homefeaturedwork.png) top left no-repeat;
}
div#rightcol ul#homefeaturedwork li a {
	display: block;
	width: 83px;
	height: 83px;
	margin-top: 1px;
	margin-left: 3px;
}
div#rightcol ul#homefeaturedwork li a:hover {
	border: 1px dotted #94d1e7;
}



/* --------------------- interior featured work --------------------- */


div#rightcol img#featuredhero {
	margin-left: 30px;
	width: 495px;
	height: 330px;
	margin-bottom: 20px;
}
div#rightcol ul#interiorthumbs {
	display: block;
	width: 515px;
	height: 103px;
	margin-left: 30px;
}
div#rightcol ul#interiorthumbs li {
	display: block;
	width: 103px;
	height: 103px;
	float: right;
	background: url(../images/homeulshadow.png) top left no-repeat;
}
div#rightcol ul#interiorthumbs li a {
	cursor: pointer;
	display: block;
	width: 83px;
	height: 83px;
}
div#rightcol ul#interiorthumbs li a:hover {
	border: 1px dotted #94d1e7;
}

/* --------------------- interior featured website links --------------------- */

div#rightcol ul#websitelinks {
	display: block;
	width: 515px;
	margin-left: 30px;
}
div#rightcol ul#websitelinks li {
	display: block;
	float: right;
	width: 103px;
	background: url(../images/homeulshadow.png) top left no-repeat;
}
div#rightcol ul#websitelinks li a {
	font: 10px Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border: none;
	color: #6fadce;
	text-decoration: none;
}
div#rightcol ul#websitelinks li a:hover {
	color: #e12d28;
}


/* --------------------- interior project mini-gallery --------------------- */

div#rightcol div#projectgallery {
	width: 555px;
	height: 330px;
	position: relative;
	margin-top: 35px;
}
div#rightcol div#projectgallery img#hero {
	float: left;
	width: 452px;
	height: 330px;
}
div#rightcol div#projectgallery ul#gallerythumbs {
	float: right;
	display: block;
	width: 88px;
}
div#rightcol div#projectgallery ul#gallerythumbs li {
	display: block;
	width: 88px;
	height: 86px;
	background: url(../images/sidebarulshadow.png) top left no-repeat;
}
div#rightcol div#projectgallery ul#gallerythumbs li a {
	cursor: pointer;
	display: block;
	width: 72px;
	height: 72px;
}
div#rightcol div#projectgallery ul#gallerythumbs li a:hover {
	border: 1px dotted #94d1e7;
}



/* --------------------- interior content --------------------- */


div#rightcol div#contentarea {
	margin-top: 20px;
	padding-left: 30px;
	padding-top: 30px;
	padding-right: 65px;
	padding-bottom: 20px;
	width: 460px;
	background: url(../images/intcontentbkgd.png);
}
div#rightcol div#contentarea h3 {
	font: 24px/26px Arial, Helvetica, sans-serif;
	font-weight: normal;
	color:#FFFFFF;
	padding-bottom: 20px;
}
div#rightcol div#contentarea p {
	font: 13px/18px Arial, Helvetica, sans-serif;
	color:#6fb7d1;
	padding-bottom: 12px;
}
div#rightcol div#contentarea p a {
	font: 13px/18px Arial, Helvetica, sans-serif;
	color:#99dcf4;
}
div#rightcol div#contentarea a:hover {
	color:#000000;
	padding: 1px 2px;
	background-color: #99dcf4;
}
div#rightcol div#contentarea div.quote{
	margin-top: 10px;
	margin-left: 40px;
	padding: 0 30px 0 20px;
	border-left: 1px solid #e12d28;
}
div#rightcol div#contentarea div.quote p{
	font: 13px/21px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #ffffff;
	padding-bottom: 10px;
}
div#rightcol div#contentarea div.quote p.name{
	padding-top: 5px;
	font: 10px Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-style: normal;
	text-transform: uppercase;
	color: #6fb7d1;
}