﻿#template_wrap * {
    margin: 0;
    padding: 0;
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
}

#template_wrap {
    margin: 0;
    padding: 12px;
    float: left;
    width: 576px;
    background: #FFF;
}

/****************************************** BASIC STYLES *************************************************/
/* These styles affect all sections */

#template_wrap h2 {
    padding: 12px 12px 8px;
    text-transform: uppercase;
    position: relative;
    font-size: 16px;
    color: #FFF;
}

#template_wrap h3 {
    margin: 0 12px 8px;
    padding: 12px 0 5px;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid #FFFDA2;
    color: #FFF;
    clear: left;
}

#template_wrap h4,
#template_wrap h4 a,
#template_wrap h5,
#template_wrap h6 {
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
}

#template_wrap a:link, #template_wrap a:visited {
    text-decoration: underline;
}

#template_wrap a:hover, #template_wrap a:active {
    text-decoration: none;
}

/* Styles for all links with a class of "more" */

#template_wrap a.more {
    padding: 5px 25px 5px;
    text-transform: none;
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent url('/themes/treehouse-v8/images/watch/mothersday2009/morearw.gif') no-repeat center right;
}

#template_wrap a.more:link, #template_wrap a.more:visited {
    color: #FFF;
}

#template_wrap a.more:hover, #template_wrap a.more:active {
     color: #FFFDA2;
}

/* Styles for the list in the "more" portion of each section */

#template_wrap div.more {
    clear:left;
}

#template_wrap .more ul {
    padding: 5px 12px 0;
    float: left;
    width: 552px;
    list-style-type: none;
}

#template_wrap .more a {
    text-decoration: underline;
    display: block;
    width: 156px;
}


/************************************************ HEADER IMAGE************************************************/
/* The image must be split in two for scalability */


#template_wrap #main_img {
    margin-top: 12px;
	margin-bottom: 12px;
	background: transparent url('/themes/treehouse-v8/images/watch/spring10/header_top.jpg') no-repeat center top;
	width: 576px; 
	height: 233px;
}

#template_wrap h1 {
    margin: 15px 0px 0px 0px;
    padding: 15px 20px 20px 290px; /* To move text to the right -- Add to this number.  To move text to the left -- Subtract from this number */
    width: 266px; /* Whatever you add to the padding subtract from the width */
    font-size: 14px;
    font-weight: normal;
    color: #077505;
    line-height: 1.75;
    background: transparent url('/themes/treehouse-v8/images/watch/spring10/header_tp.gif') no-repeat center top;
}

#template_wrap #birds {
    height: 141px;
    width: 576px;
    background: transparent url('/themes/treehouse-v8/images/watch/spring10/header_btm.gif') no-repeat center bottom;
}


/************************************************* SHOWS ********************************************************/
/* These styles control the "SHOWS" portion of the template */


#template_wrap #shows {
    margin-bottom: 12px;
    padding-bottom: 12px;
    float: left;
    width: 576px;
    background:#028d46 url('/themes/treehouse-v8/images/watch/spring10/green_btmbar.gif') no-repeat bottom center; /* bottom rounded corners of "shows" */
}

#template_wrap #shows h2 {
/* color: #FFF;  uncomment this if you want the Shows' h2 heading to be a unique colour */
    background: transparent url('/themes/treehouse-v8/images/watch/spring10/green_bar.gif') no-repeat top center; /* Top rounded corners of "shows" */
}


/* Uncomment this if you want unique colours for the links with a class of more.

#template_wrap #shows a.more {
     background: transparent url('../img/morearw.gif') no-repeat center right;
}

#template_wrap #shows a.more:link, #template_wrap #shows a.more:visited {
    color: #FFF;
}

#template_wrap #shows a.more:hover, #template_wrap #shows a.more:active {
     color: #FFFDA2;
} */

/* Styles for small images and their titles in "shows" category */

#template_wrap #image_wrap {
    width: 576px;
    float: left;
    background: #eaf3db; /*shows bg colour */
}

#template_wrap ul#show_images {
    padding: 20px 21px 0px;
    width: 534px;
    float: left;
    list-style-type: none;
    background: #eaf3db; /*shows bg colour?? */
}

#template_wrap #show_images li {
    margin: 0 16px;
    padding: 0px 0 12px; /* The first number should equal the height of your images plus 12px */
    display: block;
    width: 146px; /* This number must match the width of your images */
    float: left;
}

#template_wrap #shows h4 {
    color: #007336; /*shows footer colour*/
}

#template_wrap #shows h5 {
    color: #666;
}

#template_wrap #shows h4 a:link, #template_wrap #shows h4 a:visited {
    color: #007336; /*shows titles colour*/
}

#template_wrap #shows h4 a:hover, #template_wrap #shows h4 a:active {
    color: #000;
}


/* These styles control the list in the "more shows" section */

#template_wrap #shows h3 {
/* border-bottom-color: #FFFDA2;   uncomment this if you want shows h3 headings to have a unique bottom border colour */
/* color: #FFF;  uncomment this if you want to have shows h3 headings to be a unique colour */
}

#template_wrap #more_shows li {
    list-style-type: none;
    margin-bottom: 5px;
    padding: 0 14px;
    float: left;
    width: 156px;
    background: transparent url('/themes/treehouse-v8/images/watch/mothersday2009/sm_arw.gif') no-repeat left center; /* Bullet image for "more shows" list */
}

#template_wrap #more_shows a:link, #template_wrap #more_shows a:visited {
    color: #FFF;
}

#template_wrap #more_shows a:hover, #template_wrap #more_shows a:active {
    color: #FFFDA2;
}


/************************************************ ACTIVITIES ************************************************/
/* These styles control the "activities" portion of the template */


#template_wrap #activities {
    margin-bottom: 12px;
    padding-bottom: 12px;
    float: left;
    width: 576px;
    background: #038c46 url('/themes/treehouse-v8/images/watch/spring10/green_btmbar.gif') no-repeat bottom center; /* bottom rounded corners of "activities" */
}

#template_wrap #activities h2 {
/*    color: #FFF;  uncomment this if you want activities h2 headings to have a unique colour */
    background: transparent url('/themes/treehouse-v8/images/watch/spring10/green_bar.gif') no-repeat top center; /* top rounded corners of "activities" */
}


/****** styles for "more activities" link ******/

/* uncomment this if you want the activities links with a class of more to be unique colours

#template_wrap #activities a.more {
    background: transparent url('../img/morearw.gif') no-repeat center right;
}

#template_wrap a.more:link, #template_wrap a.more:visited {
    color: #fff;
}

#template_wrap a.more:hover, #template_wrap a.more:active {
    color: #FFFDA2;
}*/


/****** styles for small images and their titles in "Activities" category ******/

#template_wrap ul#activity_images {
    padding: 20px 12px 0;
    float: left;
    width: 552px;
    list-style-type: none;
    background: #ebf3dc;
}

#template_wrap #activity_images li {
    margin: 0 6px;
    padding: 0px 0 12px; /* the first number should equal the height of your images plus 12px */
    display: block;
    width: 126px; /* this number must match the width of your images */
    float: left;
}

#template_wrap h4 {
    color: #038c46;
}

#template_wrap h5 {
    color: #666;
}

#template_wrap #activities h4 a:link, #template_wrap #activities h4 a:visited {
    color: #038c46;
}

#template_wrap #activities h4 a:hover, #template_wrap #activities h4 a:active {
    color: #000;
}

/****** the following rules control the list in the "More Activities" section ******/

#template_wrap #activities h3 {
/*    border-bottom-color: #FFFDA2; uncomment if you would like a uniques colour for the border on the bottom of activities h3 headings */
/*     color: #FFF; uncomment if you would like a unique colour for activities h3 headings */
}

#template_wrap ul#more_activities {
    width: 552px;
    padding: 5px 12px 0;
    list-style-type: none;
}

#template_wrap #more_activities li {
    margin: 0px 0px 5px;
    padding: 0 14px;
    float: left;
    width: 156px;
    list-style-type: none;
    background: transparent url('/themes/treehouse-v8/images/watch/mothersday2009/sm_arw.gif') no-repeat 0px 3px; /* last number raises or lowers bullet image */
}

#template_wrap #more_activities li p {
    margin: 0px 0px 5px;
    color: #FFF;
}

#template_wrap #more_activities a:link, #template_wrap #more_activities a:visited {
    color: #FFFDA2;
}

#template_wrap #more_activities a:hover, #template_wrap #more_activities a:active {
    color: #FFF;
}


/********************************************************* GAMES ******************************************************/
/* These styles control the "games" portion of the template */


#template_wrap #games {
    margin-bottom: 12px;
    padding-bottom: 12px;
    float: left;
    width: 576px;
    background: #1464c4 url('/themes/treehouse-v8/images/watch/spring10/blue_btmbar.gif') no-repeat bottom center; /* bottom rounded corners of "games" */
}

#template_wrap #games h2 {
/*    color: #FFF;  uncomment this if you want games h2 headings to have a uniques colour */
    background: transparent url('/themes/treehouse-v8/images/watch/spring10/blue_bar.gif') no-repeat top center; /* top rounded corners of "games" */
}


/****** styles for "more games" link ******/

/* uncomment this if you want the links with a class of more to be unique colours

#template_wrap #games a.more {
    background: transparent url('../img/morearw.gif') no-repeat center right;
}

#template_wrap #games a.more:link, #template_wrap #games a.more:visited {
    color: #fff;
}

#template_wrap #games a.more:hover, #template_wrap #games a.more:active {
    color: #FFFDA2;
}*/


/**** styles for small images and their titles in "games" category *****/

#template_wrap ul#game_images {
    padding: 20px 12px 0;
    float: left;
    width: 552px;
    list-style-type: none;
    background: #e1e7f3; /* this controls the background for the game images section */
}

#template_wrap #game_images li {
    margin: 0 6px;
    padding: 0px 0 12px; /* the first number should equal the height of your images plus 12px */
    display: block;
    width: 126px; /* this number must match the width of your images */
    float: left;
}

#template_wrap #games h4 a:link, #template_wrap #games h4 a:visited {
    color: #1464c4;
}

#template_wrap #games h4 a:hover, #template_wrap #games h4 a:active {
    color: #000;
}

/****** the following rules control the list in the "more games" section ******/

#template_wrap #moregames {
    clear: left;
}

#template_wrap #games h3 {
/*    border-bottom-color: #FFFDA2; uncomment if you would like a unique colour for the border on the bottom of games h3 headings */
/*    color: #FFF; uncomment if you would like a uniques colour for gams h3 headings */
}

#template_wrap ul#more_games {
    padding: 5px 12px 0;
}

#template_wrap #more_games li {
    margin: 0px 0px 5px;
    padding: 0 14px;
    float: left;
    width: 156px;
    list-style-type: none;
    background: transparent url('/themes/treehouse-v8/images/watch/mothersday2009/sm_arw.gif') no-repeat 0px 3px;
}

#template_wrap #more_games li p {
    margin: 0px 0px 5px;
    color: #FFF;
}

#template_wrap #more_games a:link, #template_wrap #more_games a:visited {
    color: #FFFDA2;
}

#template_wrap #more_games a:hover, #template_wrap #more_games a:active {
    color: #FFF;
}
