/* 

Author  : James Thomson [james.thomson@soup.co.uk]
Client  : Soup Ltd.
Project : Train Blog

Comment : This style sheet adds the extra styles to enable the
          image replacement technique to work effectively.

*/


/****************************************************************************
	=header tags, i.e. h1 - h6
*****************************************************************************/

h1
{
	width:					200px;
	height:					44px;
	background:				url(../images/h1_logo.gif) top left no-repeat;	
}

h1 a
{
	display:				block;
	width:					200px;
	height:					44px;
}

h1 span
{
	display:				none;
}

.heading h2
{
	width:					320px;
	height:					26px;
	background:				url(../images/h2_going_insane_on_the_train.gif) top left no-repeat;	
}

.heading h2 span
{
	display:				none;
}

.heading h3
{
	width:					351px;
	height:					87px;
	background:				url(../images/h3_ever_been_so_frustrated.gif) top left no-repeat;	
}

.heading h3 span
{
	display:				none;
}

h2#read_comments
{
	width:					199px;
	height:					20px;
	background:				url(../images/h2_read_comments.gif) top left no-repeat;
}

h2#read_comments span
{
	display:				none;
}

h2#about
{
	width:					198px;
	height:					26px;
	background:				url(../images/h2_about.gif) top left no-repeat;
}

h2#about span
{
	display:				none;
}

h2#accessibility
{
	width:					154px;
	height:					24px;
	background:				url(../images/h2_accessibility.gif) top left no-repeat;
}

h2#accessibility span
{
	display:				none;
}

h2#contact
{
	width:					99px;
	height:					20px;
	background:				url(../images/h2_contact.gif) top left no-repeat;
}

h2#contact span
{
	display:				none;
}

h2#privacy
{
	width:					89px;
	height:					24px;
	background:				url(../images/h2_privacy.gif) top left no-repeat;
}

h2#privacy span
{
	display:				none;
}

h2#admin
{
	width:					auto;
	height:					auto;
	background:				none;
}

h4#thanks
{
	width:					89px;
	height:					24px;
	background:				url(../images/h4_thanks.gif) top left no-repeat;
}

h4#thanks span
{
	display:				none;
}

h4#errors
{
	width:					49px;
	height:					11px;
	background:				url(../images/h4_errors.gif) top left no-repeat;
}

h4#errors span
{
	display:				none;
}

h4#help
{
	width:					30px;
	height:					10px;
	background:				url(../images/h4_help.gif) top left no-repeat;
}

h4#help span
{
	display:				none;
}


/****************************************************************************
	=header section
*****************************************************************************/

a#header_home
{
	display:				block;
	width:					61px;
	height:					16px;
	background:				url(../images/btn_home.gif) top left no-repeat;
}

a#header_home:hover
{
	background-position:	bottom;
}

a#header_home span
{
	display:				none;
}

a#header_read_comments
{
	display:				block;
	width:					139px;
	height:					16px;
	background:				url(../images/btn_read_comments.gif) top left no-repeat;
}

a#header_read_comments:hover
{
	background-position:	bottom;
}

a#header_read_comments span
{
	display:				none;
}

a#header_about
{
	display:				block;
	width:					67px;
	height:					16px;
	background:				url(../images/btn_about.gif) top left no-repeat;
}

a#header_about:hover
{
	background-position:	bottom left;
}

a#header_about span
{
	display:				none;
}

/*--------------------------------------------------------------------------
	=page specific, make appropriate header button active depending
	 on the page we're on
----------------------------------------------------------------------------*/

#home a#header_home, #blogs a#header_read_comments, #blog_detail a#header_read_comments, #about a#header_about
{
	background-position:	bottom;
}


/****************************************************************************
	=button in content body
*****************************************************************************/

a#btn_more
{
	display:				block;
	width:					59px;
	height:					16px;
	background:				url(../images/btn_more.gif) top left no-repeat;
}

a#btn_more:hover
{
	background-position:	bottom;
}

a#btn_more span
{
	display:				none;
}

a#btn_read_comments_2
{
	display:				block;
	width:					126px;
	height:					16px;
	background:				url(../images/btn_read_comments_2.gif) top left no-repeat;
}

a#btn_read_comments_2:hover
{
	background-position:	bottom;
}

a#btn_read_comments_2 span
{
	display:				none;
}

a#btn_next
{
	float:					left;
	width:					52px;
	height:					16px;
	background:				url(../images/btn_next.gif) top left no-repeat;
}

a#btn_next:hover
{
	background-position:	bottom;
}

a#btn_next span
{
	display:				none;
}

a#btn_prev
{
	float:					left;
	width:					54px;
	height:					16px;
	background:				url(../images/btn_prev.gif) top left no-repeat;
}

a#btn_prev:hover
{
	background-position:	bottom;
}

a#btn_prev span
{
	display:				none;
}

a#btn_back_to_comments
{
	display:				block;
	width:					147px;
	height:					16px;
	background:				url(../images/btn_back_to_comments.gif) top left no-repeat;
}

a#btn_back_to_comments:hover
{
	background-position:	bottom;
}

a#btn_back_to_comments span
{
	display:				none;
}

a.btn_page_first
{
	display:				block;
	width:					16px;
	height:					16px;
	background:				url(../images/btn_page_first.gif) top left no-repeat;
}

a.btn_page_first:hover
{
	background-position:	bottom left;
}

a.btn_page_first span
{
	display:				none;
}

a.btn_page_previous
{
	display:				block;
	width:					16px;
	height:					16px;
	background:				url(../images/btn_page_previous.gif) top left no-repeat;
}

a.btn_page_previous:hover
{
	background-position:	bottom;
}

a.btn_page_previous span
{
	display:				none;
}

a.btn_page_next
{
	display:				block;
	width:					16px;
	height:					16px;
	background:				url(../images/btn_page_next.gif) top left no-repeat;
}

a.btn_page_next:hover
{
	background-position:	bottom;
}

a.btn_page_next span
{
	display:				none;
}

a.btn_page_last
{
	display:				block;
	width:					16px;
	height:					16px;
	background:				url(../images/btn_page_last.gif) top left no-repeat;
}

a.btn_page_last:hover
{
	background-position:	bottom left;
}

a.btn_page_last span
{
	display:				none;
}


/****************************************************************************
	=subcontent
*****************************************************************************/

div#img_either
{
	width:					53px;
	height:					18px;
	background:				url(../images/img_either.gif) top left no-repeat;
}

div#img_either span
{
	display:				none;
}

div#img_or
{
	width:					36px;
	height:					18px;
	background:				url(../images/img_or.gif) top left no-repeat;
}

div#img_or span
{
	display:				none;
}

.add_comment h2
{
	width:					111px;
	height:					11px;
	background:				url(../images/h2_add_comment.gif) top left no-repeat;
}

.add_comment h2 span
{
	display:				none;
}

.add_comment_either h2
{
	width:					185px;
	height:					73px;
	background:				url(../images/h2_txt_your_comments_to_07904100100.gif) top left no-repeat;
}

.add_comment_either h2 span
{
	display:				none;
}

a#btn_back
{
	display:				block;
	width:					53px;
	height:					23px;
	background:				url(../images/btn_back.gif) top left no-repeat;
}

a#btn_back:hover
{
	background-position:	bottom;
}

a#btn_back span
{
	display:				none;
}

a#btn_send_another
{
	display:				block;
	width:					106px;
	height:					23px;
	background:				url(../images/btn_send_another.gif) top left no-repeat;
}

a#btn_send_another span
{
	display:				none;
}

a#btn_help
{
	display:				block;
	width:					39px;
	height:					20px;
	background:				url(../images/btn_help.gif) top left no-repeat;
}

a#btn_help:hover
{
	background-position:	bottom;
}

a#btn_help span
{
	display:				none;
}

label#subject
{
	display:				block;
	width:					50px;
	height:					8px;
	background:				url(../images/label_subject.gif) top left no-repeat;
}

label#subject span
{
	display:				none;
}

label#comment
{
	display:				block;
	width:					55px;
	height:					8px;
	background:				url(../images/label_comment.gif) top left no-repeat;
}

label#comment span
{
	display:				none;
}


/****************************************************************************
	=footer
*****************************************************************************/

a#btn_made_by_soup
{
	display:				block;
	width:					75px;
	height:					11px;
	background:				url(../images/img_made_by_soup.gif) top left no-repeat;
}

a#btn_made_by_soup span
{
	display:				none;
}