/******************************************************
 * General statements *
******************************************************/ 

html { overflow-y: scroll; }
body {
  text-align: center;
  background: url(../images/bg.png); 
}
.clear { clear: both; }


/******************************************************
 * Structure *
******************************************************/ 

#wrapper {
  width: 941px;
  margin: 0 auto;
  text-align: left;
}

#header {
  float: left;
  width: 941px;
  height: 116px;
  padding: 20px 0 0; 
}

#accordion {
  float: left;
  width: 941px;
  display: none;
}

#footer {
  float: left;
  width: 941px;
  height: 50px;
  padding: 9px 0 34px;
  margin-top: 51px;
  background: url(../images/footer.png) no-repeat; 
}


/******************************************************
 * Header *
******************************************************/ 

h1 { float: left; }
h1 a { 
  float: left;
  width: 185px;
  height: 87px;
  background: url(../images/logo.png) no-repeat;
  text-indent: -9999px;  
}

a#the_blog {
  float: right;
  margin: 64px 0 0;
  text-indent: -9999px;
  background: url(../images/the_blog.png) no-repeat;
  width: 83px;
  height: 23px;  
}
a#the_blog:hover { background-position: 0 -23px; }


/******************************************************
 * Accordion styles *
******************************************************/ 

.container { width:100%; }
.container ul{
	list-style-type: none;
	margin: 0;
	padding:0;	
}
.container li {
	display: inline;
	margin: 0px;
	padding:0px;
}
.contentContainer {
	padding-left: 0px;	
	float: left;
	position: relative;
	width: 0px;	
  min-height: 375px;
  height: auto !important;
  height: 375px;	
	overflow:hidden;
}
.contentInnerWrapper {
  float: left;
  width: 774px;
  padding: 0 1px;
    
}

.handle {
	float: left;
	width: 32px; /* cambiar a 32 */
	height: 375px; 
	background: url(../images/accordion_tabs.png) no-repeat; 
	text-indent: -9999px;
  margin-right: 1px; 
  cursor: pointer;
}
#accordionHandle0 { background-position: 0 0; }
#accordionHandle1 { background-position: -32px 0; }
#accordionHandle2 { background-position: -64px 0; }
#accordionHandle3 { background-position: -96px 0; }
#accordionHandle4 { background-position: -128px 0; margin-right: 0; }

#accordionHandle0.handleOver { background-position: 0 -375px; }
#accordionHandle1.handleOver { background-position: -32px -375px; }
#accordionHandle2.handleOver { background-position: -64px -375px; }
#accordionHandle3.handleOver { background-position: -96px -375px; }
#accordionHandle4.handleOver { background-position: -128px -375px; margin-right: 0; }



/******************************************************
 * Footer *
******************************************************/ 

#footer p, #footer p a {
  color: #434443;
  font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-align: center;
}


/******************************************************
 * Backgrounds *
******************************************************/ 

#bg_positioner {
  position: absolute;
  height: 576px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -3;
  overflow: hidden;
}
#bg_container {
  float: left;
  height: 576px;
}
.each_bg {
  float: left; 
  height: 576px;
  text-align: center;
}
.each_bg_wrapper {
  width: 941px;
  padding: 0 63px;
  height: 576px;
  margin: 0 auto;
}

#bg1 { background: url(../images/bg_1.png) right bottom no-repeat; }
#bg2 { background: url(../images/bg_2.png) right bottom no-repeat; }
#bg3 { background: url(../images/bg_3.png) right bottom no-repeat; }
#bg4 { background: url(../images/bg_4.png) right bottom no-repeat; }
#bg5 { background: url(../images/bg_5.png) right bottom no-repeat; }


/******************************************************
 * Section 1 - Home *
******************************************************/ 

#home_loop {
  float: left;
  height: 375px;
  position: relative;
}
#loop_img {
  position: absolute;
  top: 0;
  left: 0;
}


/******************************************************
 * Section 2 - The Call *
******************************************************/ 

#the_call {
  float: left;
  width: 712px;
  margin: 0 1px;
  padding: 30px;
  background: #00657d;
}

#the_call p {
  font: 13px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #fffefe;
  font-style: italic;
  padding-bottom: 15px;
}

#the_call img.img_right {
  float: right;
  margin: 0 0 30px 30px;
}
#the_call img.img_left {
  float: left;
  margin: 0 30px 30px 0;
}


/******************************************************
 * Section 3 - The Work *
******************************************************/ 

/* Diagonal Menu */

.diag_menu {
  position: absolute;
  z-index: 10;
  width: 106px;
  height: 110px;
  top: 6px;
  right: 0;
  background: url(../images/work_subnav.png) no-repeat; 
}
.port_active { background-position: 0 0; }
.music_active { background-position: 0 -110px; } 
.hover_port, .hover_music { background-position: 0 -220px; }

.diag_menu a {
  float: left;
  display: block;
  width: 106px;
  text-indent: -9999px;
  height: 55px;
}

a#the_music_link { margin-top: 55px; }

.port_active a#the_portfolio_link, .hover_music a#the_portfolio_link { display:none; }
.music_active a#the_music_link, .hover_port a#the_music_link { display:none; }


/* NOTE: This shares some styles from section 5 - The Clients */

#the_work {
  float: left;
  width: 772px;
  height: 375px;
  background: #474382;
}
#the_work ul, #the_clients ul {
  float: left;
  width: 772px;
  height: 375px;
}
/*#the_music { display: none; }*/

#the_work ul li, #the_clients ul li {
  float: left;
  width: 342px;
  height: 143px;
  padding: 30px 0 0 29px;
}

#the_work ul li .square, #the_clients ul li .square { 
  position: absolute;
  z-index: 5;
  width: 342px;
  height: 143px;
  cursor: pointer;
}
#the_work ul li .square .cont, #the_clients ul li .square .cont {
  float: left;
  width: 342px;
  height: 143px;
}
#the_work ul li a, #the_clients ul li a {
  float: left;
  width: 342px;
  height: 143px;
  text-indent: -9999px; 
}

#port_prod_off { background: url(../images/port_prod.jpg) no-repeat; }
#port_pres_off { background: url(../images/port_pres.jpg) no-repeat; }
#port_prin_off { background: url(../images/port_prin.jpg) no-repeat; }
#port_phot_off { background: url(../images/port_phot.jpg) no-repeat; }

#music_choral_off { background: url(../images/music_choral.jpg) no-repeat; }
#music_praise_off { background: url(../images/music_praise.jpg) no-repeat; }
#music_other_off { background: url(../images/music_other.jpg) no-repeat; }

#client_music_off { background: url(../images/client_music.jpg) no-repeat; }
#client_churches_off { background: url(../images/client_churches.jpg) no-repeat; }
#client_educ_off { background: url(../images/client_educ.jpg) no-repeat; }
#client_organiz_off { background: url(../images/client_organiz.jpg) no-repeat; }

/*#music_choral_off.active { background: url(../images/music_choral_active.jpg) no-repeat; }
#music_praise_off.active { background: url(../images/music_praise_active.jpg) no-repeat; }
#music_other_off.active { background: url(../images/music_other_active.jpg) no-repeat; }*/


.pop {
  position: absolute;
  width: 0;
  height: 0;
  background: url(../images/bg.png);
  overflow: hidden;
  z-index: 50;
}
.pop .popup_img {
  float: right;
  position: relative;
}

.pop span.gradient {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 20px;
  height: 315px;
  background: url(../images/popup_gradient.png) no-repeat; 
}
.pop span.frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 713px;
  height: 316px;
  background: url(../images/popup_frame.png) no-repeat; 
}

#the_work .pop ul.pop_menu, #the_clients .pop ul.pop_menu { 
  float: left;
  position: relative;
  z-index: 3;
  padding: 13px 0 0; 
  height: auto;
}

#the_work ul.pop_menu li, #the_clients ul.pop_menu li {
  padding: 0;
  height: 24px;
  display: block;
  float: none;
  font: 14px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #fff;
  padding-left: 19px;
  width: auto;
}
#the_work ul.pop_menu li.odd, #the_clients ul.pop_menu li.odd { background: #000; } 
#the_work ul.pop_menu li span, #the_clients ul.pop_menu li span { color: #434443; }

#the_work ul.pop_menu li a, #the_clients ul.pop_menu li a {
  float: none;
  height: auto;
  text-indent: 0;
  width: auto;
  font: 14px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
}
#the_work ul.pop_menu li a:hover, #the_clients ul.pop_menu li a:hover { text-decoration: underline; }

#the_work ul li a.close, #the_clients ul li a.close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 35px;
  height: 33px;
  text-indent: -9999px;
  background: url(../images/popup_close.png) no-repeat;
  z-index: 40;
}

#productions_pop { top: 101px; left: 200px; }
#photography_pop { top: 274px; left: 571px; }

#music_pop { top: 101px; left: 200px; }
#churches_pop { top: 101px; left: 571px; }
#educ_pop { top: 274px; left: 200px; }
#organiz_pop { top: 274px; left: 571px; }


/******************************************************
 * Section 4 - The Response *
******************************************************/ 

#the_response {
  float: left;
  width: 714px;
  height: 346px;
  padding: 29px 28px 0 30px;
  background: #5a2353;
}

.author {
  float: left;
  padding: 7px 0 0 22px;
}

.author p {
  text-align: left;
  font: bold 11px/12px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #ad91a9;
}

/* NOTE: For further details on styling, check Section 3 - The Work before on this file. */


/******************************************************
 * Section 5 - The Clients *
******************************************************/

#the_clients {
  float: left;
  position: relative;
  width: 772px;
  height: 375px;
  background: #22522a;
}

/* NOTE: For further details on styling, check scrollable.css */



/************************************************************************************************/
/************************************************************************************************/



/******************************************************
 * Subsections *
******************************************************/

.subs_list_bot {
  float: left;
  width: 941px;
  padding: 0 0 29px;
  background: url(../images/subs_list_bg_bot.png) left bottom no-repeat; 
}
.subs_list_top {
  float: left;
  width: 941px;
  padding: 24px 0 0;
  background: url(../images/subs_list_bg_top.png) no-repeat; 
}
.subs_list_top ul { float: left; }
.subs_list_top ul.left { width: 494px; background: url(../images/subs_list_bg.png) repeat-y; }
.subs_list_top ul.right { width: 447px; background: url(../images/subs_list_bg.png) right top repeat-y; }

.subs_list_top ul li {
  float: left;
  padding-left: 32px;
  height: 27px;
  font: 13px/27px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #fff;
}
.subs_list_top ul li span { color: #434443; }

.subs_list_top ul.left li { width: 462px; }
.subs_list_top ul.right li { width: 415px; }

.subs_list_top ul li.odd { line-height: 22px; height: 22px; }
.subs_list_top ul.left li.odd { background: url(../images/subs_list_li.png) repeat-y; }
.subs_list_top ul.right li.odd { background: url(../images/subs_list_li.png) right top repeat-y; }

iframe { display: none; } /* Generated by script for popup over select boxes on IE6, not necessary */