/* 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 */
	}
	
body.larger-text {
	font-size: 13.5px;
	}
		
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;*/
	color: #b16706;
	}

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: 800px;
	overflow: auto; /*was set to "none"*/
	text-align: left;
	margin-left: 160px;
}
#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;
}

#video-peterguber {
	width: 525px;
	height: 380px;
	margin: 0 15px 0 15px;
	float: left;
}
#videoText-peterguber {
	width: 400px; /* keeps 10px from the edge of the contentVideo */
	height: 410px; /* keep the videoText the same height as the movie */
	overflow: auto;
	margin-top: 10px;
}
#videoTextHeaderLong-peterguber {
	float: left; /* floats the box to the right of the video */
	width: 375px; /* keeps 10px from the edge of the contentVideo */
	height: 400px; /* keep the videoText the same height as the movie */
	overflow: auto;
	padding-right: 10px;
}



#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 15px -15px;
	height: 25px; width: 955px; /* height was 55px - was no padding was margin: 10/0/10/-15 */
	padding-top: 20px;
	}

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;
	}
	
.store-item { 
	position: relative;
	float: left;
	width: 170px; 
	height: 300px;
	}
.store-item h3, .store-item h4 {
	text-align: center;
}

.store-header {
	width: 680px; height: 29px;
	margin-bottom: 15px;
	margin-top: 10px;
	background: URL('http://www.GrohTV.com/store/images/section-back-orange.jpg') no-repeat top center;
	position:relative;
	float: left;
	clear: both;
	}
.store-header h3, .store-header h4 {
	padding-top: 5px;
	padding-left: 5px;
	color:#666666;

}

.store-header-short {
	width: 224px; height: 29px;
	margin-bottom: 15px;
	margin-top: 10px;
	background: URL('http://www.GrohTV.com/store/images/section-back-short.jpg') no-repeat top center;
	position:relative;
	float: left;
	clear: both;
	}
.store-header-short h3, .store-header-short h4 {
	padding-top: 5px;
	padding-left: 5px;
	color:#666666;
}

#store-top-sales {
	width: 100%;
	background-color: black;
}
#store-top-sales p {
	color: white;
}

#purchase-buttons {
	text-align: center;
	border-color: #666666;
	border-width: 1px;
	border-style: solid;
	padding: 5px;
	width: 200px;
	float: right;
}

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

#player1 { width: 450px; margin: 0 auto;}
#player2 { width: 450px; margin: 0 auto;}

.groh-smallcaps {font-size: .8em;}

.addthis_toolbox {
	position: relative;
	float: right;
	margin-right: 50px;
	margin-top: -35px;
}

#store-button {
	position: absolute;
	margin-top: 45px;
	margin-left: 20px;
}

.dvd-set {
	position: absolute; 
	top: 310px;
	left: 155px;
	z-index: 10;
	border:2px solid #000000;
}

.grohtv-watermark { background: URL('/images/grohtv-watermark.gif') top center; }

#top-button-peterguber {
	position: absolute;
	margin-top: 45px;
	margin-left: 1px;
}

.mediakit-item { 
	position: relative;
	float: left;
	display: block;
	width: 220px; 
	}
.mediakit-item h3{
	text-align: center;
}

#home-box p, .home-large p, .home-small p { color:#FFF; font-size: 15px;}
#home-box h1, .home-large h1, .home-small h1 { font-size: 14px; font-weight: normal; color:#666;}

.tdback-gray { background:#d6d6d6 URL('../images/read-more.gif') no-repeat bottom right;}
.tdback-yellow { background:#ffd479 URL('../images/read-more.gif') no-repeat bottom right;}
.tdback-orange { background:#ff8b00 URL('../images/read-more.gif') no-repeat bottom right;}

#globalNav h1 { position: absolute; font-size: 13px; left: 170px; top: 60px;}

.home-large { background:#c0c0c0 URL('../images/read-more.gif') no-repeat bottom right; position: relative; float: left; height: 380px; width: 490px; padding: 10px; margin: 5px;}

.home-small { background:#fdce6a URL('../images/read-more.gif') no-repeat bottom right; position: relative; float: left; height: 175px; width: 175px; padding: 10px; margin: 5px;}

.home-small-orange { background:#ff8b00 URL('../images/read-more.gif') no-repeat bottom right; }

a.home-link:link, a.home-link:hover, a.home-link:visited, a.home-link:active  { color:#7D7D7D; text-decoration: none;  }