/* CSS Document */

html {
	margin: 0;
	padding: 0;
	overflow:-moz-scrollbars-vertical; /* always show firefox scrollbar */
	}

body {
	color: #7d7d7d;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-align: center;
	line-height: 1.5em; /* sets the leading of text */
	}
	
p.mouseType {
	font-size: 8px;
	text-align: left;
	border: dashed 1px red;
	padding: 5px;
	}
	
.video_image_box{
	width: 133px;
	display: block;
	}
	
.video_image{
	width: 132px;
	height: 74px;
	float: left;
	}
	
.video_image_text{
	width: 132px;
	height: 60px;
	margin-top: 3px;
	float: left;
	position: relative;
	bottom: 0px;
	}
	
#container {
	position: relative;	top: 0; right: 0; bottom: 0; left: 0; /* make is go 0px from top and 0px from bottom */
	width: 975px; /* sets width of main container */
	margin: 0 auto; /* centers box */
	}
#container-2up {
	position: relative;	top: 0; right: 0; bottom: 0; left: 0; /* make is go 0px from top and 0px from bottom */
	width: 975px; /* sets width of main container */
	margin: 0 auto; /* centers box */
	}

textarea{
	overflow:auto; /*Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line. */
	}

p{
	margin: 0;
	padding: 0 0 8px 0;
	}

a:link {
	color: #ffb169;
	}

a:visited {
	color: #ffb169;
	}

a:hover {
	color: #a75009;
	}

.sup {
	position: relative;
	top: -2px;
	vertical-align: top;
	font-size: 8px;
}

.supSmall {
	position: relative;
	top: -2px;
	vertical-align: top;
	font-size: 6px;
}

h3 { /* headers in bottom boxes*/
	color: #ffb169; 
	font-size: 13px; 
	line-height: 16px;
	margin: 0;
	padding: 0 0 6px 0;
	}

h4 { /* headers in bottom boxes*/
	color: #7d7d7d; 
	font-size: 12px; 
	line-height: 14px; 
	margin: 0;
	padding: 0 0 10px 0;
	letter-spacing: .1em;
	word-spacing: -1px;
	}
	
ul.liBottom {
	margin: 0 0 0 15px;
	padding: 0px;
}

ul.liBottom li {
	margin: 8px 0 8px 0;
}
	
ul#nav {
	margin: 0 0 0 -15px;
	}
	
.bodyBoldOrange {
	font-weight: bold;
	color: #ffb169;
}

.groh-logotype { font-variant: small-caps;}


/* specific divs */

.dialog {
	text-align: left;
}


/* BEGIN----------------------horz scroll control--------------------------- */	

div#wn	{ 
	float: left;
    position:relative; 
    width:550px; height:200px; /* sets viewable area for horizontal scroll - 564px with 28px on each side for navigation with 10px margin*/
	margin: 0; /* keeps in line with movie 15px from left*/
    overflow:hidden;	/* keeps overflow hidden*/
	text-align: left;
	line-height: 1em; /* removes extra leading*/
	}
#scrollLinks{
	float: left;
	margin: 0 5px 0 0;
	position: relative;
	top: 0px;
}	

.mouseover_left {
	float: left;
	margin: 25px 20px 0 10px;
}

.mouseover_right {
	float: left;
	margin: 25px 0 0 20px;
}

#t1 {
	font-size: 10px;
	}
	
#t1 img { /* controls images within "t1"*/
	margin: 0 0 5px 0;
}
	
/* END----------------------horz scroll controll--------------------------- */	

	
/* BEGIN----------------------movie picker area control--------------------------- */	
#moviePickerArea {
	width: 955px;
	height: 200px;
	/*height: 159px; this messed up IE8*/
	float: left;
	clear: both;
	margin: 0 0 15px 0; /* sets bottom padding under movie picker */
	background: url('../images/mainback_02.jpg') no-repeat bottom left;
	}

#moviePicker{
	float: left;
}
	
#buyNow {
	float: right;
	margin: 0 0 0 20px; /* pushes the buy now away from the scrolling buttons*/
}
/* END----------------------movie picker area control--------------------------- */



/* BEGIN----------------------bottom box control--------------------------- */	
#bottomBoxes {
	/*background-color:#FF0000;*/
	width: 1000px; /* set the width of the bottom set of boxes container (20px margin on all boxes so it needs to be wider to not drop to the next line*/
	float: left;
	clear: both;
	}

	
/* END----------------------bottom box control--------------------------- */

#contentPreviewVideo {
	float: left;
	margin: 0px 0 10px 0;
	padding: 38px 0 0 0;
	width: 995px;
	overflow: auto;
	text-align: left;
	/*background: url('../images/mainback_01.jpg') no-repeat top left;*/
}


.contentPreviewVideo-2up {
	float: left;
	margin: 0px 15px 10px 15px;
	padding: 38px 0 0 0;
	width: 450px;
	overflow: auto;
	text-align: left;
	/*background: url('../images/mainback_01.jpg') no-repeat top left;*/
}


	
/* BEGIN----------------------content video control--------------------------- */

#contentVideo {
	float: left;
	margin: 0px 0 10px 0;
	padding: 38px 0 0 0;
	width: 995px;
	overflow: auto;
	text-align: left;
	background: url('../images/mainback_01.jpg') no-repeat top left;
}

#page_title {
	float: left;
	margin: -25px 0 0 15px;
	width: 935px;
	height: 30px;
	text-align: left;
}
#page_title_inner {
	float: left;
	width: 640px;
	overflow: auto; /*was set to "none"*/
	text-align: right;
}
#page_title h1 {
	color: #7d7d7d; 
	font-size: 16px; 
	line-height: 14px; 
	margin: 0;
	padding: 0 0 10px 0;
	letter-spacing: .1em;
	word-spacing: -1px;
}

#form {
	/*background-color:#FFFF99;*/
	float: left; /* floats the box to the right of the video */
	width: 935px; /* keeps 10px from the edge of the contentVideo */
	min-height: 410px; /* keep the videoText the same height as the movie */
	margin: 0 40px 0 10px;
}


#video {
	background: url('../images/grohtvloading.gif') no-repeat top left;
	width: 640px;
	height: 380px;
	margin: 0 15px 0 15px;
	float: left;
}

#videoThankYou { /* thank you image in the video spot*/
	background: url('../images/grohtv-thank-you.gif') no-repeat top left;
	width: 640px;
	height: 380px;
	margin: 0 15px 0 15px;
	float: left;
}

#videoContactUsLive { /* thank you image in the video spot*/
	background: url('../images/grohtv-thank-you-live.gif') no-repeat top left;
	width: 640px;
	height: 380px;
	margin: 0 15px 0 15px;
	float: left;
}


#videoThankYouWorkshop { /* thank you image in the video spot*/
	background: url('../images/grohtv-thank-you-workshop.gif') no-repeat top left;
	width: 640px;
	height: 380px;
	margin: 0 15px 0 15px;
	float: left;
}

#videoSubscribe { /* subscribe image in the video spot*/
	width: 640px;
	height: 520px;
	margin: 0 15px 0 15px;
	float: left;
}

#podcast { 
	width: 120px;
	height: 80px;
}

#podcast p { 
	margin-top: 60px;
	font-size: 8px;
	line-height: 10px;
}

.podcast1 {
	background: url('../images/podcast-commercial.jpg') no-repeat top left;
	margin: 0 0 5px 0;
	}
.podcast2 {
	background: url('../images/podcast-livelearning.jpg') no-repeat top left;
	margin: 0 0 5px 0;
	}
.podcast3 {
	background: url('../images/podcast-radiating.jpg') no-repeat top left;
	margin: 0 0 5px 0;
	}
.podcast4, .podcast5, .podcast6, .podcast7, .podcast8{
	background: url('../images/podcast1.jpg') no-repeat top left;
	margin: 0 5px 0 0;
	}

#videoContactUs { /* contact us image in the video spot*/
	background: url('../images/grohtv-contact-us.gif') no-repeat top left;
	width: 640px;
	height: 380px;
	margin: 0 15px 0 15px;
	float: left;
}

#videoText {
	/*background-color:#FFFF99;
	float: left; /* floats the box to the right of the video */
	width: 300px; /* keeps 10px from the edge of the contentVideo */
	height: 410px; /* keep the videoText the same height as the movie */
	overflow: auto;
	margin-top: 10px;
}

#videoTextSubscribe {
	/*background-color:#FFFF99;
	float: left; /* floats the box to the right of the video */
	width: 300px; /* keeps 10px from the edge of the contentVideo */
	height: 500px; /* keep the videoText the same height as the movie */
	overflow: auto;
	margin-top: 10px;
}
#videoTextHeaderLongSubscribe {
	float: left; /* floats the box to the right of the video */
	width: 268px; /* keeps 10px from the edge of the contentVideo */
	height: 500px; /* keep the videoText the same height as the movie */
	overflow: auto;
	padding-right: 10px;
}


#videoTextHeader {
	/*background-color:#FFFF99;*/
	float: left; /* floats the box to the right of the video */
	width: 270px; /* keeps 10px from the edge of the contentVideo */
	height: 200px; /* keep the videoText the same height as the movie */
	padding-right: 10px;
	overflow: auto;
}

#videoTextHeaderLong {
	float: left; /* floats the box to the right of the video */
	width: 268px; /* keeps 10px from the edge of the contentVideo */
	height: 400px; /* keep the videoText the same height as the movie */
	overflow: auto;
	padding-right: 10px;
}

#videoTextHeaderLong {
	float: left; /* floats the box to the right of the video */
	width: 268px; /* keeps 10px from the edge of the contentVideo */
	height: 400px; /* keep the videoText the same height as the movie */
	overflow: auto;
	padding-right: 10px;
}


#videoTextFooter {
	/*background-color:#663366;*/
	float:left;
	position: relative;
	/*top: 350px; /* should push this div 380 px from the top of the containing div called videoText*/
	/*left: 670px;*/
	margin-top: 20px;
	font-size: 12px;
	width: 280px;
	height: 142px;
	padding: 10px;
	background: url('../images/call-to-action.jpg') no-repeat top left;
}

#grohTV{
	float:left;
	clear: both;
	margin: -20px 0 0 15px;
	width: 950px;
}
.grohTV_indent{
	margin: 0 0 0 20px;
}

.grohTV_nowplaying{
	margin: 0 0 0 60px;
}

/* END----------------------content video control --------------------------- */


/* BEGIN----------------------footer control --------------------------- */

#footer {
	/*background-color:#CCCCCC;*/
	font-size: 10px;
	float: left;
	clear: both;
	width: 100%; /* stretches the bottom footer the width of the container*/
	margin: 15px;
}

/* END----------------------footer control --------------------------- */



/* BEGIN----------------------global navigation control --------------------------- */

#globalNav {
	text-align: center;
	margin: 10px 0 10px 0;
	height: 55px; width: 955px;
	}

ul#nav { /* fixes the issue where it is pushed away from the edge */
	margin: 0px; 
	padding: 0px;
	}

ul#nav li{
	display:block; /* makes horizontal versus vertical */
	float:left; /* makes blocks float next to each other*/
	list-style-type:none; /* removes bullets from list */
	}

/* navigation1 - global navigation control that sets the background image*/
ul li.nav a {
	display:block;
	background: transparent url('../images/globalnav.png') no-repeat 0 0; /* sets the navigation image as a background image*/
	text-indent: -9009px; /* pulls the text out of sight*/
	}
	
/* navigation1 */
ul li#nav1 a {
	width: 159px; /* width of the navigation1 */
	height: 33px; /* height of the navigation button */
	background-position: 0 0;
	}

ul li#nav1 a:hover {
	background-position: 0 -33px; /* makes the background image move down 33px which is where the over state is */
	}
	

/* navigation2 */
ul li#nav2 a {
	width: 160px; /* width of the navigation2 element */
	height: 33px; /* height of the navigation button */
	background-position: -159px 0; /* We also need to pull the background-image 159 pixels to the left, since that?s where the image for the second list item starts. */
	}

ul li#nav2 a:hover {
	background-position: -159px -33px; /* makes the background image move down 33px which is where the over state is */
	}
	
/* navigation3 */	
ul li#nav3 a {
	width: 158px;
	height: 33px; /* height of the navigation button */
	background-position: -319px 0;
	}

ul li#nav3 a:hover {
	background-position: -319px -33px;
	}

/* navigation4 */
ul li#nav4 a {
	width: 159px;
	height: 33px; /* height of the navigation button */
	background-position: -477px 0;
	}

ul li#nav4 a:hover {
	background-position: -477px -33px;
	}

/* navigation5 */
ul li#nav5 a {
	width: 159px;
	height: 33px; /* height of the navigation button */
	background-position: -636px 0;
	}

ul li#nav5 a:hover {
	background-position: -636px -33px;
	}

/* navigation6 */
ul li#nav6 a {
	width: 160px;
	height: 33px; /* height of the navigation button */
	background-position: -796px 0;
	}

ul li#nav6 a:hover {
	background-position: -796px -33px;
	}
/* END----------------------global navigation control --------------------------- */

/* START----------------------bottom THUMBS--------------------------- */

#thumb {
	/*background-color:#663366;*/
	position: relative;
	top: 0px;
	left: 0px;
	width: 180px;
	height: 125px;
	margin-left: 10px;
	padding: 10px;
}

.ideas1, .aboutGroh2 {
	background: url(../images/thumb-ideas1.gif) no-repeat top left;
}

.ideas2 {
	background: url(../images/thumb-ideas2.gif) no-repeat top left;
}

.ideas3, .aboutGroh3, .films1, .customers3 {
	background: url(../images/thumb-ideas3.gif) no-repeat top left;
}

.ideas4, .aboutGroh4, .films2, .customers4, .liveLearning1 {
	background: url(../images/thumb-ideas4.gif) no-repeat top left;
}

.customers1, .aboutGroh1, .liveLearning4 {
	background: url(../images/thumb-customers1.gif) no-repeat top left;
}

.customers2, .liveLearning2 {
	background: url(../images/thumb-customers2.gif) no-repeat top left;
}

.films3 {
	background: url(../images/thumb-customers1.gif) no-repeat top left;
}

.films4,.liveLearning3 {
	background: url(../images/thumb-films4.gif) no-repeat top left;
}






/* END----------------------bottom THUMBS --------------------------- */

/* BEGIN----------------------contentVideoNoMovie control--------------------------- */

#contentVideoNoMovie {
	float: left;
	margin: 0px 0 25px 0;
	padding: 38px 0 0 0;
	width: 975px;
	height: auto;
	overflow: auto;
	text-align: left;
	background: url('../images/mainback_01.jpg') no-repeat top left;
}

#contentVideoNoMoveFooter {
	width: 955px;
	height: 40px;
	float: left;
	clear: both;
	margin: 0 0 15px 0; /* sets bottom padding under movie picker */
	background: url('../images/mainback_02.jpg') no-repeat bottom left;
	}



/* END----------------------contentVideoNoMovie control--------------------------- */


/* BEGIN----------------------swap text--------------------------- */

#swapTextLinks {
	float: left;
	width: 500px;
	margin-left: 20px;
	}

#swapTextContent  {
	float: left;
	width: 410px;
	 }

a.book, a.speaker, a.rebelThought, a.product { /* "xx" class to the links*/
	float: left;
	margin: 0 20px 20px 0;
	 }
	 	 
a.filmsBox { /* "xx" class to the links*/
	float: left;
	margin: 0 20px 20px 0;
	 }
a.filmsBox p { 
	font-size: 10px;
	margin: 0; padding: 0;
	 }

/* END----------------------swap text--------------------------- */

/* BEGIN----------------------product page--------------------------- */

#products {
	float: left; /* floats the box to the right of the video */
	width: 935px; /* keeps 10px from the edge of the contentVideo */
	min-height: 410px; /* keep the videoText the same height as the movie */
	margin: 0 40px 0 10px;
	}

#products_main {
	float: left; /* floats the box to the right of the video */
	width: 935px; /* keeps 10px from the edge of the contentVideo */
	min-height: 410px; /* keep the videoText the same height as the movie */
	margin: 0 40px 0 10px;
	}
.products_main {
	margin: 0 60px 0 0;
	}

#product {
	float: left;
	width: 260px; 
	min-height: 410px; 
	margin-right: 50px;
}

ul.productsPage {
	margin: 0 0 0 20px; 
	padding: 0;
	}

/* END----------------------product page--------------------------- */

#player1 { width: 450px;}
#player2 { width: 450px;}