/*******************************************
 * Wilderness Films - global CSS
 * 
 * MTJ - 10-2014
 *******************************************/

/***** BODY CSS *****/
.wrapper {
	padding:0;
	margin:0;
}

div.centered
{
	width: 1010px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img { float:left; }

/* header and footer are fixed at top & bottom, and float above the rest of the body */
#header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

#footer {
	position: fixed;
	bottom: 0px;
	/* width: 100%; this screwed up the layout when browser window got narrower than intended size */
	z-index: 100;
	height:40px !important;
}


/* To force the entire body to fill with gray */
#bodyWrap {
	position: absolute;
    top: 0;
    bottom: 0;
	background-color:#222222;
}

#pagebody {
	position: relative;
	width:1010px;
	top:123px;
	z-index:1;
	background-color:#222222;
}

.galleryThumb {
	width:200px;
	height:112px;
}

.galleryThumbNews {
	width:230px;
	height:129px;
}


.bodytext 
{
	font-size: 14px;
}


/* Trailers */
.trailerTitle {
	font-size: 14px;
	font-weight: bold;
}


/**** Home Page Special CSS ****/
.intro-text.index
{
	padding: 0 80px 0 93px;
}

/**** Creating, Consulting, Producing Pages ****/
.intro-text
{
	padding: 15px 70px 15px 70px;
	font-family: "Century Gothic", "Questrial", Verdana, Geneva, Arial, sans-serif;
	line-height: 20px;
	color: #999977;	
	text-align: left;
}

#intro.image
{
	display: table;
	table-layout: fixed;
}

#intro.image span
{
	vertical-align: middle;
	display: table-cell;
}

#intro.image img
{
	width: 120px;
	height: 120px;
	padding: 0 15px 0 0;
	vertical-align: middle;
	float: none;
	display: table-cell;
}

.spacer
{
	clear: both;
}

/**** About Page Special CSS ****/
#bios
{
	display: inline-block;
	padding: 30px 50px 50px 50px;
}

.bio-name
{
	text-align: center;
	font-size: 18px;
	color: #29a5bf;
	margin-bottom: 15px;
}

.bio-column
{
	width: 45%;
	padding: 0px 20px 0px 20px;
}

.bio-column p
{
	padding: 10px 0 10px 0;
	color: #888866;
	line-height: 18px;
	/*font-family: Helvetica, sans-serif;*/
}

.bio-column em
{
	font-weight: bold;
	font-style: italic;
}

.bio-column i
{
	font-style: italic;
}

.bio-column img
{
	width: 120px;
	height: 120px;
}

.first-col-side
{
	margin: 0 10px 10px 0;
}

.second-col-side
{
	margin: 0 0 10px 10px;
	float: right;
}

#bio-one
{
	float: left;
}

#bio-two
{
	float: right;
}

/**** Partners Page Special CSS ****/
#partners_container
{
	width: 100%;
	text-align: center;
}

#partners
{
	width: 100%;
	display: inline-block;
	padding: 30px 0 30px 30px;
	font-family:'Century Gothic', Questrial, Futura, sans-serif
}

.partner-column
{
	width: 28%;
	padding: 0 22px 0 22px;
	float: left;
}

.partner-column.last
{
	padding-left: 0;
}

.partner-title
{
	text-align: center;
	font-size: 20px;
	color: #29a5bf;
	margin-bottom: 20px;
}

.partner-column div
{
	padding: 10px 0 10px 0;
}

.partner-column p
{
	text-align: center;
	color: #888866;
	font-size: 14px;
}

/**** Client Comments CSS ****/

#client_comments
{
	padding: 0 70px 15px 70px;
	font-family: "Century Gothic", "Questrial", Verdana, Geneva, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #999977;	
}

#client_comments div
{
	padding: 10px 0 10px 0;
}

.client-name
{
	font-style: italic;
}

/*********** News page special CSS ***********/
.newsblock
{
	position:relative;
	top:50px;
	width:1010px;
	text-align: center;
}


.textStyleNews
{
	font-family: "Century Gothic", "Questrial", Verdana, Geneva, Arial, sans-serif;
	line-height: 20px;
	text-align:center; 
	color: #999977;
}

.bodytextNews
{
	position:relative;
	width:960px;
	left:120px;
	text-align:left; 
	font-family: "Century Gothic", "Questrial", Verdana, Geneva, Arial, sans-serif;
	line-height: 20px;
	color: #999977;
}

.centeredStuffNews
{
	text-align:center;
	font-family: "Century Gothic", "Questrial", Verdana, Geneva, Arial, sans-serif;
	font-size:14px;
	line-height: 16px;
	color: #999977;
}

.highlightedNews
{
	/* color:#85F6FC; */  /* light aqua */
}


/* Hide/Show CSS */
.hiddenNews {
  display: none;
}


/***** ROLLOVER OVERLAY CSS *****/
.image {
}

.rolloverOverlay {
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	top:0px;
	left:0px;

	background-color:#097C99; /* Benjamin Moore "Laguna Blue" */
	opacity:0.85;    
}

.rolloverOverlay > div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
}

ul { list-style: none; width: 100%; }
ul li { position:relative; display:inline-block; margin:0; padding:0;}

li:hover .rolloverOverlay {
	display:block;
}

.rolloverOverlayTextStyle {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-size: 17px;
	font-weight:normal;
	text-align:center;
	color:white;
}
.rolloverOverlayTextStyleSmaller {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-size: 11px;
	font-weight:normal;
	text-align:center;
	color:white;
}
.rolloverOverlayTextMoreLink {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-size: 13px;
	font-weight:bold;
	text-align:center;
	color:#64540C;   /* dark gold */
}

.rolloverOverlayTextStyleNews {
	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight:normal;
	line-height: 120%;
	text-align:center;
	overflow: hidden;
	white-space: nowrap;
/*	display: inline;	*/
/*	text-overflow: ellipsis; */
	color:white;
}


/***** VERTICAL CENTERING *****/		

#vertParent {
	display: table;
}

#vertChild {
	display: table-cell;
	vertical-align: middle;
}


#horizon
{
	color: white;
	background-color: transparent;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
}

/***** Different declarations based on number of lines of text in overlay *****/
#content_1
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -11px;
	left: 50%;
	width: 192px;
	height: 22px;
	visibility: visible;
}
	
#content_2
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -18px;
	left: 50%;
	width: 192px;
	height: 36px;
	visibility: visible;
}
#content_3
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -25px;
	left: 50%;
	width: 192px;
	height: 51px;
	visibility: visible;
}
#content_4
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -36px;
	left: 50%;
	width: 192px;
	height: 73px;
	visibility: visible;
}
#content_4NEWS
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -105px;
	position: absolute;
	top: -36px;
	left: 50%;
	width: 210px;
	height: 73px;
	visibility: visible;
}
#content_5
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -44px;
	left: 50%;
	width: 192px;
	height: 87px;
	visibility: visible;
}
#content_6
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -47px;
	left: 50%;
	width: 192px;
	height: 95px;
	visibility: visible;
}
#content_7
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -55px;
	left: 50%;
	width: 192px;
	height: 109px;
	visibility: visible;
}
#content_8
{
	font-family: "Century Gothic", Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -96px;
	position: absolute;
	top: -63px;
	left: 50%;
	width: 192px;
	height: 123px;
	visibility: visible;
}


/***** NAV FORMATTING *****/

.logoNavImg {
	width: 1010px;
	height: 122px;
	background-position: 0 100% !important;
}

.logoNavImg:hover {
	background-position: 0 0 !important;
}

.globalNavImg {
	width: 255px;
	height: 94px;
	background-position: 0 100% !important;
}

.globalNavImg:hover {
	background-position: 0 0 !important;
}

/*** Home Page ***/
.homeMainNavImg {
	width: 333px;
	height: 94px;
	background-position: 0 100% !important;
	display:inline-block;
}

.homeMainNavImg:hover {
	background-position: 0 0 !important;
}

/*** Inner Pages ***/
.topNavWrap {
	position:fixed;
	top:84px !important; 
	z-index:500;
	white-space: nowrap;
	margin-left:655px;
	margin-right:0;

}

.topNavContainer {
	position: relative;
	height:33px !important;
	z-index: 200;
}

.topNavImg {
	width: 103px;
	height: 33px;
	background-position: 0 100% !important;
}

.topNavImg:hover {
	background-position: 0 0 !important;
}

.secondaryNavImg {
	width: 87px;
	height: 28px;
	background-position: 0 100% !important;
}

.secondaryNavImg:hover {
	background-position: 0 0 !important;
}

/*** Global Footer ***/
.footerNavImg {
	width: 55px;
	height: 40px;
	background-position: 0 100% !important;
	z-index: 200;
}

.footerNavImg:hover {
	background-position: 0 0 !important;
}


/***** LINK FORMATTING *****/

/* normal link */
a:link {
	color: #29A5BF;	/* medium aqua */
}

/* visited link */
a:visited {
	color: #29A5BF;
}

/* mouse over link */
a:hover {
	color: #85F6FC;	/* light aqua */
}

/* selected link */
a:active {
	color: #85F6FC;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: underline;
}		

/* remove dotted outlines on links in Firefox */
a {
   outline: 0;
}

video {
   outline: 0;
}