/* MarkHitsTheRoad.com CSS File for Content Pages

   Mark Wasson
   January 26, 2013  (created January 26, 2013)

   The purpose of this css file is to define a consistent style for all content 
   pages that appear in MarkHitsTheRoad.com.

*/


/* Define the fonts and background positioning for the body of MarkHitsTheRoad.com.
*/


body
{

/* Use one of the standard sans-serif fonts throughout the website.
*/

font-family: Arial, Helvetica, sans-serif;

/* Provide the background image for MarkHitsTheRoad.com.  Provide a white (#FFFFFF) 
   background alternative in case the background image does not properly load.
*/


background-image:  url("../graphics/mhtr-background-960.png");
background-position:  center;background-color: #FFFFFF;

/* Center the text in the background image by default.
*/

text-align:  center;
margin:0 auto;
}


/* Define hypertext link displays.  The standard display is red (#CC0000) with no 
   underlining.  When hovering the cursor over a link, display the link text as 
   green (#339933) and underline it.  When a user is actively clicking on a link, 
   display the link as brighter green (#33BB33) and underline it.
*/

a:link
{
text-decoration:none;
color: #CC0000
}

a:visited
{
text-decoration:none;color: #CC0000
}

a:hover
{
text-decoration:underline;
color: #339933
}

a:active
{
text-decoration:underline;
color: #33BB33
}


/* The #page division defines the entire page and is used to ensure that the total
   page width fits into the defined section of the background image and that it is
   centered over the background image.
*/

#page{
width:  960px;
margin:  0 auto;
}


/* The #header division appears at the top of the page and covers the width of the
   page.  The MarksHitTheRoad banner is left-justified.  Left padding is 5 pixels 
   smaller than for the #navigation and #content divisions because the logo in the 
   banner image is surrounded by white background.
*/

#header
{
width:  940px;
text-align:  left;
padding-left:  20px;
padding-top:  15px;
}


/* The #navigation division appears just below the #header division and covers the 
   width of the page.  The navigation links consist of left-justified text.  There 
   is no bottom padding because of the line height used in the #content division.
*/

#navigation
{
width:  935px;
text-align:  left;
padding-left:  25px;
padding-bottom:  0px;
}


/* The #content division is the primary division for presenting the content on a 
   webpage.  It is 655 pixels wide, including 25 pixels of padding on each side of 
   the content itself.  The content is allocated 605 pixels, which is wide enough 
   to accommodate the tag and copyright notice images at the bottom of the page.
*/

#content
{
width:  605px;
text-align:  left;
padding-left:  25px;
padding-right:  25px;
line-height:  1.5;
}


/* The #content-ads division is the primary division for presenting horizontal ads
   in the #content division.  It inherits all of its features from the #content 
   division.  This provides a placeholder in case changes are necessary when ads
   are added to the website.
*/

#content-ads
{
}


/* The #sidebar division is the primary division for presenting the "About Mark 
   Hits The Road" button, links to YouTube, Twitter and other social media, and 
   vertical ads.  The 260-pixel width is wide enough to accommodate many standard 
   vertical ad sizes.  Content in the #sidebar division is centered.
*/


#sidebar
{
width:  260px;
text-align:  center;
float:  right;
padding-left:  20px;
padding-right:  25px;
line-height:  1.5;
}


/* Define the "About Mark Hits The Road" button that changes image when the cursor 
   hovers over it.  To do this, create a background image of a specific width and 
   height and center the standard image in that space.  Then provide an alternative 
   image to display when the cursor hovers over that space. 
*/

.aboutmhtr
{
width:  250px;
height:  38px;
display:  block;
background:transparent url('../graphics/mhtr-about-red.gif') center top no-repeat;
}

.aboutmhtr:hover
{
background-image:  url('../graphics/mhtr-about-green.gif');
}