/****************************************************************************************
* SAVESMC WEBSITE PHP BETA TEST (Version 2.2 - topic pages)
  css programming (c) 2006: Phoenix Genesis / MBS LP
  website: http://www.vtutorials.com/clients/des/savesmc/
  
  ---> created: 10/08/06 -- revised: 10/25/06 <---
****************************************************************************************/


/****************************************************************************************
* BACKGROUND
****************************************************************************************/

body {

	background:#222 url("http://www.vtutorials.com/clients/des/savesmc/backgrounds/blackback.jpg");
	background-attachment: fixed;
	
	
/****************************************************************************************
* SCROLLBARS
****************************************************************************************/

	scrollbar-Track-Color: #222222;
    scrollbar-Face-Color: #637683; 
	scrollbar-DarkShadow-Color: #2e373d;
    scrollbar-Shadow-Color: #2e373d;
    scrollbar-Highlight-Color: #AFC1D4; 
    scrollbar-3dLight-Color: #2e373d;
    scrollbar-Arrow-Color: #000000;

}

/****************************************************************************************
* MAIN LINKS
****************************************************************************************/
a
{
    text-decoration: none;
    font-weight: bold; 
	color: #990000;
}
a:visited
{
    text-decoration: none;
    font-weight: bold;
	color: #880000;   
}  
a:active
{
    text-decoration: none;
    font-weight: bold;
	color: #637683;   
}  
a:hover
{
    background-color:#660000;
	font-weight: bold;
	text-decoration: underline;
	color: whitesmoke;
}
	
/****************************************************************************************
* DIRECTORY LINKS
****************************************************************************************/
	
#nav a {
  color: #637683;
  text-decoration: none;
  font-weight: bold;
  font-size: 10px;
  font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
	}
	
#nav a:visited {
  color: #637683;
  text-decoration: none;
  font-weight: bold;
  font-size: 10px;
  font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  }
	
#nav a:hover {
  color: whitesmoke;
  text-decoration: underline;
  font-weight: bold;
  font-size: 10px;
  font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  }
	
/****************************************************************************************
* TABLE HIGHLIGHT RULER
****************************************************************************************/

tr.ruled{
	background: #333333;
	
	}
	
/****************************************************************************************
* FONTS
****************************************************************************************/	

#title {
	background:#000;
	font:100%/2em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  	text-transform:uppercase;
  	letter-spacing:.2em; 
    font-size: 24px;  
    color: #AA0000; 
    margin-left: 100px;
    margin-top: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 25px;
	
		}
		
/****************************************************************************************
* THIS IS THE TWO COLUMN BREAK SPECS WITH VERTICAL LINE COLOR
****************************************************************************************/

div#text
{
    background-color: #000000;
	border: 0px solid #000000;
    padding-left: 10px; 
    margin-right: 0px; 
    text-align: justify; 
    margin-top: 10px;
	border-right: 0px solid #880000; 
/* This sets the Sidebar Colors
----------------------------------------------- */
}
		
  
/****************************************************************************************
* USE FOR HEADER
****************************************************************************************/
  
.h_text {

  font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif; 
  font-size: 13px;
  font-weight: bold;
  color: #222;
  margin-left: 30px;
  margin-bottom: 12px;
  
      }
	  
/****************************************************************************************
* USE FOR SUMMARIES
****************************************************************************************/
  
.s_text {

  font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif; 
  font-size: 11px;
  line-height:1.4em;
  font-weight: bold;
  color: #2e373d;
  margin-left: 30px;
  margin-bottom: 12px;
  text-align: justify;  
  
    }
	
/****************************************************************************************
* USE FOR CAPTIONS
****************************************************************************************/
	
.l_text {

  font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  font-size: 16px;
  line-height:1.2em;
  font-weight: bold;
  color: #3B3B3B;
  text-align: center;
  
    }
	
/****************************************************************************************
* USE FOR QUOTES AUTHOR
****************************************************************************************/
	
.f_text {

  font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #A4A28D;
  text-align: left;
  
    }
	
/****************************************************************************************
* USE FOR BOLDED SUBTITLES IN FEATURED ARTICLES
****************************************************************************************/
	
.g_text {

  font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif;
  line-height:1.4em;
  font-size:11px;
  font-weight: bold;
  color: #A4A28D;
  text-align: left;
  
    }
	
/****************************************************************************************
* USE FOR BLOCKQUOTES IN ARTICLES
****************************************************************************************/
	
.m_text {

  font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif;
  line-height:1.4em;
  font-size:11px;
  font-weight: bold;
  color: #660000;
  text-align: justify;
 	margin-left: 25px;
	margin-right: 10px;
  
    }
	
/****************************************************************************************
* USE FOR SKY BLUE NORMAL TEXT IN FEATURED ARTICLES
****************************************************************************************/
	
.d_text {

  font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif;
  font-size: 11px;
  line-height:1.4em;
  font-weight: normal;
  color: #AFC1D4;
  text-align: justify;
  
    }
  
  
  
/****************************************************************************************
* SIDEBAR FONTS AND BOXES
****************************************************************************************/

	#contacts {

	background:#2e373d;
  	font:1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
	text-transform:uppercase;
	font-weight: bold; 
	color: #A4A28D; 
    font-size: 9px;
	text-align: justify;
	padding: 10px;
	border-top: 1px solid #637683;
	border-left: 1px solid #637683; 
	border-right: 1px solid #637683;
	border-bottom: 1px solid #637683;
	width: 220px;
	margin-top: 85px;
	margin-bottom: 10px;
	
		}
		
div#contacts a {
    color: #AFC1D4;
	font-size: 9px;
	font-weight: bold; 
}

#contacts a:hover {
  color: whitesmoke;
  text-decoration: underline;
  font-size: 9px;
  font-weight: bold; 
  }

#masthead {

	text-align: center;
	padding: 10px;
	border-top: 0px solid #637683;
	border-left: 0px solid #637683; 
	border-right: 0px solid #637683;
	border-bottom: 0px solid #637683;
	width: 220px;
	margin-bottom: 10px;
	
		}
	
	#sidebartop {

	background:#2e373d;
  	font:1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
	text-transform:uppercase;
	font-weight: normal; 
	color: #A4A28D; 
    font-size: 9px;
	text-align: justify;
	padding: 10px;
	border-top: 1px solid #637683;
	border-left: 1px solid #637683; 
	border-right: 1px solid #637683;
	border-bottom: 1px solid #637683;
	width: 220px;
	margin-bottom: 20px;
	
		}
		
div#sidebartop a {
    color: #AFC1D4;
	font-size: 9px;
}

#directory {

	font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; 
	font-weight: bold; 
	color: #AFC1D4; 
	font-size: 10px;
	text-align: left;
	padding: 10px;
	border-top: 1px solid #880000;
	border-left: 1px solid #880000; 
	border-right: 1px solid #880000;
	border-bottom: 1px solid #880000;
	width: 220px;
	margin-bottom: 10px; 
	
		}
		
#sidebarmid {

	font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; 
	font-weight: normal;
	line-height:1.4em; 
	color: #777777; 
	font-size: 11px;
	text-align: justify;
	padding: 2px;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000; 
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	width: 230px;
	margin-bottom: 10px;
	
		}
		
#sidebarbtm {

	font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; 
	font-weight: normal; 
	color: #777777; 
	font-size: 10px;
	line-height:1.4em;
	text-align: center;
	padding: 2px;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000; 
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	width: 220px;
	margin-bottom: 10px;
	
		}
		

/****************************************************************************************
* MASTHEAD WITH SAVESMC LOGO
****************************************************************************************/

div#header
{
    background-color: #000;
    margin: 2px;
    margin-top: 0px;   
    height: 135px;
    overflow: hidden;
    display:block;
	text-align: center;
	text-valign: middle;
}

/****************************************************************************************
* SAVE SMC TOP BANNER IMAGES - Note: Banner Width Should MATCH Page Width !!!
****************************************************************************************/

div.banner
{
    background-color: #000000;
	border-bottom: 0px solid #880000;
	font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  	text-transform:uppercase;
  	letter-spacing:.2em; 
    font-size: 10px;
	font weight: bold;
	color: #A0A0A0; 
	vertical-align: middle;
	text-align: center;
    margin-bottom: 0px;
    height: 120px;
    width: 1009px;
    margin-left: 0px;
	margin-right: 0px;
	margin-top: 4px;
    padding-bottom: 4px;
}

/****************************************************************************************
* MENU NAVIGATION
****************************************************************************************/

div#menu
{
    margin: 2px 0;
    height: 30px; 
	width: 1009px;   
    padding: 2px 0 0 0;
    background-image: url('http://www.vtutorials.com/clients/des/savesmc/graphics/borderd.gif');  
    overflow: hidden;

}
div#menu ul
{
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    padding: 0; 
    margin: 0;
    background-color: #595957;    
}

div#menu ul li
{
    list-style: none;
    float: left;    
    background-image: url('http://www.vtutorials.com/clients/des/savesmc/graphics/bordermenu.gif'); 
    margin: 0;
    padding: 0;
    
}
div#menu ul li a
{
    display: block; 
    text-decoration: none;
    margin: 0 0 0 3px; 
    padding: 0;
    color: #ddd;
    background-color: #637683;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    line-height: 26px;
    font-size: 11px;
    width: 123px;    
    text-align: center;

}
div#menu ul li a.first
{
    margin-left: 0;
    width: 125px;
}
div#menu ul li a.last
{
    margin-right: 0;
    width: 125px;    
}
div#menu ul li a:hover
{
    color: #000;
    background-color: #AFC1D4;
}

/****************************************************************************************
* FOOTER WITH COPYRIGHT NOTICE
****************************************************************************************/

div#footer
{
    background-color: #000;
    clear: both;
    height: 32px;
	width: auto;
    line-height: 30px;
    padding: 0px 20px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #000;
    font-size: 10px;
    font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
	color: #777;
	margin: 0px;
 
}
div#footer span#left
{
    padding-left: 20px;
    width: 55%;
    text-align: left;
}

div#footer span
{
    width: 40%;
    display: block;
    float: left;
    text-align: right; 
}

/****************************************************************************************
* INTRODUCTORY PARAGRAPH - Sets the TEXT COLOR for the articles as well.
  Note: I added the story colors separately. 
  IMPORTANT: MARGIN-LEFT sets the spacing for the main summaries and content !!!
****************************************************************************************/

div#intro
{
    float: left;
	background-color: #000000;
    margin-left: 10px;
    width: 660px;
    color: #A0A0A0;
    height: auto;
    margin-bottom: 10px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-weight: normal;
}
div#intro p
{
    margin-bottom: 10px;
    margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 10px;
}


/****************************************************************************************
* SLUGLINE - HEADER DESCRIPTION FOR ARTICLES
****************************************************************************************/

div.slugline
{
    background-color: #949281;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 4px solid #637683;
	border-bottom: 1px solid #637683;
    margin-bottom: 0px;
    height: 20px;
    width: 660px;
	text-align: center;
    font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    font-size: 16px;
	font-weight: bold;
	color: #3B3B3B;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 4px;
}

/****************************************************************************************
* STORY - ARTICLE TABLES NOTE: This is the Padded Version.
	So, use as single stand alone article or last one in a series.
****************************************************************************************/

div.summary
{
    background-color: #A4A28D;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #637683;
	border-bottom: 4px solid #637683;
    margin-bottom: 1px;
    height: auto;
    width: 660px;
    text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* ARTICLE - ARTICLE TABLES NOTE: This is the Non-Padded Version.
	So, use as article sandwiched between multiple articles and slugline header.
	For the middle article divide, I can go with "solid" or "dotted."
****************************************************************************************/

div.midsummary
{
    background-color: #BBBEA8;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #111;
	border-bottom: 1px solid #949281;
    margin-bottom: 0px;
    height: auto;
    width: 660px;
    text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* SUBTITLE
****************************************************************************************/

div.subtitle
{
    background-color: #A4A28D;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 4px solid #637683;
	border-bottom: 0px solid #637683;
    margin-bottom: 0px;
    height: 20px;
    width: 660px;
	text-align: center;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 12px;
	font-weight: bold;
	color: #2e373d;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/****************************************************************************************
* TOP LINKS
****************************************************************************************/

div.tlinks
{
    background-color: #A4A28D;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #637683;
	border-bottom: 1px solid #000000;
    margin-bottom: 0px;
    height: auto;
    width: 660px;
	text-align: justify;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 10px;
	font-weight: bold;
	color: #000000;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 12px;
}

/****************************************************************************************
* BOTTOM LINKS
****************************************************************************************/

div.blinks
{
    background-color: #A4A28D;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 1px solid #637683;
	border-bottom: 4px solid #637683;
    margin-bottom: 0px;
    height: 20px;
    width: 660px;
	text-align: center;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 10px;
	font-weight: bold;
	color: #000000;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 12px;
}

/****************************************************************************************
* FEATURED ARTICLE
	NOTE: Use for dark blue background stand alone featured article.
****************************************************************************************/

div.featured
{
    background-color: #2A363F;
	border-left: 4px solid #778899;
	border-right: 4px solid #778899;
	border-top: 4px solid #778899;
	border-bottom: 4px solid #778899;
	margin-top: 20px;
    margin-bottom: 20px;
    height: auto;
    width: 660px;
	text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 0px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	line-height:1.4em;
	font-size:11px;
    font-weight: normal;
}

/****************************************************************************************
* STORY - ARTICLE TABLES NOTE: This is the Padded Version.
	So, use as single stand alone article or last one in a series.
****************************************************************************************/

div.summary
{
    background-color: #BBBEA8;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #637683;
	border-bottom: 4px solid #637683;
    margin-bottom: 1px;
    height: auto;
    width: 660px;
    text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* BROWNBOX - MEDIUM BROWN TABLE NOTE: This is the Non-Padded Version.
	So, use as article sandwiched between multiple articles and slugline header.
	For the middle highlighted article divide, I can go with "solid" or "dotted."
****************************************************************************************/

div.brownbox
{
    background-color: #A4A28D;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 1px solid #637683;
	border-bottom: 1px solid #637683;
    margin-bottom: 0px;
    height: auto;
    width: 660px;
    text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}


/****************************************************************************************
* BLUE STORY - ARTICLE TABLES NOTE: This is the Padded Version.
	So, use as single stand alone article or last one in a series.
****************************************************************************************/

div.bluesummary
{
    background-color: #AFC1D4;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #637683;
	border-bottom: 4px solid #637683;
    margin-bottom: 1px;
    height: auto;
    width: 660px;
    text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* BLUEBOX - MEDIUM BLUE TABLE NOTE: This is the Non-Padded Version.
	So, use as article sandwiched between multiple articles and slugline header.
	For the middle highlighted article divide, I can go with "solid" or "dotted."
****************************************************************************************/

div.bluemidsummary
{
    background-color: #AFC1D4;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #111;
	border-bottom: 1px solid #949281;
    margin-bottom: 0px;
    height: auto;
    width: 660px;
    text-align: justify;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 4px;
	padding-bottom: 4px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* BLUE SLUGLINE - HEADER DESCRIPTION FOR ARTICLES
****************************************************************************************/

div.blueslugline
{
    background-color: #8EACC2;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 4px solid #637683;
	border-bottom: 1px solid #637683;
    margin-bottom: 0px;
    height: 20px;
    width: 660px;
	text-align: center;
    font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    font-size: 16px;
	font-weight: bold;
	color: #3B3B3B;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 4px;
}

/****************************************************************************************
* BLUE SUBTITLE
****************************************************************************************/

div.bluesubtitle
{
    background-color: #9FB9CB;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 4px solid #637683;
	border-bottom: 0px solid #637683;
    margin-bottom: 0px;
    height: 20px;
    width: 660px;
	text-align: center;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 12px;
	font-weight: bold;
	color: #2e373d;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/****************************************************************************************
* BLUE TOP LINKS
****************************************************************************************/

div.bluetlinks
{
    background-color: #9FB9CB;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 0px solid #637683;
	border-bottom: 1px solid #000000;
    margin-bottom: 0px;
    height: auto;
    width: 660px;
	text-align: justify;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 10px;
	font-weight: bold;
	color: #000000;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 12px;
}

/****************************************************************************************
* BLUE BOTTOM LINKS
****************************************************************************************/

div.blueblinks
{
    background-color: #9FB9CB;
	border-left: 4px solid #637683;
	border-right: 4px solid #637683;
	border-top: 1px solid #637683;
	border-bottom: 4px solid #637683;
    margin-bottom: 0px;
    height: 20px;
    width: 660px;
	text-align: center;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 10px;
	font-weight: bold;
	color: #000000;
    padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 12px;
}

/****************************************************************************************
* BLUELINKS
****************************************************************************************/

#bluenav A {
  color: navy;
  text-decoration: none;
  }

#bluenav A:visited {
  color: #637683;
  text-decoration: none;
  }
  
#bluenav a:active
{
    text-decoration: none;
    font-weight: bold;
	color: #880000;   
}  
#bluenav a:hover
{
    background-color:#880000;
	font-weight: bold;
	text-decoration: underline;
	color: whitesmoke;
}