/* CSS Document */

/* ---- GUIDE -----

WIDTH OF THE MAIN CONTENT AREA IS DETERMINED BY:
pageIntro
pageContent
AND
the textFrame class that wraps the Box_02 found in the CMS.

SPACE AROUND SIDEBAR IS DETERMINED BY:
insideSidebar ID that must wrap the object in the CMS

*/

/* ---- BODY LINKS LISTS ---- */

body {
margin: 0px;
background-image:url(images/v4_bgBody_alt.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

form {
margin: 0px;
}

p {
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 0px;
}

p.widget {
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 4px;
}


/* p.intro class if for big first letters and intro sentences in the main column
used on hyper what? page */

p.intro {
margin: 0px;
}

p.intro:first-letter {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size : 28px;
font-style: italic;
color:#666666; 
}

p.intro:first-line {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color:#666666;
font-style:italic;
}

p.tagline {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 16px;
font-weight:bold;
color:#666666;
}

/* substitute p.tagline with h1*/
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 16px;
font-weight:bold;
color:#666666;
}

p.tagline2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight:bold;
font-style:italic;
color:#666666;
}

/* substitute p.tagline2 with h2*/
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight:bold;
font-style:italic;
color:#666666;
}


/* 	ORANGE COLOR 
a:link {
color:#FF3300;
text-decoration:none;
font-weight:bold;
}
*/

/* BLUE COLOR */

a {
color:#0177B9;
}

a:link {
text-decoration:none;
font-weight:bold;
}

a:visited {
text-decoration:none;
font-weight:bold;
}

a:hover {
color:#999999;
text-decoration:none;
font-weight:bold;
}

a:active {
text-decoration:none;
}



ul {
margin-top: 10px;
}

ul a:link {

}

ul a:hover {

}

li {
	list-style: none;
	display: block;
	font-size:10px;
	line-height: 14px;
	}         /* Disable default bullet.*/
	
li a {

	
}

li a:hover {

}


/* ---- DIVs ---- */

#bgTop {

/* GRADIENT BACK */ 
background-image:url(images/v4_bgTop_177.jpg);
background-repeat:repeat-x;
height: 177px;

/*
background-color:#333333;
height: 150px;
*/

/* alt bg was 241 high*/

/*
height: 608px;
*/
}

#container {
/*background-color:#FFFFFF;*/
background-repeat:repeat;
width: 750px;
margin-left: auto;
margin-right: auto;
}

#header {
}

#subContainer {
margin-top: 20px;
/*
background-color:#FFFFFF;
background-image:url(images/v4_bgSilver.jpg);
*/

height: 22px;


}

#breadcrumbs {
/* THE FLOAT RIGHT CHANGES EVERYTHING!  IF YOU WANT THE WIDGET UNDER
THE BREADCRUMBS THEN YOU NEED TO MAKE IT FLOAT LEFT*/

/* Change back to float left to follow m-style*/

float:left;
height: 0px;
/*not sure you need this:
margin-top: 4px;
background-color:#0066CC;
width: 545px;
*/


text-align:center;
font-size:12px;
}

#breadcrumbs p {
font-weight:500;
color:#000000;
font-style:italic;
/*
margin-left: 36px;*/
}

#breadcrumbs a:link {
color:#666666;
font-weight:bold;
text-decoration:none;
}

#breadcrumbs a:visited {
color:#666666;
font-weight:bold;
text-decoration:none;
}

#breadcrumbs a:hover {
color:#FF3300;
font-weight:bold;
text-decoration:none;
}

#breadcrumbs a:active {
color:#FF3300;
font-weight:bold;
text-decoration:none;
}

#pageIntro {
margin-top: 0px;
margin-left: 20px;
width: 300px;
float:left;
text-align:left;
background-color:#00FF00;
}

#pageContent {
width: 530px;
margin-left: 20px;
float:left;
text-align:left;
}

#pageContent ul {
margin-top: 5px;
padding-left: 1.5em;
margin: 0;
}

#pageContent li {
	list-style-type:disc;
	display:list-item;
	font-size:10px;
	line-height: 14px;
	text-align:left;
	margin: 0;
}

/*This is narrow paragraph*/
#insidePageContent {
width: 340px;
background-color:#FFFFFF;
/*
TURNING THIS ON GIVES ROUNDED CORNERS LEFT AND RIGHT
background-image:url(images/pageContentTop.jpg);
background-position:top left;
background-repeat:no-repeat;
*/
}

#insidePageTextFrame {
margin-left: 20px;
margin-right: 20px;
}

#sidebar {
float: right;
text-align:center;

/*
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
width: 230px;*/
}


/*This is done to prevent the gap caused when the sidebar is empty*/
#insideSidebar {
margin-left: 10px;
margin-top: 0px;
}

#insideSidebarClients {
width: 160px;
overflow:hidden;
color:#666666;
font-size:10px;
font-weight:bold;
background-color:#FFFFFF
}

.sidebarTitle {
text-align:left;
margin: 5px;
font-weight:normal;
}



/*This is wide paragraph - NO SIDEBAR*/
#insidePageContent2 {
background-color:#FFFFFF;
/* TURNING THIS ON GIVES A ROUNDED CORNER ON THE RIGHT
background-image:url(images/pageContentRight.jpg);
background-position:top right;
background-repeat:no-repeat;
*/
}

/* THIS WAS CHANGED FROM 20 TO 15 IN ORDER TO MAKE THE PRICING AREA BETTER... WHAT ELSE DID IT AFFECT?*/
#insidePageTextFrame2 {
margin-left: 15px;
margin-right: 15px;
}


#footer {
text-align:left;
font-size:9px;
background-image:url(images/pageContentBottom.jpg);
background-position: bottom left;
background-repeat:no-repeat;
height: 25px;
margin-top: 0px;
}


#footerText {
margin-left: 24px;
}

#base {
clear:both;
margin-top: 10px;
font-size:9px;
color:#666666;
}


/* ----------------------------------- WIDGETS -------------------------------------- */

#widgets {
clear:left;
float:left;
width: 200px;
font-size:10px;
text-align:left;

/*
margin-top: 12px;
background-color:#000000;
*/

/*
background-repeat:repeat-y;
background-image:url(images/v4_bgDivider.jpg);
background-position:right;
*/
}

#widgets p {

}

#widgets ul {
width: 160px;
padding: 0.5em;
margin-left: 10px;
}

/* ------------------WIDGET SPACERS---------------------*/

/* space class is needed because .divVertical doesn't work with IE6
USED IN WIDGET DIV ABOVE EACH WIDGET */
.spacer {
height: 15px;
}

/*USED BETWEEN ITEMS IN WIDGETS AND THE BOTTOM OF THE WIDGET...FOR EXAMPLE, CLIENT LOGIN */

.spacerBottom {
height: 8px;
}


/* ----- NOTES ON WIDGETS FOR IE6 ----------
1. The width was defined at 196px instead of pinching the right margin in 4px.
This is because IE6 doesn't keep it in and the the white background pushes right
beyond the space.  
2. Also used with this is overflow:hidden
3.  The widgets are not responding to the spacing identifide by divVertical class.  May have to insert <br/> into the code.
*/


/* ------------------MASTER PROPERTIES---------------------*/

#clientQuote, #subNav, #clientLogin, #featureProject, #hyperRSS, #adwords, #location {
background-color:#FFFFFF;
background-image:url(images/widgetBottom3.jpg);
background-position:bottom left;
background-repeat:no-repeat;
}

/* ------------------CLIENT QUOTE---------------------*/

#clientQuote {
width: 196px;
overflow:hidden;
}

/* ------------------SUB NAV---------------------*/

#subNav {
margin-right: 4px;
}

.subNavMenu {
line-height: 16px;
}

.subNavMenuOn {
color:#666666;
font-weight:bold;
text-decoration:none;
}


/* ----------------CERTIFICATION-----------------------*/

#adwords {
width: 196px;
overflow:hidden;
text-align:center;
}

/* ------------------CLIENT LOGIN & SILVER BAR---------------------*/

#clientLogin {
color:#FF3300;
font-weight:bold;
margin-right: 4px;
}

/* this style is for the table in the client login box*/
.tableStyle1 {
font-size:10px;
margin-left:20px;
font-weight:normal;
color:#000000;
}

.tableStyle1 input {
width: 80px;
font-size:10px;
}

.tableStyle1 a {
font-weight:bold;
}

.loginSpace {
margin-left: 20px;
}

.loginBar, .silverBar {
color:#333333;
}

.loginBar {
background-image:url(images/v4_bgLogin.jpg);
background-repeat:repeat-x;
height: 22px;
font-weight:bold;
font-size:12px;
padding: 4px;
padding-left: 10px;
}

.silverBar {
background-image:url(images/v4_bgSilver.jpg);
background-repeat:repeat-x;
height: 22px;
font-weight:bold;
font-size:12px;
padding: 4px;
padding-left: 10px;
text-align:left;
/*margin-right:4px;*/
}

.notice {
color:#FF3300;
font-weight:bold;
}


/* ------------------FEATURED PROJECT---------------------*/

#featureProject {
width: 196px;
overflow:hidden;
font-size:9px;
}

.featureCenter {
text-align:center;
}

.featureText {
margin: 10px;
}

/* this style is for the featured project lists*/
.fPBullet ul {
/* --- TURN THIS ON TO CHECK THE UL BORDER
border: 1px solid black;
background-color:#00FF00;
*/
}

.fPBullet li {
list-style:none;
font-size:9px;
margin-left:20px;

}  

.fPBullet li a {
font-weight:normal;
}

.fPBullet li a:hover {
color:#000000;
}

/* ----------------NEWS READER-----------------------*/

#hyperRSS {
width: 196px;
overflow:hidden;
font-size:9px;
}
 
/* this style is for the news reader lists*/
.silverBullet ul {

list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em
font-size:9px;

/* --- TURN THIS ON TO CHECK THE UL BORDER
border: 1px solid black;*/

}

.silverBullet li {
margin-top: 10px;


/*
display:list-item;
font-size:9px;
list-style-image:url(images/bulletOrange3.gif);
list-style-position:outside;
margin-left: 20px;

	*/
} 

.silverBullet li a:link {
font-weight:normal;
color:#000000;
}


.silverBullet li a:visited {
font-weight:normal;
color:#000000;
}

.silverBullet li a:hover {
color:#0177B9;
font-weight:normal;
}

.silverBullet li a:active {
font-weight:normal;
color:#000000;
}

/*
Andrea's code that loops the News Reader links
echo "<li><a href="$link\" target="__top\">$title</a></li><br/>";
*/

/* ----------------ADDRESS-----------------------*/

#location {
margin-right: 4px;
}

/* ---- END WIDGETS ---- */


/* ----TRIFECTA ROLLOVER USED WITH MME SIDE BAR---- */
/* ----This is amazing!!!  Check it out here:  
http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml---- */

.cssnav, .cssnavIt
{
position: relative;
white-space: nowrap;
display: block;
width: 159px;
height: 348px;
margin: 0;
padding: 0;
}

.cssnav {
background: url(images/mmeOver.jpg) no-repeat;
}

.cssnavIt {
background: url(images/mmeOver_it.jpg) no-repeat;
}

.cssnav a, .cssnavIt a
{
display: block;
width: 159px;
height: 348px;
display: block;
}

.cssnav img, .cssnavIt img
{
width: 159px;
height: 348px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img, .cssnavIt a:hover img
{
visibility:hidden
}

.cssnav span, .cssnavIt span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

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

/* CONTACT FORM IDs and CLASSES */

#contactForm {
margin-left: 30px;
line-height: 14px;
/* Bear in mind that there are two <br /> between each input field*/
}

#contactForm input {
font-size:12px;
}

#contactForm textarea {
width: 300px;
height: 80px;
}

#submitAlert {
line-height: 12px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width: 400px;
}

.emailResponse {
color:#FF3300;
font-weight:bold;
}

/* ------------------------ CLASSES -------------------------------- */


.title {
font-style:italic;
}

/*same as breadcrumbs DIV*/
.title2 {
font-weight:bold;
/*orange color = FF3300*/
color:#FF3300;
}

.title3 {
/*this is for the name of the client in client quote*/
font-weight:bold;
color:#333333;
}

.floatRight {
float: right;
}

.titleGrey {
color:#666666;
font-style:italic;
font-weight:bold;
}

/* textFrame surrounds every box in every page in the scheletro...
Be sure you replace what was formerly the <p> tag with <div class="textFrame">*/

/* NOTE:  textFrame not needed in ALT design, because left margin
determined by margin of pageContent and right margin
determined by width of insidePageContent and insidePageContent2*/
.textFrame {
margin-left: 0px;
margin-right: 0px;
}



/* Where is this used? */
.spaceFrame {
margin: 10px;
}



/* ------ PORTFOLIO ----------- */

.hideScheda {
display:none;
}

.alignLeft {
text-align:left;
line-height: 14px;
}

.insideScheda {
background-image:url(images/bgPortMiddle.jpg);
}


.insideSchedaText {
margin-left: 15px;
margin-right: 15px;
text-align:left;
}

.schedaTitle {
color:#000000;
}

.clientStyle {
color:#000000;
}

.portSpacer {
height: 15px;
}

/* ----- END PORTFOLIO ------ */

/* PRICING CHARTS */

.price {
font-size:10px;
text-align: left;
}

.priceSmall {
font-size:9px;
}

.priceTitle {
font-size:12px;
font-weight:bold;
color:#666666;
}

.priceHeader {
font-weight:bold;
}

.price ul {
margin-top: 5px;
padding-left: 1.5em;
margin: 0;
}

.price li {
	list-style-type:disc;
	display:list-item;
	line-height: 14px;
	text-align:left;
	margin: 0;
}