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

/****************************************************************************************
* BODY (with colored bg and fixed non-scrolling bg image.
		Make sure to color coordinate the bgcolor to the scrollbar !!!
		
****************************************************************************************/
body
{
	background:#222 url("http://www.vtutorials.com/clients/des/savesmc/backgrounds/blackback.jpg");
	background-attachment: fixed;
	color: #000000;
    text-align: center;
    margin: 10px 0;
    padding: 0;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-size: 11px;
	line-height:1.4em;
    overflow: auto;
	
/****************************************************************************************
* SCROLLBAR
****************************************************************************************/	
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 - This sets the page width (make sure to match the border image specs and menu)
         NOTE: This also sets the -->FONT COLOR<-- for the header and footer !!!
		 --> Make sure to match the BANNER width as well <--
****************************************************************************************/
	
div#main
{
    width: 1009px;
    background-color: #000000;
	border: 1px solid #777777;
    margin: auto;
    text-align: left;
    height: auto;
	/****************************************************************************************
    background-image: url('http://www.vtutorials.com/clients/des/savesmc/graphics/borderg_1013.gif');
	****************************************************************************************/
    padding: 0px;
	font-family: "Verdana", Arial, Helvetica, Sans-Serif;   
    color: #777;
}

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

div#header
{
    background-color: #000;
    margin: 2px;
    margin-top: 0px;
	/****************************************************************************************
    background-image: url('http://www.vtutorials.com/clients/des/savesmc/graphics/borderl.gif');
	****************************************************************************************/    
    height: 135px;
    overflow: hidden;
    display:block;
	text-align: center;
	text-valign: middle;
}



/****************************************************************************************
* NOTE: Remove for now.

div#header img
{
    margin-top: 2px;
	border: 0px solid #000;
    height: 110px;
	width: 892px;
    overflow: hidden;
}

****************************************************************************************/

/****************************************************************************************
* 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; 
	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;
}


/****************************************************************************************
* CONTENT OF WEBPAGE
****************************************************************************************/

div#content
{
	background-color:#000000;
    height: auto;
    margin: 2px 2px;
}


/****************************************************************************************
* 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;
}

/****************************************************************************************
* LEFT SIDEBAR - CONTACT WITH IMAGE
	Note: Float LEFT sets the sidebar to the left side.
	Float RIGHT sets the sidebar to the right side.
	---> Must set the VLINE as well to match. <---
	By duplicating the code and flipping it, I can create a 3 column layout !!!
****************************************************************************************/

div#contact
{
    float: left;
	background:#000000;
	border: 0px solid #111;
    width: 210px;
    height: auto;
    margin-top: 0px;
	margin-left: 10px;
    text-align: center;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-size: 11px;
    color: #777;    
    padding: 2px;
}
div#contact div
{
    border: 1px solid #637683;
	background:#2e373d;
    width: 200px;
    margin: auto;
  	font:1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    font-size: 9px;
	text-align: center;
	margin-left: 0px;
	margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 4px;
    padding-top: 0px;

}
div#contact img
{

    margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 6px;
	border: 0px solid #000;
    
}
div#contact div ul
{

    text-align: left;
    margin: 5px 0 0 0;    
    margin-left: 5px;
    width: auto;
    padding: 0;

}
div#contact div ul li
{    
    list-style-type: none;
    margin: 0;
    padding: 0px;
    padding-left: 6px;
    padding-bottom: 6px;
    vertical-align: middle;
}
div#contact div ul li img
{
    margin: 0;
}
div#contact div a
{
    color: #AFC1D4;
	font-size: 9px;
}

div#contact div a:visited
{
    text-decoration: none;
	font-size: 9px;
	color: #AFC1D4;   
}  
div#contact div a:active
{
    text-decoration: none;
	font-size: 9px;
	color: #637683;   
}  
div#contact div a:hover
{
    text-decoration: underline;
	background-color:#660000;
	font-size: 9px;
	color: whitesmoke;
}

/****************************************************************************************
* DISCLAIMER AND ABOUT THE SITE
****************************************************************************************/

div.spotlight
{
  margin:0 2px 2px;
  padding:0 2px 2px;
  border:0px solid #222;
  border-width:0 1px 1px;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#949281; 
  }


/****************************************************************************************
* 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: 25px;
    width: 700px;
    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;
}

/****************************************************************************************
* THIS IS THE TWO COLUMN BREAK SPECS WITH VERTICAL LINE COLOR
	Note: Matching the color with the main page color will make vline invisible.
	This line is useful to keep in the code for layout spacing purposes. 
	For the LEFT side bar, use "border-left", otherwise, use "border-right".
	IMPORTANT: The MARGINS set the spacing between the sidebar and summaries !!!
****************************************************************************************/
div#text
{
    background-color: #000000;
	border: 0px solid #000000;
    padding-left: 20px; 
    margin-right: 20px; 
    text-align: justify; 
    margin-top: 10px;
	border-left: 1px solid #880000; 
		/* This sets the Sidebar Colors
--------------------------
    border-right: 1px solid #880000; --------------------- */
}

/****************************************************************************************
* STORY TITLE
****************************************************************************************/
	
.h_text 
	{ 
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size: 13px;
	font-weight: bold;
	color: #222;
	margin-left: 30px;
	margin-bottom: 12px;
	}
	
.b_text 
	{ 
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
	color: #990000;
	margin-left: 10px;
	margin-bottom: 16px;
	}
	
.c_text 
	{ 
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size: 11px;
	color: #AFC1D4;
	margin-left: 25px;
	margin-right: 50px;
	}
	
.e_text 
	{ 
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size: 11px;
	color: #A4A28D;
	margin-left: 20px;
	margin-right: 20px;
	}
	
.d_text 
	{ 
	font:100%/2em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  	text-transform:uppercase;
	letter-spacing:.2em; 
	font-size: 12px;
	font-weight: bold;
	color: #637683;
	margin-left: 20px;
	margin-bottom: 0px;
	}
	
div#intro div ul
{
   list-style: url('http://www.vtutorials.com/clients/des/savesmc/graphics/point.gif');
   margin-left: 15px;
   padding: 0px;
   padding-top: 2px;
   margin-top: 2px;
}
div#intro div ul p
{
    margin: 5px 0;
}

/****************************************************************************************
* PAGE TITLE WITH SHADOW EFFECT - Make sure to contrast shadow with page background.
****************************************************************************************/

div#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: 275px;
    margin-top: 20px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 25px;
}


/* NOTE: Shadow Does Not Show Up in Print Version without CSS so it should be disabled for now!
--------------------------------------------------
div#title div
{
    position: absolute; 
    color: #990000; 
    margin-left: 14px; 
    margin-top: 10px;
}

div#title div#shadow
{
    position: absolute;  
    color: #222; 
    margin-left: 16px; 
    margin-top: 12px;
}

----------------------------------------------- */

/****************************************************************************************
* 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;
	/****************************************************************************************
    background-image: url('http://www.vtutorials.com/clients/des/savesmc/graphics/borders.gif');
	****************************************************************************************/  
}
div#footer span#left
{
    padding-left: 20px;
    width: 55%;
    text-align: left;
}

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

	
	
/****************************************************************************************
* 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: 675px;
	text-align: center;
    font-family: "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    font-size: 16px;
	font-weight: bold;
	color: #3B3B3B;
    padding-left: 10px;
	padding-right: 10px;
	padding-top: 8px;
	padding-bottom: 2px;
}

/****************************************************************************************
* 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: 675px;
    text-align: justify;
    padding: 10px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* STORY IMAGE - CELL SPECS FOR IMAGE WITH BORDER SIZE AND COLOR
****************************************************************************************/
div.summary img
{
    padding: 0;
    background: #000;
    margin: 10px 10px;
	margin-top: 25px;
	border: 1px solid #000;
	height: 100px;
	width: 135px; 
	
/* MISC: =Story Image Specs (Don't Use for Blog Template as pic sizes vary)
	height: 100px;
	width: 135px; 
----------------------------------------------- */
}

/****************************************************************************************
* 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: 675px;
    text-align: justify;
    padding: 10px;
    font-family: "Verdana", Arial, Helvetica, Sans-Serif;
	font-size:11px;
    font-weight: bold;
	color: #2e373d;
}

/****************************************************************************************
* STORY IMAGE - CELL SPECS FOR IMAGE WITH BORDER SIZE AND COLOR
****************************************************************************************/
div.midsummary img
{
    padding: 0;
    background: #000;
    margin: 10px 10px;
	margin-top: 25px;
	border: 1px solid #000;
	height: 100px;
	width: 135px; 
	
/* MISC: =Story Image Specs (Don't Use for Blog Template as pic sizes vary)
	height: 100px;
	width: 135px; 
----------------------------------------------- */
}

/****************************************************************************************
* PHOTO - CELL SPECS: Use for both story and article tables
	Note: div. = a CLASS while div# = ID. The div# is the container (section).
	To customize each section, use a div. class. This is very modular and flexible!
****************************************************************************************/
div.photo
{
    width: 165px;
	height: 135px;
    padding: 2px 2px;    
}

/****************************************************************************************
* FOOTER LINKS - Note: I have removed the links until I fix the page jumping bug!!!
****************************************************************************************/

div#footer span a:active, a:visited,  a:link
{
       text-decoration: none;
       color: #990000;
       font-weight: bold;
}
div#footer span a:hover
{
       color: whitesmoke;
       text-decoration: underline;
	   font-weight: normal;
}
img
{
    border: none;    
    margin: 0;
    padding: 0;
}

/****************************************************************************************
* MAIN LINKS
****************************************************************************************/
a
{
    text-decoration: none;
    font-weight: bold; 
	color: #B72F2F;
}
a:visited
{
    text-decoration: none;
    font-weight: bold;
	color: #880000;   
}  
a:active
{
    text-decoration: none;
    font-weight: bold;
	color: #637683;   
}  
a:hover
{
    font-size:11px;
    background-color:#660000;
	font-weight: bold;
	text-decoration: underline;
	color: whitesmoke;
}

/****************************************************************************************
* INTRO PARAGRAPHS WITH IMAGES
****************************************************************************************/

div.project
{
    background-color: #000;
	border: 0px solid #838375;
    margin-top: 25px;
    height: auto;
    width: 600px;
    text-align: justify;
	padding: 5px;
}
div.project img
{
    padding: 0;
    background: #000;
    margin: 10px 10px;
}
div.pic
{
    width: 187px;
    padding: 2px 2px;    
}