/**************************************************************************
**                             ccw2a_main.css                            **
**                                                                       **
** This is the CSS for the main layout of the Colonel Crush web page.    **
**                                                                       **
**************************************************************************/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*
** The body has a light gray background. 
*/
body{
  background-color: #ffffff;
}

/* 
** The main area is a medium tone rectangle. It inlcudes the sub-areas, the 
** movie title and the copyright text                                       
*/
.main_area {
  width: 932px; /* DEFINE master_width */
  height: 890px; /* DEFINE master_height */
                /* DEFINE master_margin between sections = 10 */
  position: relative;
  margin: auto;
  background-color: #afb9b9;
  color: #000000;
  font-family: arial, "lucida console", sans-serif;
  letter-spacing: 2px;
}

/* Movie Title */
/* DEFINE - movie_title_space = 20 */
.movie_title {
  position: absolute;
  top: 120px;    
  width: 100%;
  font-variant: small-caps;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

/* Copyright */
.copyright {
  position: absolute;
  top: 875px;    
  width: 100%;
  font-size: 11px;
  font-family: arial, "lucida console", sans-serif;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  color: #000000;
}


/**************************************************************************/
/*                               BANNER AREA                              */
/**************************************************************************/

/* 
** The banner is the top, dark tone rectangle with curved corners. 
** It inlcudes the logo, the ColCrush title, the top-level links, and the
** Countdown Flash content.
*/
.banner_area {
  width: 920px;   /* Set to master width - 2* master_margin */
  height: 116px;  /* DEFINE title_height */
  position: absolute;
  top: 6px;      /* Set to master_margin */
  left: 6px;     /* Set to master_margin */
  overflow: hidden;
}

/* These four items draw the four quadrants of the 
   curved corner banner rectange.              */
.banner_tl,.banner_tr,.banner_bl,.banner_br {
  position:absolute;
  height:60%;
  width:60%;
}
.banner_tl{
  background: transparent url(img.php.png) no-repeat top left; 
  top: 0px;
  left: 0px;
}
.banner_tr {
  background: transparent url(img.php.png) no-repeat top right; 
  top: 0px;
  right: 0px;
}
.banner_bl {
  background: transparent url(img.php.png) no-repeat bottom left; 
  bottom: 0px;
  left: 0px;
}
.banner_br {
  background: transparent url(img.php.png) no-repeat bottom right; 
  bottom: 0px;
  right: 0px;
}
/* This is the container for the banner area content. */
.banner_content{ 
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 2px;
  left: 0px;
} 


/**************************************************************************/
/*                                   SEL AREA                             */
/**************************************************************************/

/* 
** The sel area is the left-most, box with dark title bar and light body areas. 
** It inlcudes a title bar, and the content list.
*/
.sel_area {
  width: 276px;      /* DEFINE sel_width */
  height: 726px;     /* Set to master_height - title_height - movie_title_space
                       - 3*master_margin */
  position:absolute;
  top: 148px;        /* Set to title_height + 2*master_margin + movie_title_space */
  left: 6px;        /* Set to master_margin */
}

/* These four items draw the four quadrants of the 
   curved corner sel rectange.              */
.sel_tl,.sel_tr,.sel_bl,.sel_br {
  position:absolute;
  width:60%;
}
.sel_tl{
  background: transparent url(img.php.png) no-repeat top left; 
  top: 0px;
  left: 0px;
  height: 26px;
}
.sel_tr {
  background: transparent url(img.php.png) no-repeat top right; 
  top: 0px;
  right: 0px;
  height: 26px;
}
.sel_bl {
  background: transparent url(img.php2.png) no-repeat bottom left; 
  bottom: 0px;
  left: 0px;
  height:98%;
}
.sel_br {
  background: transparent url(img.php2.png) no-repeat bottom right; 
  bottom: 0px;
  right: 0px;
  height:98%;
}


/**************************************************************************/
/*                                VIDEO AREA                              */
/**************************************************************************/

/* 
** The video area is the center box with dark title bar and light body areas. 
** It inlcudes a title bar, and the content list.
*/
.video_area{
  width: 482px;
  height: 337px;     
  position:absolute;
  top: 148px;       
  left: 288px;     
  z-index:10
}

/* 
** This is for a BIG video area. The Flash should be 920 x 600.
*/
.video_area_big{
  width: 932px; /* was 482 */      
  height: 337px;     
  position:absolute;
  top: 148px;       
  left: 0px;      /* was 288 */
}


/**************************************************************************/
/*                               ACTION AREA                              */
/**************************************************************************/

/* 
** The action area is the right center box with dark title bar and light body areas. 
** It inlcudes a title bar, and the content list.
*/
.action_area{
  width: 150px;      
  height: 337px;     
  position:absolute;
  top: 148px;       
  left: 776px;      
}


/**************************************************************************/
/*                                INFO AREA                               */
/**************************************************************************/

/* 
** The info area is the right center box with dark title bar and light body areas. 
** It inlcudes a title bar, and the content list.
*/
.info_area{
  width: 638px;      
  height: 384px;     
  position:absolute;
  top: 491px;       
  left: 288px;      
}



/**************************************************************************/
/*                                PAGINATION                               */
/**************************************************************************/
.pagination {
  display: inline;
  font-size: 10px;
}
.pagination a {
	padding: 0px 2px 0px 2px;
	margin-right: 1px;
	border: 1px solid #aaaadd;
	text-decoration: none;
	color: #000099;	
        font-size: 10px;
}
.pagination a:hover, .pagination a:active {
	border: 1px, solid #000099;
	background-color: #c0e0e0;
}
.pagination span.current {
	padding: 0px 2px 0px 2px;
	margin-right: 1px;
	border: 1px solid #000099;
	font-weight: bold;
	background-color: #006655;
	color: #fff;	
}
.pagination span.disabled {
	padding: 0px 2px 0px 2px;
	margin-right: 1px;
	border: 1px solid #eee;
	color: #888;	
}