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

* {
	margin: 0;
	padding: 0;
	position: relative;
}

html {
	background: #FFF;
}

body {
	position: relative;
	text-align: center;
	background: #FDFDFD url(../images/index_bg_2.jpg)  no-repeat scroll center top;
	
	
	width: 100%;
	display: table;
}

.clear_float {
	line-height: normal;
}


.gnb {
	width: 980px;
	position: relative;
	height: 33px;
	list-style-type: none;
	margin-top: -1px;
	
}

#marquee {
	position: absolute;
	top: 105px;
	left: 120px;
	width: 600px;
	text-align: center;
	font: bold 30px Arial, Helvetica, sans-serif;
}

.index_gnb_home, .index_gnb_faq, .index_gnb_about, .index_gnb_lesson_library, .index_gnb_chord_library, .index_gnb_forum {text-indent: -9999px; }

.index_gnb_home{ width: 80px; height: 33px; background: url(../images/index_gnb_home.png) top no-repeat; overflow: hidden; border: 0;}
.index_gnb_faq{ width: 75px; height: 33px; background:url(../images/index_gnb_faqs.png) top no-repeat; overflow: hidden; border:0;}
.index_gnb_about{ width: 104px; height: 33px; background:url(../images/index_gnb_about_us.png) top no-repeat; overflow: hidden; border:0;}
.index_gnb_lesson_library{ width: 139px; height: 33px; background:url(../images/index_gnb_lesson_library.png) top no-repeat; overflow: hidden; border:0;}
.index_gnb_chord_library{width: 124px; height: 33px; background:url(../images/index_gnb_chord_library_coming_soon.png) top no-repeat; overflow: hidden; border:0;}
.index_gnb_forum{ width: 82px; height: 33px; background:url(../images/index_gnb_forum.png) top no-repeat; overflow: hidden; border:0;}
.index_gnb_search {width: 376px; height: 33px; background:url(../images/index_gnb_search.png) top no-repeat; overflow: hidden; border:0;}

.index_gnb_home:hover { width: 80px; height: 33px; background: url(../images/index_gnb_home.png) bottom no-repeat; overflow: hidden; border: 0;}
.index_gnb_faq:hover { width: 75px; height: 33px; background:url(../images/index_gnb_faqs.png) bottom no-repeat; overflow: hidden; border:0;}
.index_gnb_about:hover { width: 104px; height: 33px; background:url(../images/index_gnb_about_us.png) bottom no-repeat; overflow: hidden; border:0;}
.index_gnb_lesson_library:hover { width: 139px; height: 33px; background:url(../images/index_gnb_lesson_library.png) bottom no-repeat; overflow: hidden; border:0;}
.index_gnb_chord_library:hover {width: 124px; height: 33px; background:url(../images/index_gnb_chord_library_coming_soon.png) bottom no-repeat; overflow: hidden; border:0;}
.index_gnb_forum:hover { width: 82px; height: 33px; background:url(../images/index_gnb_forum.png) bottom no-repeat; overflow: hidden; border:0;}

.index_gnb_search .search_box {
	position: absolute;
	width: 170px;
	left: 153px;
	top: 5px;
	height: 17px;
	font: normal 16px Arial, Helvetica, sans-serif;
	color: #333;
}

.index_gnb_search .search_go {
	position: absolute;
	left: 340px;
	top: 6px;
	
}

#top {
	position: relative;
	width: 980px;
	height: 515px;
}

#bottom {
	width: 1000px;
	border: none;
	top: -20px;
}

#index_set_list {
	position: absolute;
	margin-left: 655px;
	margin-top: 3px;
}

#index_not_member {
	position: absolute;
	width: 257px;
	height: 43px;
	margin-top: 3px;
	margin-left: 727px;
}

#index_not_member a {
	display: block;
	width: 257px;
	height: 43px;
	background: url(../images/index_not_member_bg.png) no-repeat;
	text-indent: -9999px;
}

#index_quick_start_btn {
	width: 150px;
	height: 20px;
	position: absolute;
	top: 240px;
	left: 280px;	
}

#index_free_stuff_btn {
	width: 150px;
	height: 20px;
	position:absolute;
	top: 240px;
	left: 390px;
}


#top h3 {
	position: absolute;
	margin-left: 240px;
	margin-top: 180px;
	font: italic bold 24px Arial, Helvetica, sans-serif;
	color: #FFF;
}

#posters {
	width: 480px;
	position: absolute;
	height: 134px;
	list-style-type: none;
	margin-left: 240px;
	margin-top: 260px;
	
}

#posters li {
	float: left;
	text-indent: -9999px;
	margin: 0 2px;
}

#posters li a {
	text-decoration: none;
	display: block;
}

#rock a { width: 114px; height: 134px; background: url(../images/poster_rock.jpg) no-repeat; border: 0;}
#country a { width: 114px; height: 134px; background:url(../images/poster_country.jpg) no-repeat; border:0;}
#rnb a { width: 114px; height: 134px;  background:url(../images/poster_rnb.jpg) no-repeat; border:0;}
#technique a { width: 114px; height: 134px; background:url(../images/poster_tech.jpg) no-repeat; border:0;}

#index_lesson_lib {
	position: absolute;
	width: 109px;
	height: 233px;
	top: 217px;
	left: 0px;
}

#index_quick_start {
	position: absolute;
	width: 96px;
	height: 180px;
	top: 265px;
	left: 125px;
}

#index_video_element_holder {
	position: absolute;
	width: 240px;
	height: 180px;
	background-color: #FFF;
	border: 1px solid #000;
	left: 737px;
	top: 253px;
}



#index_login {
	position: absolute;
	width: 240px;
	height: 130px;
	margin-left: 715px;
	margin-top: 85px;
	background: none;
}

.login {
	position: absolute;
	width: 344px;
	height: 121px;
	margin-left: 635px;
	margin-top: 5px;
	background: url(../images/login_bg.png) no-repeat;
}

.member_login {
	position: absolute;
	width: 108px;
	height: 16px;
	background: url(../images/member_login_title.png) no-repeat;
	text-indent: -9999px;
	margin-left: 81px;
	margin-top: 5px;
}

.login_label {
	float: right;
	margin-top: 5px;
	margin-right: 5px;
}

.login_box {
	float: right;
	width: 150px;
	margin: 2px 5px;
}

.login_form {
	margin-top: 22px;
	width: 240px;
}


.remember_box {
	margin: 0;
	padding: 0;
	float: right;
	height: 12px;
	margin-top: 3px;
}

.remember_label {
	float: right;
	margin-right: 15px;
	margin-left: 5px;
	margin-top: 4px;
	
}

.member_submit {
	float: right;
	margin-top: 3px;
	margin-right: 2px;
	width: 49px; 
	height: 18px;
}

.forgot, .forgot a {
	color: #FFF;
	left: 32px;
}

#eden {
	margin-bottom: 10px;
}

#index_logout_buttons {
	margin-top: 0px;
	height: 20px;
	width: 110px;
	margin-left: 90px;
}

#index_logout ul {
	margin-top: 2px;
	margin-bottom: 5px;
}
/*-----------------working logout element-----------------*/
.is_member {
	background: none;
}

#index_logout {
	position: absolute;
	width: 240px;
	height: 130px;
	margin-left: 755px;
	margin-top: 90px;
	background: none;
}

#index_logout .logout_help {
	margin-left: 90px;
}
/*-------------content----------------*/

#index_left {
	float: left;
	width: 140px; /* Jonathan@BePresents.com changed this from  100px; */
	text-align:center;
	left: -5px;
}

#index_right {
	float: right;
	width: 850px;
	text-align: center;
	right: 10px;
}

#instructor_bar {
	height: 642px;
}

#right_top {
	width: 850px;
	height: 417px;
	background: url(../images/right_top_bg.png) no-repeat;
	margin: 5px auto 3px auto;
	text-align: left;
}

#right_top h2 {
	position: absolute;
	width: 302px;
	height: 80px;
	background: url(../images/welcome_h2.png) no-repeat;
	left: 15px; 
	top: 5px;
	text-indent:-9999px; 
}

#right_top h3 {
	font: bold 20px Arial, Helvetica, sans-serif;
	color: #3c3c3c;
	top: 105px;
	left: 30px;
}

#index_main_content_p {
	width: 500px;
	top: 210px;
	left: 30px;
	text-align: left;
	font: normal 15px Arial, Helvetica, sans-serif;
}

#right_top ul {
	position: absolute;
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #3c3c3c;
	left: 60px;
	top: 130px;
	width: 470px;
}

#right_top ul li {
	margin: 3px 0;
}

#right_top_link {
	position: absolute;
	top: 370px;
	margin-left: 80px;
	width: 720px;
}

#right_top_link a{
	font: bold 24px Arial, Helvetica, sans-serif;
}

#right_bottom {
	width: 827px;
	padding-bottom: 0px;
	
}

#right_bottom_shadow {
	left: 3px;
	top: 3px;
}

#right_bottom_parent_ul {
	list-style-type: none;
	width: 825px;
	/*height: 510px;*/
}

.index_song_category {
	float: left;
	width: 33.3%;
	font: bold 18px Arial, Helvetica, sans-serif;
	color: #174a75;
}

.index_song_category ul {
	list-style-type: none;
	padding-top: 5px;
	padding-bottom: 7px;
}

.index_song_category ul li h4{
	height: 45px;
}

.middle_ul {
	background-color: #F5F5F5;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

#right_bottom img {
	margin: 5px 0;
	border: none;
}

#instructor_bar ul {
	list-style-type: none;
	width: 106px;
	margin: 0 auto;
	margin-top: 5px;
}

#instructor_bar ul li {
	width: 106px; 
	height: 100px;
}

#instructor_bar ul li a {
	display: block;
	padding-top: 1px;
	height: 100px;
	text-indent: -9999px;
}

#instructor_bar h4 {
	font-size: 18px;
}
#david {background: url(../images/david_bg.png) no-repeat;}
#jen {background: url(../images/jen_bg.png) no-repeat;}
#julian {background: url(../images/julian_bg.png) no-repeat;}
#peter {background: url(../images/peter_bg.png) no-repeat;}
#rob {background: url(../images/rob_bg.png) no-repeat;}
#steve {background: url(../images/steve_bg.png) no-repeat;}

#top_index_box {
	text-align: center;
	width: 263px;
	height: 172px;
	position: absolute;
	top: 15px;
	right: 20px;
}

.index_box img {
	margin: 0; 
	padding: 0;
	border: none;
}



#bottom_index_box {
	width: 263px;
	height: 275px;
	position: absolute;
	top: 158px;
	right: 20px;
	text-align: center;	
}

/*----------------------background stuff--------------------------*/
.header_bar {
	background: url(../images/design_package/lesson_header_bar_bg.jpg) top left repeat-x;
	/*padding-top: 46px !important;*/
}



.drop_shadow {
	background: url(../images/design_package/shadowAlpha.png) no-repeat bottom right !important;
	background: url(../images/design_package/shadow.gif) no-repeat bottom right;
	
	margin-top: 10px !important;
	margin-left: 10px !important;
	margin-top: 10px;
	margin-left: 5px;
}

.drop_shadow .wrapper {
	display: block;
	position: relative;
	background-color: #fff;
	border: 1px solid #000;
	margin: -6px 6px 6px -6px;
	padding: 7px;
	padding-top: 6px;
}


.drop_shadow .image_wrapper {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #cccccc;
  margin: -6px 6px 6px -6px;
  padding: 7px;
  }


.generic_wrapper {
	display: block;
	position: relative;
	margin: -6px 6px 6px -6px;
}


.header_h2 {
	/*margin-top:-27px;*/
	text-align:center;
	width:100%;
	height: 32px;
	color: #006699;
	font: bold 24px Arial, Helvetica, sans-serif;
}

#featured_lessons_h2 {
	width: 100%;
	text-indent: -9999px;
	background: url(../images/page_headers/featured-lessons.png) top center no-repeat;
}

#recently_added_h2 {
	width: 100%;
	text-indent: -9999px;
	background: url(../images/page_headers/recently-added.png) top center no-repeat;
}

#most_popular_h2 {
	width: 100%;
	text-indent: -9999px;
	background: url(../images/page_headers/most-popular.png) top center no-repeat;
}

/*slider stuff*/

#slider {
    width: 840px;
    border: none;
    position: relative;
	text-align: left;
}

.scroll {
    height: 181px;
    width: 840px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
	border: 1px solid #313131;
    
}

.scrollContainer div.panel {
    height: 182px;
    width: 840px;
}



ul.slider_buttons {
	position: absolute;
	top: 4px;
	margin: 0;
    list-style: none;
    padding: 0;
   	height: 27px;
	margin-left:2px;
}

ul.slider_buttons li {
    display: inline;
	width: 275px;
	float: left;
	border: 1px solid #313131;
	margin-left: 2px;
}

ul.slider_buttons a {
    text-decoration: none;
	text-indent: -9999px;
	display: block;
	width: 275px;
	height: 27px;
}

#charts_li a {background: url(../images/feature_header_bar_sprite.jpg) 0px 0px no-repeat;}
#diagrams_li a {background: url(../images/feature_header_bar_sprite.jpg) -275px 0px no-repeat;}
#patterns_li a {background: url(../images/feature_header_bar_sprite.jpg) -550px 0px no-repeat;}

#charts_li a:hover, #charts_li a.selected {background: url(../images/feature_header_bar_sprite.jpg) 0px -29px no-repeat;}
#diagrams_li a:hover, #diagrams_li a.selected {background: url(../images/feature_header_bar_sprite.jpg) -275px -29px no-repeat;}
#patterns_li a:hover, #patterns_li a.selected {background: url(../images/feature_header_bar_sprite.jpg) -550px -29px no-repeat;}




ul.slider_buttons a:focus {
    outline: none;
	cursor: pointer;
}
/*
.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -20px;
}

.scrollButtons.right {
    right: -20px;
}
*/
.hide {
    display: none;
}


.panel p {
	position: absolute;
	top: 75px;
	left: 45px;
	font: normal 15.5px Arial, Helvetica, sans-serif;
	color: #333333;
	width: 375px;
	height: 85px;
	line-height: 18px;
	text-align: left;
}