@charset "utf-8";
/* Screen Stylesheet */



/*---------------------------------- Overall Structure -------------------------------*/
html, body, #outer {
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
	}
body {
	background:url(../graphics/bkgrnd_solid.jpg) repeat;
	background-color: #ACF;
	}
#outer {
	background:url(../graphics/bkgrnd_grad.jpg) repeat-x;
	position:relative;
	margin: 0 auto;
	}



/*------------------------- Header ----------------------------*/

/* this header element holds the txt and img divs */
#header {
	width: 700px;
	height: 220px;	
	position: relative;
	top: 0px;
	left: 0px;
	margin-bottom: 25px;
	/*DEBUG MODE! Orange Box border: 3px #F95 dotted;*/
	}
.mainHeading {
	position: absolute;
	bottom: 110px;
	left: 45px;
	/*DEBUG MODE! Light Red Box border: 3px #F77 dotted;*/
	}
.subHeading {
	position: absolute;
	height: 16px;
	max-width: 580px;
	left: 49px;
	bottom: 102px;
	overflow: hidden;
	background: url(../graphics/filter_lightGray.gif) repeat bottom left;
	/*DEBUG MODE! Light Green Box border: 3px #7F7 dotted;*/
	}
#headerImg {
	position: absolute;
	height: 100px;	
	bottom: 1px;
	left: 0px;
	/*DEBUG MODE! Light Green Box border: 3px #7F7 dotted;*/
	}
/* these set up the two horizontal lines surrounding the header */
.lineLong {
	width: 500px;
	height: 1px;	
	position: absolute;
	left: 0px;
	bottom: 101px;	
	background: url(../graphics/line_long.jpg) no-repeat;
	}
.lineShort {
	width: 310px;
	height: 1px;	
	position: absolute;
	left: 0px;
	bottom: 0px;	
	background: url(../graphics/line_short.jpg) no-repeat;
	}
/* these set up the pixel dingbats above and below the header image and lines */
.headerDingTop {
	width: 50px;
	height: 44px;
	position: absolute;
	left: 0px;
	bottom: 102px;	
	background: url(../graphics/ding_bottomLeftRight.gif);
	}
.headerDingBottom {
	width: 45px;
	height: 32px;
	position: absolute;
	left: 0px;
	bottom: -32px;	
	background: url(../graphics/ding_topLeft.gif);
	}



/*----------------------------- Center Content Strip --------------------------------*/
#contentStrip {
	margin: 0 auto;
	min-height:100%	;
	vertical-align: top;
	width: 930px;
	position: relative;
	text-align:left;
	background: #FFF url(../graphics/nav_blueBlur.jpg) no-repeat top right;
	}
.leftShadow, .rightShadow {
	position: absolute;
	margin: 0;
	width: 4px;
	height: 100%;
	background-repeat: repeat-y;
	position: absolute;
	top: 0px;
	}
.leftShadow {
	background: url(../graphics/shadowLeft.gif);
	left: -4px;
	}
.rightShadow {
	background: url(../graphics/shadowRight.gif);
	right: -4px;
	}



/*----------------------------------- Spacers and Enders ------------------------------------*/
#wholeBodyEnder {
	height: 115px;
	position: relative;
	/*DEBUG MODE! Light Blue Box border: 3px #77F dotted;*/
	}	



/*----------------------------------- A Row in the Main Body ------------------------------------*/
.row {
	position: relative;
	width: 750px;
	min-height: 250px;
	margin-bottom: 50px;
	/*DEBUG MODE! Blue Box border: 3px #69F Dotted;*/
	}
.imageHolder {
	position: absolute;
	height: 100%;
	width: 100px;
	top: 0px;
	right: 475px;
	border-top: 1px #CCC dotted;
	background: url(../graphics/ding_topRight.gif) no-repeat;
	background-position: top right;
	/*DEBUG MODE! Orange Box border: 3px #F93 Dotted;*/
	}
.imageHolder img {
	position: relative;
	top: 25px;
	right: 127px;
	border: 1px solid #CCC;
	}
.emptyImage, .emptyImageSmall {
	position: relative;
	float: right;
	width: 50px;
	height: 50px;
	margin: 25px 25px 0px 25px;
	/*DEBUG MODE! Blue Box border: 3px #69F Dotted;*/
	}
.emptyImageSmall {
	width: 25px;
	height: 25px;
	}
.captionBox {
	position: relative;
	width: 200px;
	height: 25px;
	top: 25px;
	right: 127px;
	text-align: center;
	}
.rowSplitter {
	position: relative;
	width: 725px;
	margin: 40px 0px 10px 0px;
	background: url(../graphics/filter_lightGray.gif) repeat top left;
	}
.rowTextHolder {
	position: relative;
	width: 400px;
	left: 275px;
	padding: 25px 25px 25px 25px;
	border-left: 1px #CCC dotted;
	border-right: 1px #CCC dotted;
	border-bottom: 1px #CCC dotted;
	background: url(../graphics/ding_bottomRight.gif) no-repeat;
	background-position: bottom right;
	/*DEBUG MODE! Orange Box border: 3px #F93 Dotted;*/
	}
.rowSubText {
	position: relative;
	width: 440px;
	left: 275px;
	padding: 5px 25px 5px 25px;
	}



/*------------------------- Right Side Main Navigation ----------------------------*/
#mainNav {
	position: absolute;
	width: 300px;
	height: 440px;	
	right: 0px;
	top: 0px;
	}
.headerFilter { /* This lightens the header image when the nav is moused over */
	position: absolute;
	width: 630px;
	height: 100px;
	top: 9px;
	right: 299px;
	/*DEBUG MODE! Light Red Box border: 3px #F77 dotted;*/
	}
/* this provides a clickable area over the logo to take the user back to the front page */
.home {
	position: absolute;
	width: 200px;
	height: 100px;	
	top: 0px;
	right: 0px;
	}
.home a, .home a:hover {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	border: none;
	}
#navText{
	position: absolute;
	width: 210px;	
	right: 1px;
	top: 110px;
	line-height: 21px;
	}
#navText ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#navText li {
	position: relative;
	/* this padding adds something to overlap under the subnav, so the user's mouse stays on the nav */
	padding: 4px 0px 4px 55px;
}
#navText li a {
	display: block;
	color: #000;
	text-decoration: none;
	}
#navText li:hover { /* The hover state of 1st level nav items */
	z-index: 420;
    text-decoration: none;
	background: url(../graphics/filter_white.gif);
    }
#navText li:hover>a {
	color: #24b9ff;
    }
/* This screens back the header image when the nav is hovered  
#navText li:hover + .headerFilter,
.headerFilter:hover {
	background: url(../graphics/filter_lightWhite.gif) repeat top left;
	}
.headerFilter:hover, */
.theTeam:hover + .headerFilter {
	background: url(../graphics/filter_lightWhite.gif) repeat top left;
	}



/*----------------------------- Subnav ---------------------------------*/

#navText li ul {
	width: 765px;
	position: absolute;
  	right: 3000px; 
  	top: 0px;
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}
#navText li ul li {
	display: inline;
	float: right;
	padding: 4px 0px 50px 20px;
	}
#navText li ul li a {
	display: block;
	color: #777;
	text-transform: lowercase;
	}
/* make flyout appear when the root LI is hovered */
#navText li:hover ul {
  	right: 200px;
	}
#navText li ul li:hover a {
	border-bottom: 1px dotted #24b9ff;
	color: #000;
	background: #fff;
	}
#navText li ul li:hover {
	color: #000;
	background: none;
	}



/*------------------------- Main Navigation Sections----------------------------*/

/* this rules affects the nav flyouts when they're contained by the same section ID
	it makes the section that the user is in the active flyout */ 
#aboutUs .aboutUs ul, #news .news ul, #theTeam .theTeam ul, #links .links ul {
	right: 200px;
	}
/* this makes the permanently activated flyout lower than the rollovers */
#aboutUs .aboutUs, #news .news, #theTeam .theTeam, #links .links {
	z-index: 410;	
	}
/* make the current page's nav link the active color, and don't allow the hand cursor */
#aboutUs .aboutUs>a, #news .news>a, #theTeam .theTeam>a, #links .links>a {
	cursor: default;
	color: #000;
	}
#aboutUs .aboutUs, #news .news, #theTeam .theTeam, #links .links {
	color: #24b9ff;
	background: url(../graphics/filter_white.gif);
	}
#aboutUs ul>.aboutUs>a, #news ul>.news>a, #theTeam ul>.theTeam>a, #links ul>.links>a {
	color: #000;
	}
/* This rule highlights the appropriate subsection links, whose flyouts should already have been left active via the previous rule */
#ourMission .ourMission,
#theCompany .theCompany,

#seanAzlin .seanAzlin,
#ericMiller .ericMiller,
#andreBailey .andreBailey,
#derrickMiller .derrickMiller,
#alexPetrovich .alexPetrovich,
#brendanDuffey .brendanDuffey,
#andrewFanton .andrewFanton,
#wesleyPaugh .wesleyPaugh,			
#jonRichards .jonRichards,

#indyGameDevs .indyGameDevs,
#gameDevGroups .gameDevGroups,
#webDesign .webDesign,
#indyMusic .indyMusic,
#friends .friends {

	border-bottom: 1px dotted #24b9ff;
	color: #000;
	cursor: default;
	}



/*----------------------------------- Bottom Right Login Area ------------------------------------*/
#loginHolder{
	width: 170px;
	height: 180px;
	margin: 0px;
	position: absolute;
	right: 0px;
	top: 480px;
	background: url(../graphics/login_blueBlur.jpg);
	background-repeat: no-repeat;
	/*DEBUG MODE! Blue Box border: 3px #6CF Dotted;*/
	}
#loginArea {
	width: 120px;
	position: absolute;
	right: 50px;
	top: 0px;
	/*DEBUG MODE! Orange Box border: 3px #F93 Dotted;*/
	}
.loginContent {
	width: 120px;
	position: absolute;
	left: 0px;
	top: 0px;
	}



/*----------------------------------- Form Element Styles ------------------------------------*/
.inputBox {
	width: 80px;
	height: 15px;
	line-height: 15px;
	padding: 0 5px 0px 5px;
	border-top: none;
	border-right: 1px #777 solid;
	border-bottom: 1px #777 solid;
	border-left: 1px #777 solid;
	background: url(../graphics/blueFadeUp.gif) bottom repeat-x;
	}
.smallButton {
	width: 65px;
	height: 21px;
	border: none;
	background: url(../graphics/smallButton.gif) no-repeat;
	background-position: 0px 0px;
	outline: none;	
	}
.smallButton:hover {
	background-position: 0px -21px;
	color: #000;
	outline: none;	
	}
.smallButton:active {
	background-position: 1px -42px;
	color: #000;
	outline: none;
	}
.largeButton {
	width: 100px;
	height: 29px;
	border: none;
	background: url(../graphics/buttonLarge.gif) no-repeat;
	background-position: 0px 0px;
	outline: none;	
	}
.largeButton:hover {
	background-position: 0px -29px;
	color: #000;
	outline: none;	
	}
.largeButton:active {
	background-position: 1px -58px;
	color: #000;
	outline: none;
	}
.textBox {
	position: relative;
	width: 100%;
	height: 300px;
	}
.blogInput {
	width: 200px;
	}
.formLabel {
	background: #FFF;
	}
.leftOfDivider {
	position: absolute;
	width: 200px;
	right: 475px;
	text-align: right;
	background: url(../graphics/filter_tribeMindBlue.gif) repeat top right;
	}



/*------------------------- Footer ----------------------------*/
#footer {
	position: absolute;
	width: 452px;
	height: 25px;
	left: 275px;
	bottom: 0px;
	background: url(../graphics/bkgrnd_solid.jpg) repeat;
	}
.hoverZone {
	position: absolute;
	bottom: 0px;
	left: 0px;
	}
#footer .hoverZone:hover .dingFloating {
	background: url(../graphics/ding_floatingGlow.gif) no-repeat center;
	}
#footer .hoverZone:hover .copyrightNotice {
	background: url(../graphics/copyrightNoticeGlow.gif) no-repeat;
	background-position: 0px 17px;
	}
.copyrightNotice { /* the footer is an image so the user can't break the layout when resizing text */
	position: absolute;
	width: 315px;
	height: 35px;
	bottom: 0px;
	left: 63px;	
	background: url(../graphics/copyrightNotice.gif) no-repeat;
	background-position: 0px 17px;
	}
.dingLeft, .dingRight {
	width: 32px;
	position: absolute;
	bottom: 0px;
	}
.dingLeft {
	height: 100px;
	left: -57px;
	background:url(../graphics/ding_bottomRightShort.gif) no-repeat bottom;
	border-right: 1px #CCC dotted;
	}
.dingRight {
	height: 250px;
	right: -57px;
	background:url(../graphics/ding_bottomLeftShort.gif) no-repeat bottom;
	border-left: 1px #CCC dotted;
	}
.dingFloating {
	position: absolute;
	width: 225px;
	height: 30px;
	bottom: 30px;
	left: 120px;
	background: url(../graphics/ding_floating.gif) no-repeat center;
	border-bottom: 1px #CCC dotted;
	}
.topShadow {
	position: absolute;
	margin: 0px;
	height: 8px;
	width: 100%;
	background: url(../graphics/shadowBottom.gif);
	background-repeat: repeat-x;	
	top: 0px;
	left: 0px;
	}
.rightInsideShadow, .leftInsideShadow {
	position: absolute;
	margin: 0;
	width: 4px;
	height: 100%;
	background-repeat: repeat-y;
	top: 0px;
	}
.rightInsideShadow {
	background: url(../graphics/shadowRight.gif);
	left: 0px;
	}
.leftInsideShadow {
	background: url(../graphics/shadowLeft.gif);
	right: 0px;
	}
.roundInsideTopRight, .roundInsideTopLeft {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: 0;
	top: 0px;
	background: top no-repeat;
	}
.roundInsideTopRight {
	background: url(../graphics/roundInsideTopRight.gif);
	right: 0px;
	/*DEBUG MODE! Blue Box border: 3px #69F Dotted;*/
	}
.roundInsideTopLeft {
	background: url(../graphics/roundInsideTopLeft.gif);
	left: 0px;
	/*DEBUG MODE! Blue Box border: 3px #69F Dotted;*/
	}



/*----------------------------------- Technical Layout Items ------------------------------------*/
.whiteFilter, .lightWhiteFilter, .lightGrayFilter, .tribeMindBlueFilter {
	postion: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: repeat;
	}
.whiteFilter {
	background: url(../graphics/filter_white.gif);
	}
.lightWhiteFilter {
	background: url(../graphics/filter_lightWhite.gif);
	}
.lightGrayFilter {
	background: url(../graphics/filter_lightGray.gif);
	}
.tribeMindBlueFilter {
	background: url(../graphics/filter_tribeMindBlue.gif);
	background-position: top right;
	}
.blueFadeUpLine {
	position: relative;
	width: 100%;
	height: 6px;
	background: url(../graphics/blueFadeUp.gif) repeat-x bottom;
	}
.headshotSlice, .headshotSliceHover {
	position: absolute;
	width: 200px;
	height: 50px;
	right: 475px;
	border: 1px solid #CCC;
	}
.headshotSliceHover:hover {
	background: url(../graphics/filter_lightWhite.gif);
	}

/*---------------------------------- Type Styles -------------------------------*/
body {
	font-size: 62.5%;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	}
input, select, th, .smallButton, li li, li p, p p, .bodyText .subText, .bodyText li {
	font-size:1em /* Override em nesting issues */
	}
h2 { /* Section sub-head */
	position: relative;
	display: inline;
	margin: 0px 25px 0px 250px;
	padding: 0px 3px 0px 3px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;	
	color: #999;	
	background-color: #FFF;
	}
h3 { /* Paragraph heading */
	display: inline;
	padding: 0px 3px 1px 3px;
	margin: 0px 0px 0px -3px;
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: .1em;
	color: #000;
	text-transform: uppercase;
	background: url(../graphics/blueFadeUp.gif) repeat-x bottom;
	}
h4 {
	margin: 0px;
	font-weight: bold;
	font-size: 1em;
	line-height: 2em;
	color: #999;
	}
h5 { /* Form Label */
	position: relative;
	display: inline;
	margin: 0;
	right: 5px;
	padding: 0px 3px 0px 3px;
	font-size: 1.4em;
	font-weight: bold;
	text-transform: uppercase;	
	color: #CCC;
	background-color: #FFF;
	}
h6 { /* Row Splitter */
	position: relative;
	display: inline;
	margin: 0;
	left: 275px;
	padding: 0px 25px 0px 25px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;	
	color: #CCC;
	background-color: #FFF;
	}
.bodyText {
	margin: 10px 0 0 0;
	font-size: 1.2em;
	line-height: 1.9em;
	color: #555;
	}
.bodyText a {
	display: inline;
	}
.subText, .captionText {
	font-size: .9em;
	letter-spacing: 0.05em;
	}
.captionText {
	padding: 7px 0px 2px 0px;
	font-weight: bold;
	color: #777;
	}
.variable {
	font-family: "Courier New", Courier, mono;
	font-size: 1.2em;
	font-weight: normal;
	color: #ED5F1C;
	}
.errorCode {
	font-family: "Courier New", Courier, mono;
	font-size: 1.2em;
	font-weight: bold;
	color: #F88;
	}
.smallButton, .largeButton, .loginContent {
	color: #777;
	text-transform: lowercase;
	}
.smallButton {
	font-size: 9px;
	padding-bottom: 2px;
	}
.loginContent {
	text-align: right;
	}
.inputText {
	font-size: 1em;
	color: #ED5F1C;
	line-height: 2em;
	}
.submitButton {
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	word-spacing: normal;
	color: #000;
	line-height: 2.1em;
 	background-color: #CCC;
	}
#navText {
	font-size: 9px;
	text-transform: lowercase;
	}



/*------------------------------------ Link Styles -----------------------------*/
a:link {
    color: #24b9ff;
    text-decoration: none;
    }
a:visited {
    color: #24b9ff;
    text-decoration: none;
    }
a:hover {
    color: #000;
    text-decoration: underline;
    }
a img {
	border: none;
	}

#loginArea a:link {
    color: #24b9ff;
    }
#loginArea a:visited {
    color: #24b9ff;
    }
#loginArea a:hover {
    color: #000;
	text-decoration: underline;
    }

a:link .captionBox {
    color: #24b9ff;
    }
a:visited .captionBox {
    color: #079;
    }
a:hover .captionBox {
    color: #000;
	background: url(../graphics/blueFadeDown.gif) repeat-x;
    }
a:hover .captionText {
	color: #000;
	border-bottom: 1px dotted #24b9ff;
	}

a:hover img {
	border: 1px dotted #24b9ff;
	}



/*----------------------------------- Z-Index Stuff ------------------------------------*/
#footer {
	z-index: 600;
	}
.row {
	z-index: 400;
	}
#mainNav {
	z-index: 300;
	}
#header {
	z-index: 200;
	}
#loginHolder {
	z-index: 100;
	}
#wholeBodyEnder {
	z-index: 50;
	}



/*----------------------------------- Hacks ------------------------------------*/

/* These hacks should get rid of focus rectangles on links for all browsers */
a, .largeButton, .smallButton {
	outline: none;
	}
:focus {
	-moz-outline-style: none; /* this is a mozilla-specific anti focus rule */
	}
#mainNav {
	onFocus: if(this.blur)this.blur(); /* removes focus rectangles in IE */
	}