/********************************************************************************************************************/
/* Last Updated: September 10, 2004  */
/* Author:  Andrew R Martinez, Web Developer */
/* Owner:  Macrologic, Inc.
/* Document Name: macro.css */
/* Description: This document is the Cascading Style Sheet (CSS) that is responsible for marking up the
				presentation of the entire Macrologic, Inc. site.  The use of this style sheet follows
				the standard set forth and encouraged by W3C standardizing body; separation of content
				from presentation. */
/********************************************************************************************************************/

body {
	text-align: center;
	position: relative;
	scrollbar-base-color: #990066;
	scrollbar-arrow-color: white;
	scrollbar-darkshadow-color: #990055;
}
/* search_title: used for search results only...contains a 'special user-friendly title' 
to be shown on search result; implemented 31 MAR 2005 */
#search_title {background-color: #ffffff; visibility: hidden; color: #ffffff; }

/* overriding how the h4 tags usually appears */
h4 {
	color: #000000;
	font-family: Arial, "Times New Roman", sans-serif, Helvetica;
	font-size: 13px;
}

/* macro_layout_container: This is the layout container for the entire site.  It contains other <DIV></DIV> tags*/
/*the relative positioning causes our overall desired layout to be centered. */
#macro_layout_container  {
	position: relative;
	top: 0px;
	left: 0px;
	width: 744px;
	height: 1100px;	
	text-align: center;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;		
}
/* strictly layout properties */
#macro_image_layout {
	background-color: #FFFFFF;
	position: relative;
	width: 744px;
	height: 147px;
	top: -10px;
	left: 0px;
} 


/* strictly layout properties -- applies to index.asp only*/
#date_container_layout {
	background-color: #FFFFFF;
	width: 700px;
	height: 20px;
	top: 200px;
	top: 190px;
	left: 538px;
	left: 10px;
	position: absolute;
	text-align: center;
	text-align: left;
	font-weight: bold;
	font-size: 12px;
}

/* strictly layout properties */
#macro_side_bar_layout {
	position: relative;
	background-color: #FF00F0;
	width: 170px;
	height: 725px;
	top: 280px;
	left: 550px;
	border: thin solid #990066;
}

/* strictly layout properties -- applies to index.asp, originally index.html */
#content_layer_layout {
	background-color: #FFFFFF;
	width: 475px;
	height: 400px;
	top: 225px;
	left: 0px;
	position: absolute;
	text-align: justify;
	font-size: 12px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, "Times New Roman";
	font-weight: normal;
	text-align: justify;
	margin-left: 0px	
}

/* strictly layout properties  -- applies to index.asp, originally index.html */
#macro_footer_menu_layout {
	position: absolute;
	background-color: #FFFFFF;
	width: 720px;
	width: 575px;
	height: 20px;
	top: 850px;
	left: 0px;
	text-align: left;
	font-weight: bold;	
}

/* all drop-menu/sub-menus will  automatically overlay content below it */
.drop_menu {
	display: none;
	position: absolute;
	overflow: auto;
} 

/* Billing id: modify this if you need to change the overall dimension of the Billing Menu drop down container */
.Billing {
	width: 250px;
}

/* RULE OF THUMB WHEN ALTERING THE EFFECTS OF LINKS..make sure it follows the sequence below */
/*	a:link {color: #FFFFFF};     unvisited link */
/*	a:visited {color: #FFFFFF}; visited link */
/*	a:hover {color: #FFFFFF};    mouse over link */
/*	a:active {color: #FFFFFF};    selected link */

/* drop_menuLinks class: modify this if you need to add, change, remove properties that offset the overall look/feel for the links containers*/
DIV.drop_menuLinks {
	background-color: #9F2955;
	padding: 4px;
	font-family: Arial, sans-serif, "Times New Roman", Helvetica;
	font-size: 11px;
	font-weight: bold;
	font-style: normal;
}	

/* drop_menuLinks a: modify ths if you need to alter the look/feel for unvisited links */
DIV.drop_menuLinks a:link {
	text-decoration: none;
	color: #FFFFFF;	
}
/* ditto for visited links */
DIV.drop_menuLinks a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
/* ditto for hover links */
DIV.drop_menuLinks a:hover {
	color: #990066;
	background-color: #FFF0F0;
}
/* ditto for active links */
DIV.drop_menuLinks a:active {
	color: darkblue;
}

/* body_text paragraphs: if you need to offset the margins for body text <p></p> do it here */
.body_text p  {
	margin-left: 10px;
}

/* footer_menu id:  if you need to add/change/delete footer menu container properties */
#footer_menu {
	position: absolute;
	width: 744px;
	height: 20px;
	background-color: #990066; 
	text-align: center;		
}

#macro_footer_popup_control a:link {
	background-color: #990066;
	color: #FFF0F0;
	text-decoration: none;	
}
#macro_footer_popup_control a:visited {
	color: #FFF0F0;
	background-color: #990066;
}
#macro_footer_popup_control a:hover {
	color: #990066;
	background-color: #FFF0F0;
	text-decoration: none;
}
#macro_footer_popup_control a:active {
	color: #99066;
	background-color: #FFF0F0;
}

#product_features {
	width: 244px;
	height: 300px;
	background-color: #990066;
	
}

/* applies to index.asp -- alter if you need to change the properties of the side bar quotation text */
.quotation {
	font-size: 10px;
	font-family: Verdana, "Times New Roman", sans-serif, Arial, Helvetica;
	font-weight: bold;
	text-align: justify;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 20px;
}

/* applies to index.asp */
.president_signature {
	margin-left: 8px;
	font-size: 12px;
	font-family: Serif, sans-serif, Verdana, "Times New Roman", Arial, Helvetica;
	font-weight: bold;
	text-align: left;	
}

/* strictly layout properties */
#macro_side_bar_layout {
	position: absolute;
	background-color: #FFF0F0;
	width: 170px;
	width: 240px;
	height: 225px;
	top: 320px;
	left: 500px;
	
}

#feature_products {
	position: absolute;
	width: 240px;
	top: 570px;
	left: 500px;
	background-color: #FFF0F0;	
	border: thin solid #990066;
	text-align: left;

}

.feature_products_title {
	font-family: Arial, Helvetica, "Times New Roman", sans-serif;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
}

.feature_container {
	padding: 6px;
	font-size: 10px;
}
.feature a {
	display: block;
	line-height: 13px;
	color: 	#990066;
	text-decoration: none;
	font-size: 10px; 
	font-family: Verdana, "Times New Roman", Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/*feature class: change this if you need to alter the appearance, behaviour etc of the links when hovered */
.feature  a:hover {
	display: block;
	color: #FFF0F0;
	background-color: #990066;	
}

.feature a:active {
	color: #3333ff;
	color: darkblue;
}
/* propeties that affect all product features layout */
.product_feature_description {
	font-family: Arial, Helvetica , "Times New Roman", Times, serif, sans-serif;
	background-color: #FFF0F0;
	text-align: left;
}

DIV.product_feature_heading {
	font-size: 14px;
	background-color: #990066;
	color: #FFF0F0;
}
/* the diamond shape bullets */
.bullet {
	color: #990066;
	padding: 2px;
}

.the_feature {
	font-size: 13px;
}

/* css properties that specifically renders some part of the produts pages */
DIV.product_layout_container  {
	position: relative;
	top: 0px;
	left: 0px;
	width: 744px;
	height: 650px;	
	text-align: left;
	background-color: #FFFFFF;
	overflow: visible;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;	
}

/* strictly layout properties */
DIV.macro_image_header_container {
	background-color: #FFFFFF;
	position: absolute;
	width: 744px;
	height: 85px; 
	top:  -12px;
	left: 0px;
}

/* strictly layout properties */
DIV.macro_main_menu_container {
	background-color: #FFFFFF;
	position: absolute;
	width: 744px;
	height: 25px;
	top: 80px;
	left: 0px;
	text-align: left;
}

/* main menu slices -- each menu buttons/submenus into respective DIVs */
/* .home_select: sets the absolute positioning and properties of the Home menu DIV */
DIV.home_select {
	position: absolute;
	left: 0px;
	top: 0px;
}
/* .about_select: sets the absolute positioning and properties of the About Us menu DIV */
DIV.about_select {
	position: absolute;
	left: 100px;
	top: 0px;
	width: 160px;
}
/* .product_select: sets the absolute positioning and properties of the Products Menu/submenu DIV */
DIV.product_select {
	position: absolute;
	top: 0px;
	left: 200px;
	width: 130px;
}
/* .bill_select: sets the absolute positioning and properties of the Customize Your Billing Menu/submenu DIV  */
DIV.bill_select {
	position: absolute;
	top: 0px;
	left: 300px;
	width: 250px;
}
/* .voip_select: sets the absolute positioning and properties of the VoIP/Internet Menu DIV */
DIV.voip_select {
	position: absolute;
	top: 0px;
	left: 485px;
}
/* .contact_select: sets the absolute positioning and properties of the Contact Us Menu DIV */
DIV.contact_select {
	position: absolute;
	top: 0px;
	left: 627px;
}
/* end main menu slices */

/* .date_container: sets the absolute positioning and properties of the Date displayed on all pages 
	NOTE: this class DOES NOT work with the index.asp page, please see, date_container_layout */
DIV.date_container {
	background-color: #FFFFFF;
	width: 170px;
	width: 700px;
	height: 20px;
	overflow: visible;
	top: 130px;
	top: 115px;
	left: 538px;
	left: 10px;
	position: absolute;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
}

/* .macro_link_ad: sets the absolute positioning and properties of the MacroLink Plus advertisement */
DIV.macro_link_ad {
	position: absolute;
	background-color: #FFFFFF; /* forcing the background to seamlessly blend in with the default white background */
	top: 150px;
	left: 500px;
	text-align: left;
	border: thin solid #FFFFFF;	/* forcing a phantom border for the MacroLink ad container */
}

/* .products_services_menu_container: set the absolute positioning and properties for the At A Glance...
	side box menu */
DIV.products_services_menu_container {
	position: absolute;
	background-color: #FFF0F0;
/*	background-image: url(pictures/mac_bkgrnd_3.gif); */
	width: 240px;
	overflow: visible;
	top: 365px;	
	left: 500px;
	border: thin solid #990066;
}

/* .macro_flagship_products: sets the relative positioning and properties for the Product Highlights 
	side box menu  */
DIV.macro_flagship_products {
	position: relative;
	position: absolute;
 	background-color: #FFF0F0;
	width: 240px;
	top: 245px;
	left: 500px;
	border: thin solid #990066;	
	overflow: visible;	
}

/* .macro_contact_info: sets the property for Macrologic's contact information on the macro_contact_form.asp page*/
DIV.macro_contact_info {
	position: absolute;
	background-color: #FFF0F0;
	width: 240px;
	top: 240px;
	border: thin solid #990066;
	left: 500px;
	overflow: visible;
	font-size: 11px;
	font-family: Arial, "Times New Roman", sans-serif, helvetica;
	font-weight: bold;
	text-align: center;
	color: #003366;	
}
/*overriding the feature_title div */
/*DIV.macro_flagship_products table {
	top: 260px;
	width: 240px;
}
*/
/* the horizontal line - separator - that divides the title from the links */
DIV.macro_flagship_products .separator {
	position: absolute;
	text-align: left;
	width: 240px;
	top: 10px;
	left: 0px;
}
/* strictly layout properties -- main content, excludes menus,etc -
 affects products page and all other pages related to the products page */
DIV.content_layer_layout {
	position: absolute;
	width: 475px;
	top: 140px;		
	left: 0px;	
	background-color: #FFFFFF;
	text-align: justify;
	font-size: 12px;
	font-family: Verdana, sans-serif, Geneva, Arial, Helvetica;
	font-weight: normal;
	margin-left: 0px;
/*	margin-bottom: auto;	 */
	overflow: visible;
}


/* the bottom ring menu(footer menu) layout properties */
DIV.product_footer_menu_layout {
	position: absolute;
	background-color: #FFFFFF;
	width: 575px;
	height: 20px;
	top: 650px;
	left: 0px; 
	text-align: left;
	font-weight: bold;
}

/* the bottom ring menu(footer menu) active links */
DIV.product_footer_menu_layout a {
	text-decoration: none;
	color: #990066;
}

/* the bottom ring menu(footer menu) hovered links */
DIV.product_footer_menu_layout a:hover {
	text-decoration: none;
	color: #990066;	
	background-color: #FFF0F0;
}

DIV.picture_container_2 img {
	position: relative;
	background-color: #FFFFFF;
	padding-right: 7px;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-top: 0px;	
}

/* this separator is slightly different that the previous which affects only the index.asp */
DIV.separator {
	position: absolute;
	top: 12px;
	left: -2px;
	color: #990066;
	height: 3px;
	width: 243px;
	text-align: left;
}


DIV.billing_reasons {	
	background-color: #FFFFFF;
}

DIV.internet_bill {
	position: relative;
	left: 5px;
	top: 5px;
	width: 350px;
	background-color: #FFFFFF;
	
}

DIV.product_feature_description {
	background-color: #FFFFFF;
	text-align: left;
	positon: relative;
}

DIV.bill_presentment_features {
	text-align: center;
	position: relative;
}

DIV.bill_presentment_features img {
	text-align: center;
}

DIV.bill_presentment_features  p.body_text {
	text-align: justify;
}

/* macro_contact_form.asp css properties */
/* style issues related specifically to macro_contact_form.asp */
DIV.forms_content_layer_layout {
	background-color: #FFFFFF;
	border: thin solid #990066;	
	width: 500px;
	height: 1069px;
	top: 225px;
	top: 150px;	
	left: 0px;
	position: absolute;
	width: 490px;
	margin-left: 0px;
}

DIV.contact_info {
	font-size: 12px;
	font-family: "Times New Roman", sans-serif, arial, helvetica;
	font-weight: bold;
}

/* this is DIV 1 of 8 inside the macro_contact_form.asp  */
DIV.macro_contact_container {
	position: relative;
	background-color: #FFFFFF;
	top: 10px;
	left: 5px;
	width: 480px;
	height: 170px;
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, Sans-serif;
}

/* this is DIV 2 of 8 inside the macro_contact_form.asp  */
DIV.macro_hear_aboutUs_container {
	position: absolute;
	background-color: #FFFFFF;
	top: 220px;
	width: 235px;
	height: 200px;
	left: 5px;
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, Sans-serif;
	overflow: visible;
}

/* this is DIV 3 of 8 inside the macro_contact_form.asp  */
DIV.macro_primary_bus_container {
	position: absolute;
	background-color: #FFFFFF;
	top: 220px;
	width: 235px;
	height: 200px;
	left: 250px;	
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, Sans-serif;	
}

/* this is DIV 4 of 8 inside the macro_contact_form.asp  */
DIV.macro_area_interest_container {
	position: absolute;
	background-color: #FFFFFF;
	top: 420px;
	width: 235px;
	height: 200px;
	left: 5px;	
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, Sans-serif;		
}

/* this is DIV 5 of 8 inside the macro_contact_form.asp  */
DIV.macro_would_you {
	position: absolute;
	background-color: #FFFFFF;
	top: 630px;
	width: 235px;
	left: 250px;	
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, Sans-serif;	
}

/* this is DIV 6 of 8 inside the macro_contact_form.asp  */
DIV.macro_your_need {
	position: absolute;
	background-color: #FFFFFF;
	top: 500px;
	left: 250px;
	width: 175px;
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, Sans-serif;	
}

/* this is DIV 7 of 8 inside the macro_contact_form.asp  */
DIV.macro_other_comment {
	position: absolute;
	background-color: #FFFFFF;
	top: 875px;
	left: 5px;
	width: 300px;
	font-size: 12px;
	font-family: Arial, "Times New Roman", Verdana, Serif, sans-serif;
}

/* this is DIV 8 of 8 inside the macro_contact_form.asp */
DIV.form_buttons_container {
	position: absolute;
	top: 1019px;
	left: 100px;
	font-family: Arial, "Times New Roman", Verdana, Serif, sans-serif;
	width: 375px;
	background-color: #FFFFFF;
}

/*here we are overriding the actual positioning of the footer menu */
DIV.macro_contact_form_footer_menu {
	position: absolute;
	top: 250px;
}
/* END OF style issues related specifically to macro_contact_form.asp */

/* here is the divider symbol (pipe) for the footer menu -- applies across the board */
.pipe {
	color: #000000;
	padding: 5px;
}

#trademark_info {
	position: absolute;
	top: 700px;
	text-align: center;
	font-size: 10px;
	font-family: sans-serif, "Times New Roman", Arial, Serif, Verdana;
	left: 200px;
}

DIV.visit_counter {
	position: absolute;
	top:1140px;
	left: 220px;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
}