/*
  Pages_home.css
  Version: 1
  Author: M Baynger
  Description: Styles for home page channel selectors  
*/

div#bl_home_tab {
  position: relative;
  background: #FFF;
  top: 10px;  
  width: 1000px;  
}


/*  ---------------------------------- Preview Box styles  ------------------------------------------------- */

div#bl_preview_box_pos {
  position: absolute;
  top: 0px;
  right: 195px; 
  width: 385px;            	/* Not sure if we need this */
  background: #FFF;
}

div#bl_preview_box {
  position: absolute;
  top: 0px;
  width: 385px;
  height: 372px;  
}

div#bl_preview_box_hdr {
  position: absolute;
  background: #82C7DB;
  left: 0px;
  top: 0px;
  width: 385px;
  height: 36px;
}
				    
div#bl_preview_box_hdr_title {
  position: absolute;
  left: 17px;
  top: 0px;
  width: 367px;
  height: 28px;
  padding-top: 8px;
  border-left: 1px solid #5A919F;
  text-indent: 1em;
  font-size: 12px;
	font-family: Verdana;
	font-weight: bold;
	letter-spacing:.2em;	
}


/*
Formatting styles 
Important! Keep these styles in synch:
  pages_home.css for the Preview box
  pages_content_box.css for the main displays
  fck_textarea.css for the admin dialogs

 p  Normal
h1  Main Title
h2  Sub Title
h3  Intro
h4  Interview Q
h5  Interview A
h6  Quote
pre  Formatted
address  Address
div  Section

*/

/* Base style */
div#bl_preview_box_contents {
  position: absolute;
  left: 0px;
  top: 36px;
  width: 369px;
  height: 336px;
  border: 2px solid #5A919F;     
  overflow: auto;

  color: #444;
  background: #FFF;  
  padding: 6px;  
  font-size: 11px;
  text-align: left;
  font-family: Verdana;
  font-weight: normal;
  letter-spacing:.05em;    
  line-height: 1.5;
  margin-top: 1px;   
  margin-bottom: 1px;     

}


/* Main Title */
div#bl_preview_box_contents h1 {
  color: #444;
  background: #FFF;  
  font-size: 14px;
  text-align: left;
  font-weight: bold;
  margin-top: 2px; 
  margin-bottom: 4px; 
}

/* Sub title  */
div#bl_preview_box_contents h2 {
  color: #444;
  background: #FFF;  
  font-size: 12px;
  text-align: left;
  font-weight: bold;
  margin-top: 2px;   
  margin-bottom: 2px;   
}

/* Intro  */
div#bl_preview_box_contents h3 {
  color: #444;
  background: #FFF;  
  font-size: 11px;
  text-align: left;
  font-style: italic;
  font-weight: bold;
}

/* Interview Question   */
div#bl_preview_box_contents h4 {
  color: #5A949C;     /* Cho dark color */
  background: #FFF;  
  font-size: 11px;
  text-align: left;
  font-weight: bold;
}

/* Quote  */
div#bl_preview_box_contents h5 {
  color: #5A949C;
  background: #FFF;  
  font-size: 11px;
  text-align: left;
  font-family: Verdana;
  font-weight: normal;
}

/* Caption  */
div#bl_preview_box_contents h6 {
  color: #333;
  background: #FFF;  
  font-size: 11px;
  text-align: left;
  font-style: italic;
  font-weight: normal;
  letter-spacing:.05em;    
}

/* Normal */
div#bl_preview_box_contents p {
  color: #333;
  background: #FFF;  
  font-size: 11px;
  text-align: left;
  font-family: Verdana;
  font-weight: normal;
  letter-spacing:.05em;    
  margin-top: 1px;   
  margin-bottom: 1px;     
}

div#bl_preview_box_contents address {
  color: #444;
  background: #FFF;  
  font-style: normal;    
  font-weight: bold;  
  line-height: 1.3em;
  margin-left: 6px;   
  margin-top: 3px;   
  margin-bottom: 6px;     
  
}


/*  ---------------------------------- Selector styles  ------------------------------------------------- */

/*
Formatting styles 
Important! Keep these styles in synch:
  pages_home.css for the Preview box
  pages_content_box.css for the main displays
  fck_textarea.css for the admin dialogs

 p  Normal
h1  Main Title
h2  Sub Title
h3  Intro
h4  Interview Q
h5  Interview A
h6  Quote
pre  Formatted
address  Address
div  Section

*/

/* Base style */
.ch_selector_body
{
  cursor: pointer;
  position: absolute;
  left: 0px;
  top: 28px;
  padding-top: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  padding-left: 12px;
  width: 173px;
}

.ch_body {
  border-right: 2px solid #82C7DB;    /* light cho color */
  border-left: 2px solid #FFFFFF;    /* white (invisible) - used for control of spacing to avoid text jumping */
  border-bottom: 2px solid #FFFFFF;    /* white (invisible) - used for control of spacing to avoid text jumping */
  color: #666; /* #121D1F; */
  font-size: 10px;
}

.ch_body_selected {
  border-right: 2px solid #5A949C;    /* dark cho color */
  border-left: 2px solid #5A949C;    /* dark cho color */
  border-bottom: 2px solid #5A949C;    /* dark cho color */
  color: #222;
}

#ch_selector_body_item
{
  background: #FFF;  
  font-size: 10px;

  font-family: Verdana;
  font-weight: normal;
  letter-spacing:.01em;  
  margin: 0px;   
}

/* Main Title */
#ch_selector_body_item h1 {
  color: #444;
  font-size: 10px;
  text-align: left;
  font-weight: bold;
  margin-top: 0px; 
  margin-bottom: 0px; 
}

/* Sub title  */
#ch_selector_body_item h2 {
  color: #444;
  font-size: 10px;
  text-align: left;
  font-weight: bold;
  margin-top: 0px;   
  margin-bottom: 0px;   
}

/* Intro  */
#ch_selector_body_item h3 {
  color: #444;
  font-size: 10px;  
  text-align: left;
  font-style: italic;
  font-weight: bold;
  margin-top: 0px; 
  margin-bottom: 0px;   
}

/* Interview Question   */
#ch_selector_body_item h4 {
  color: #5A949C;     /* Cho dark color */
  font-size: 10px;  
  text-align: left;
  font-weight: bold;
  margin-top: 0px; 
  margin-bottom: 0px;   
}

/* Quote  */
#ch_selector_body_item h5 {
  color: #5A949C;
  font-size: 10px;  
  text-align: left;
  font-weight: normal;
  margin-top: 0px; 
  margin-bottom: 0px;   
}

/* Caption  */
#ch_selector_body_item h6 {
  color: #333;
  font-size: 10px;  
  text-align: left;
  font-style: italic;
  font-weight: normal;
  letter-spacing:.05em;    
  margin-top: 0px; 
  margin-bottom: 0px;   
}

/* Normal */
#ch_selector_body_item p {
  color: #333;
  font-size: 10px;  
  text-align: left;
  font-weight: normal;
  letter-spacing:.05em;    
  margin-top: 0px; 
  margin-bottom: 0px;   
}

#ch_selector_body_item address {
  color: #444;
  font-size: 10px;  
  font-style: normal;    
  font-weight: bold;  
  line-height: 1.3em; 
  margin-top: 0px; 
  margin-bottom: 0px; 
}

/* this style is no longer used.
.ch_selector_highlight {
  background: #EEEEFF;
}
*/

.ch_selector_normal {
  background: #FFFFFF;
}

.clickable{
  cursor: pointer;       
}


.ch_frame {
  border-top: 2px solid #82C7DB;    /* light cho color */
  border-right: 2px solid #82C7DB;    /* light cho color */
}

.ch_frame_selected {
  border-top: 2px solid #5A949C;    /* dark cho color */
  border-right: 2px solid #5A949C;    /* dark cho color */
}

.ch_selector_title_selected
{
  position: absolute;
  left: 0px;
  top: 7px;
  height: 18px;  
  padding-top: 3px;  
  background: #82C7DB;
  color: #121D1F;
  text-indent: 15px;
  font-size: 12px;
  font-family: Verdana;
  font-weight: bold;
  letter-spacing:.01em;  
}

.ch_selector_title
{
  position: absolute;
  left: 0px;         /* diff (was 100px) */
  top: 7px;
  height: 18px;  
  padding-top: 3px;  
  background: #FEFEFE;
  color: #666666;
  text-indent: 15px;
  font-size: 12px;
  font-family: Verdana;
  font-weight: bold;
  letter-spacing:.01em;  
}

.ch_selector_title_pos {
  position: absolute;
  left: 0px;
  width: 184px;    
}

.ch_selector_chip_pos {     /* get rid of this  */
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
}


/* the colchip styles use a lot of redundant settings but they are required to dynamically set each channel selector's colour */
.ch_selector_chip_col_home {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #564ECF;  
  color: #FFFFFF;
}

.ch_selector_chip_col_features {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #33CC33;  
  color: #121D1F;
}

.ch_selector_chip_col_events {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #DF383B;
  color: #121D1F;
}

.ch_selector_chip_col_picks {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #EFD410;
  color: #121D1F;
}

.ch_selector_chip_col_artwindow {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #CF4EB6;
  color: #121D1F;
}

.ch_selector_chip_col_shop {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #FF8630;
  color: #121D1F;
}

.ch_selector_chip_col_about {
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
  background: #6086BF;
  color: #121D1F;
}


div#ch_selector_chip_ch1{
  position: absolute;
  height: 21px;  
  top: 7px;
  left: 0px;
  width: 10px;    
}


/* Unique color settings for header areas  */

.preview_col_home {
  background: #564ECF;  
  color: #FFFFFF;
}

.preview_col_features {
  background: #33CC33;  
  color: #121D1F;
}

.preview_col_events {
  background: #DF383B;
  color: #121D1F;
}

.preview_col_picks {
  background: #EFD410;
  color: #121D1F;
}

.preview_col_artwindow {
  background: #CF4EB6;
  color: #121D1F;
}

.preview_col_shop {
  background: #75AF58;
  color: #121D1F;
}

.preview_col_about {
  background: #545BDF;
  color: #121D1F;
}



div#ch_selector_frame_ch1 {
  position: absolute;
  background: #FFF;
  left: 0px;
  top: 0px;
  width: 193px;
  height: 28px;               /* 115px;  */
}

div#ch_selector_body_ch1 {
  height: 85px;       /*  77px;    ch1 height - 38 */
}

div#ch_selector_frame_ch2 {
  position: absolute;
  background: #FFF;
  left: 208px;
  top: 0px;
  width: 193px;
  height: 28px;           /* 128px;  */
}

div#ch_selector_body_ch2 {
  height: 90px;       /* ch2 height - 38 */  
}


div#ch_selector_frame_ch3 {
  position: absolute;
  background: #FFF;
  left: 0px;
  top: 130px;
  width: 193px;
  height: 115px;  
}

div#ch_selector_body_ch3 {
  height: 94px;       /* 77px;   ch3 height - 38 */  
}

div#ch_selector_frame_ch4 {
  position: absolute;
  background: #FFF;
  left: 208px;
  top: 144px;
  width: 193px;
  height: 112px;  
}

div#ch_selector_body_ch4 {
  height: 84px;       /* 74px;   ch4 height - 38 */  
}

div#ch_selector_frame_ch5 {
  position: absolute;
  background: #FFF;
  left: 0px;
  top: 269px;
  width: 193px;
  height: 122px;  
}

div#ch_selector_body_ch5 {
  height: 100px;       /* 84px; ch5 height - 38 */  
}

div#ch_selector_frame_ch6 {
  position: absolute;
  background: #FFF;
  left: 208px;
  top: 278px;
  width: 193px;
  height: 102px;  
}

div#ch_selector_body_ch6 {
  height: 90px;       /* 64px;  ch6 height - 38 */  
}

div#ch_selector_frame_ch7 {
  position: absolute;
  background: #FFF;
  left: 0px;
  top: 392px;
  width: 193px;
  height: 231px;  
}

div#ch_selector_body_ch7 {
  height: 223px;       /* ch7 height - 38 */  
}