/* Blue = #4345FB */
/* Orange = #FAC323 */

* { margin: 0; padding: 0; }

body { background: #ffffff url(images/body-back1.jpg) repeat-x;}

p 
{
    padding-top: 5px;
    padding-bottom: 5px;
}

img 
{
    border: none;
}

#mainWrapper 
{
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
    color: #000;
    border: solid 1px #eaeaea;
}

#topStrip
{
    width: 100%;
    height: 25px;
    background-color: #000;
    font-size: smaller;
    color: #fff;
}
#topStripLeft
{
    width: 29%;
    float: left;
    padding-left: 9px;
    padding-top: 4px;
    text-align: left;
}
#topStripCenter
{
    width: 30%;
    float: left;
    padding-top: 4px;
    text-align: center;
}
#topStripRight
{
    width: 39%;
    float: right;
    padding-right: 9px;
    padding-top: 4px;
    text-align: right;
}

#mainBanner 
{
    width: 100%;
    height: 75px;
    background-color: #4345fb;
    float: left;
}

#mainLogo 
{
    width: 225px;
    height: 75px;
    background-color: #000;
    float: left;
}
    
#mainMenu 
{
    width: 735px;
    background-color: #4345fb;
    float: left;
}

#primarySection 
{
    width: 100%;
    height: 200px;
    background-color: #000;
    clear: both;
}

#flashSubSection 
{
    width: 600px;
    height: 200px;
    color: #000;
    float: left;
    background-image: url(images/pgm_stat.jpg);
}
#flashSubSectionInside 
{
    /* Padding, margins, etc. */
}

#featureSubSection 
{
    width: 360px;
    height: 200px;
    float: left;
    background-color: #000;
}

#featureSubSectionInside 
{
    font-family: Arial;
    color: #fff;
    margin: 4px 8px 1px 12px; 
}

.featureContent 
{
    font-size: 8pt;
}

.featureContent h1
{
    font-size: 8pt;
    font-weight: normal;
    padding-top: 5px;
    padding-bottom: 5px;
}

#secondarySection 
{
    width: 100%;
    background-color: #fff;
}

#companyIntro 
{
    width: 190px;
    background-color: #fff;
    float: left;
}
#companyIntroInside 
{
    border: solid 1px #0066ff;
    background-color: #eaeaea;
    margin: 1px;
    padding: 5px;
    margin-top: 5px;  /* MD Reduced from 20px */
}
#companyIntroInside img 
{
    position: relative;
    left: 40%;
}
#ownerPic img
{
    /* Don't position this like other images in the DIV */
    position: relative;
    left: 0;
    top: 0;
}

#mainContent
{
    width: 580px;
    background-color: #fff;
    float: left;
}
#mainContentInside 
{
    padding-top: 0;  /* reduced from 10px so it lines up with left and right column tops */
    padding-bottom: 10px;
}

#rightCol 
{
    width: 190px;
    background-color: #fff;
    float: right;
}
#rightColInside 
{
    background-color: #eaeaea;
    border: solid 1px #0066ff;
    margin: 5px 1px 1px 1px; /* MD top margin reduced from 20px */
    padding: 5px 3px 25px 5px; /* Added the extra bottom padding in order to keep the "Read More..." tag within the DIV */
}
#rightColInside ul 
{
    list-style-type: disc;
    list-style-image: url(images/squares-sm-blue.gif);
    list-style-position: outside;
    font-size: 10pt;
    margin-left: 25px;
}
#rightColInside ul li 
{
    text-decoration: none; 
    text-align: left; 
    list-style: none url(images/squares-sm-blue.gif); 
    display: list-item; 
    margin: 0;
    padding: 3px 0 3px 0;
}

.otherServices a
{
    background: #000000 url(images/other-services.jpg) no-repeat center;
    width: 165px;
    height: 190px;
    margin: 8px 3px 25px 4px;
    display: block;
    text-decoration: none;
}

.otherServices a:hover 
{
    background: #000000 url(images/other-serv-hover.jpg) no-repeat center;
    width: 165px;
    height: 190px;
    display: block;
    text-decoration: none;
}

#portfolio 
{
    background-color: #eaeaea;
    border: solid 2px #0066ff;
    margin: 20px 1px 1px 1px;
    padding: 5px 3px 25px 5px;
}
#portfolio ul 
{
    list-style-type: none;
    font-size: 10pt;
    margin-left: 10px;
}
#portfolio ul li 
{
    text-align: left; 
    background: url(images/squares-med-blor.gif) 0 8px no-repeat;
    padding: 4px 5px 4px 18px;
}   
#portfolio a 
{
    text-decoration: underline;
    color: #000;
}

#portfolio a:hover 
{
    text-decoration: none;
    font-weight: bold;
    color: #4345FB;
}


#footer 
{
    width: 100%;
    height: 50px;
    clear: both;
    background-color: #4345FB;
}
#footerInside 
{
    padding: 5px;
}
.footerContent 
{
    font-size: 10pt;
    color: #fff;
    width: 33%;
    text-align: center;
    float: left;
}

#bottomStrip
{
    width: 100%;
    height: 25px;
    background-color: #000;
    color: #fff;
    clear: both;
}
#bottomStripLeft
{
    width: 29%;
    float: left;
    padding-left: 9px;
    text-align: left;
}
#bottomStripCenter
{
    width: 30%;
    float: left;
    text-align: center;
}
#bottomStripRight
{
    width: 39%;
    float: right;
    padding-right: 9px;
    text-align: right;
}


/* ***** Large content boxes  ***** */
.box
{
    margin-top: 5px; /* Reduced from 10px; */
    margin-bottom: 2px;
    clear: left;
}

.boxTop
{
    /* background: #ffffff url(images/box-top-562x30.gif) center top no-repeat; */
    background: #ffffff url(images/box-top-30x30.jpg) top left repeat-x;
}

.boxBottom
{
    /* background: #ffffff url(images/box-bottom-562x100.gif) center bottom no-repeat; */
    /* padding-top: 40px; */
    padding-top: 20px;
    border-bottom: solid 1px #C0C0C0;
}
.boxTitle 
{
    font-family: Geneva, Arial;
    font-size: 12pt;
    font-weight: bold;
    width: 520px;
    padding-top: 5px;
    margin-left: 9px;
}
.boxSubTitle 
{
    font-family: Geneva, Arial;
    font-size: 11pt;
    font-weight: bold;
    color: #666666;
    padding: 3px 0 3px 0;
}

a.boxMore 
{
    font-family: Geneva, Arial;
    font-size: 9pt;
    font-style: italic;
    color: #666;
    float: right;
    text-decoration: none;
    padding: 3px 20px 3px 0;
}

a.boxMore:hover 
{
    font-weight: bold;
    color: #4345FB;
}

a.boxMore img 
{
    position: relative;
    top: 2px;
    margin-right: 3px;
}

h2.boxTitle span
{
    background: transparent url(images/flag-tag.jpg) left center no-repeat;
    padding: 2px 0 0 40px;
    margin: 0 0 0 40px;
}

.boxText 
{
    /* Max width = 560px */
    width: 520px;
    margin-left: 9px;
    padding: 25px 20px 0 20px;
    /* border-left: solid 1px #000; */
    /* border-right: solid 1px #000; */
}

.box ul 
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding: 10px 15px 10px 25px;
}

.box ul li 
{
    padding: 4px 0 4px 0;
}

.box a 
{
    background: #ffffff url(images/list-bit.gif) no-repeat left center;
}

/* ***** Small Content Boxes ***** */
.boxSmall
{
    margin-top: 10px;
    margin-bottom: 6px;
    margin-left: 15px;
    width: 270px;
    float: left;
}

.boxTopSmallLeft
{
    /* background: #ffffff url(images/box-top-270x30.gif) left top no-repeat; */
    background: #ffffff url(images/box-top-30x30.jpg) left top repeat-x;
}

.boxBottomSmallLeft
{
    /* background: #ffffff url(images/box-bottom-270x50.gif) left bottom no-repeat; */
    padding-top: 40px;
}

.boxTopSmallRight 
{
    /* background: #ffffff url(images/box-top-270x30.gif) right top no-repeat; */
    background: #ffffff url(images/box-top-30x30.jpg) left top repeat-x;
}

.boxBottomSmallRight
{
    /* background: #ffffff url(images/box-bottom-270x50.gif) right bottom no-repeat; */
    padding-top: 40px;
}

.boxTextSmall
{
    width: 248px;
    margin-left: 0;
    padding: 25px 10px 0 10px;
    /* border-left: solid 1px #000; */
    /* border-right: solid 1px #000; */
}

.boxSmall ul 
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding: 10px 15px 10px 25px;
}

.boxSmall ul li 
{
    padding: 4px 0 4px 0;
}

.boxSmall a 
{
    background: #ffffff url(images/list-bit.gif) no-repeat left center;
}


/* ***** TOP NAVIGATION MENU ***** */
ul.topNav
{
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    float: left;
    width: 100%;
    height: 75px;
}

ul.topNav li 
{
    float: left;
}

ul.topNav a
{
    display: block;
    width: 126px;
    height: 65px; /* Along with the 5px top and 5px bottom padding, adds up to the 75px total height */
    line-height: 65px; 
    border-left: dashed 1px #0066ff;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    text-align: center;
    font-family: Geneva, Calibri, Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13pt;
    color: #fff;
}

ul.topNav a:hover
{
    font-weight: bold;
    color: #FAC323;
    background-image: url(images/rollover_1.gif);
}

/* ***** CONTENT PARAGRAPH STYLES ***** */
.contentPara 
{
    font-family: Arial, Sans-Serif;
    padding: 8px;
}

.emphasisPara 
{
    font-family: Arial, Sans-Serif;
    background-color: #fff;
    margin: 8px;
    padding: 8px;
    width: 80%;
    text-align: center;
    border: solid 2px #0066ff;
}

/* ***** Link styles ***** */
.lightLink:link 
{
    color: #000066;
}

a.lightLink:hover 
{
    color: #0000ff;
    font-weight: bold;
}
    
.lightLink:active 
{
    color: Gray;
    font-weight: normal;
}

.lightLink:visited 
{
    color: #0000ff;
    font-weight: normal;
}

/* @@@ TO DO: Hover stopped working some time after the introduction
   of the Master Page. Now, the only way it works is if I include
   the "a" prefix ON THE HOVER ITEM ONLY. If I remove the "a" prefix
   from the Hover item, it stops working. If I add the "a" prefix to
   the other items (link, active and visited) hover stops working.
   Very strange.  Investigate. */
.darkLink:link 
{
    color: #fff;
}

a.darkLink:hover
{
    color: #ffff00;
    font-weight: bold;
}

.darkLink:active 
{
    color: #eaeaea;
    font-weight: normal;
}

.darkLink:visited 
{
    color: #fff;
    font-weight: normal;
}

/* ***** Text styles (content only; not headings) ***** */
.textTiny 
{
    font-size: 7pt;
    font-weight: normal;
}

.textSmall 
{
    font-size: 10pt;
    font-weight: normal;
}

.textMedium 
{
    font-size: 12pt;
    font-weight: normal;
}

.textLarge 
{
    font-size: 14pt;
    font-weight: bold;
}

.textJumbo 
{
    font-size: 16pt;
    font-weight: bold;
}

.textEmphasis 
{
    font-size: larger;
    font-weight: bold;
}

/* ***** Image styles ***** */
.leftFloatingPic 
{
    float: left;
    margin: 8px;
}

.rightFloatingPic 
{
    float: right;
    margin: 8px;
}

.alignLeftText
{
    float: left;
    padding-left: 30px;
}

.alignRightText 
{
    float: right;
    padding-right: 20px;
}

/* ***** SPECIAL STYLES ***** */
.reachStyle 
{
    /* Used wherever the word "reach" appears */
    font-size: larger;
    font-weight: bold;
    color: #fac323;
}

.blueText 
{
    /* Used for special bold text, where needed */
    font-size: 10pt;
    font-weight: bold;
    color: #4345FB;
}


/* ***** WEB DESIGN PAGE STYLES ***** */
#wdBanner
{
    /* Web Design Page */
    width: 100%;
    height: 100px;
    background: #000000 url(images/web-design-banner.jpg) repeat-x center center;
    clear: both;
}
#wdSelection 
{
    width: 100%;
    height: 560px;
}
#wdLeftSide
{
    width: 540px;
    height: 560px;
    background-color: #fff;
    float: left;
}
.wdDescr
{
    width: 262px;
    height: 272px;
    background-color: #fff;
    margin: 4px;
}
.wdDescr ul 
{
    list-style-type: circle;
    margin: -195px 0 0 0;
    padding: 2px 5px 2px 25px;
    font-size: smaller;
    text-align: left;
}
#desc1 
{
    text-align: center;
    float: left;
}
#desc2 
{
    text-align: center;
    float: left;
}
#desc3 
{
    text-align: center;
    float: left;
}
#desc4 
{
    text-align: center;
    float: left;
}

#wdRightSide
{
    width: 420px;
    height: 560px;
    background-color: #fff;
    float: right;
}
#wdGraphic 
{
    width: 420px;
    height: 280px;
    background: #ffffff url(images/meeting.jpg) no-repeat;
    float: right;
}
.wdContactUs 
{
    background-image: url(images/contact-us-1.gif);
    background-repeat: no-repeat;
    height: 140px;
    width: 50px;
    position: relative;
    top: 60px;
    left: 5px;
    float: left;
    z-index: 100;
}
.wdContactUs:hover 
{
    border: solid 2px #fac323;
}

#wdExplain 
{
    width: 420px;
    height: 280px;
    float: right;
}

#wdFinePrint 
{
    height: 65px;
    background-color: #eaeaea;
    border-top: solid 2px #000;
    border-bottom: solid 2px #000;
    padding: 4px 10px 4px 10px;
    font-size: 9pt;
    font-style: italic;
    clear: both;
}

.wdSubTitle 
{
    font-family: Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #666666;
    padding: 3px 0 3px 0;
    clear: both;
}

.wdSubNote 
{
    font-family: Sans-Serif, Arial; 
    font-size: 8pt; 
    font-style: italic; 
    padding: 8px 8px 8px 15px; 
    color: #800000;
    text-align: left;
}
    
#wdLists {text-align:left; padding-left: 6px; border-top: solid 2px #000000;}
#wdLeftList {float: left; list-style-type: none; font-size: 10pt; padding-top: 5px;}
#wdRightList {list-style-type: none; margin-left: 25px; float: left; font-size: 10pt; padding-top: 5px;}


/* ***** SITE MAINTENANCE PAGE STYLES ***** */
#smBanner 
{
    /* Site Maintenance Page */
    width: 100%;
    height: 100px;
    background: #000000 url(images/site-maint-banner.jpg) repeat-x left center;
    clear: both;
}    

#smLeftSide
{
    width: 420px;
    background-color: #fff;
    float: left;
}

#smLeftSideInside 
{
    border-right: solid 1px #eaeaea;
}

#smGraphic 
{
    width: 420px;
    height: 280px;
    background: #ffffff url(images/maintenance.jpg) no-repeat;
    float: left;
}
.smContactUs 
{
    background-image: url(images/contact-us-1.gif);
    background-repeat: no-repeat;
    height: 140px;
    width: 50px;
    position: relative;
    top: 60px;
    left: 10px;
    float: left;
    z-index: 100;
}
.smContactUs:hover 
{
    border: solid 2px #fac323;
}

#smRightSide
{
    width: 540px;
    background-color: #fff;
    float: right;
}

#smRightSideInside 
{
    border-left: solid 1px #eaeaea;
}

.smSubTitle 
{
    font-family: Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #4345FB;
    padding: 8px 0 8px 0;
    clear: both;
}

.smContent 
{
    padding: 20px 15px 15px 15px;
}

.smContent ul 
{
    width: 80%;
    list-style-type: circle;
    list-style-image: url(images/squares-sm-blue.gif);
    margin: 0;
    padding: 2px 5px 2px 30px;
    font-size: smaller;
}

.smContent ul li 
{
    padding: 0 0 8px 15px;
}

/* ***** CONTACT PAGE STYLES ***** */
#ctPage 
{
    width: 960px;
    border-top: solid 2px #000;
    border-bottom: solid 2px #000;
}

#ctLeftSide
{
    width: 420px;
    background-color: #fff;
    float: left;
}

#ctLeftSideInside 
{
    border-right: solid 1px #eaeaea;
}

.ctSubTitle 
{
    font-family: Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #4345FB;
    padding: 8px 0 8px 0;
    clear: both;
}

.ctContent 
{
    padding: 20px 15px 15px 15px;
}

.ctContent ul 
{
    width: 80%;
    list-style-type: circle;
    list-style-image: url(images/squares-sm-blue.gif);
    margin: 0;
    padding: 2px 5px 2px 30px;
    font-size: smaller;
}

.ctContent ul li 
{
    padding: 0 0 8px 15px;
}

#ctRightSide
{
    width: 540px;
    background-color: #fff;
    float: right;
}

#ctRightSideInside 
{
    border-left: solid 1px #eaeaea;
}

.ctSubTitle 
{
    font-family: Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #4345FB;
    padding: 8px 0 8px 0;
    clear: both;
}

.ctContent 
{
    padding: 20px 15px 15px 15px;
}

.textBox
{
    font-family: Geneva, Arial, Sans-Serif;
    font-size: 10pt;
    color: #000;
    width: 225px;
}

.textBoxMulti 
{
    font-family: Geneva, Arial, Sans-Serif;
    font-size: 10pt;
    color: #000;
    width: 250px;
}

.dropDownMenu
{
    font-family: Geneva, Arial, Sans-Serif;
    font-size: 10pt;
    color: #000;
}

.button 
{
    background-image: url(images/squares-med-all.gif);
    background-repeat: no-repeat;
    background-position: left top;
    width: 200px;
}


/* ***** WEB HOSTING PAGE STYLES ***** */
#whBanner 
{
    width: 100%;
    height: 100px;
    background: #000000 url(images/web-hosting-banner.jpg) repeat-x left center;
    clear: both;
}    

#whLeftSide
{
    width: 360px;
    background-color: #fff;
    float: left;
}

#whLeftSideInside 
{
    border-right: solid 1px #eaeaea;
}

#whRightSide 
{
    width: 600px;
    background-color: #fff;
    float: right;
}

#whRightSideInside 
{
    border-left: solid 1px #eaeaea;
}

.whSubTitle 
{
    font-family: Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #4345FB;
    padding: 8px 0 8px 0;
    clear: both;
}

.whContent 
{
    padding: 20px 15px 15px 15px;
}

.whContent ul 
{
    width: 80%;
    list-style-type: circle;
    list-style-image: url(images/squares-sm-blue.gif);
    margin: 0;
    padding: 2px 5px 2px 30px;
    font-size: smaller;
}

.whContent ul li 
{
    padding: 0 0 8px 15px;
}

/* ***** OTHER SERVICES PAGE STYLES ***** */
#osBanner 
{
    /* Other Services Page */
    width: 958px;
    height: 98px;
    background: #000000 url(images/other-services-banner.jpg) repeat-x left center;
    clear: both;
}

#osLeftSide
{
    width: 480px;
    background-color: #fff;
    float: left;
}

#osLeftSideInside 
{
    border-right: solid 1px #eaeaea;
    padding: 10px;
    height: 100%;
}

#osSect1 
{
    width: 235px;
    margin: 1px;
    padding: 4px;
    float: left;
}

#osSect2 
{
    width: 205px;
    background-color: #eaeaea;
    border: solid 1px #000;
    margin-top: 15px;
    float: right;
}

#osSect3 
{
    width: 100%;
    padding: 15px 0 15px 0;
    text-align: center;
    clear: both;
}

#osRightSide 
{
    width: 480px;
    background-color: #fff;
    float: right;
}

#osRightSideInside 
{
    /* border-left: solid 1px #eaeaea;  Leave commented as long as the Left side div has greater height */
    padding: 10px;
    height: 100%;
}

#osSect4 
{
    width: 100%;
    padding: 15px 0 15px 0;
    text-align: center;
}

#osSect5
{
    width: 100%;
    background-color: #eaeaea;
    border: solid 1px #000;
    margin-bottom: 15px;
}

#osSect6 
{
    /* background: url(images/visual-basic-small.gif) right center no-repeat; */
    width: 100%;
}

.vbPic 
{
    margin-top: -90px;
    margin-right: 40px;
}

.excelPic 
{
    margin-top: -20px;
    margin-right: 2px;
}


/* ***** TERMS OF SERVICE PAGE STYLES ***** */
#stWrapper 
{
    margin-left: 50px;
    margin-right: 50px;
    padding: 15px 40px 15px 40px;
    font-family: Arial;
    font-style: normal;
}

.legalList 
{
    margin: 0 30px 0 30px;
}

.legalList ul li span 
{
    font-weight: bold;
}

/* ***** PRIVACY POLICY PAGE STYLES ***** */
#ppWrapper 
{
    margin: 25px 50px;
    padding: 10px 25px;
    clear: both;
}

/* ***** DATABASE REPORTING PAGE STYLES ***** */
#drWrapper 
{
    margin: 25px 50px;
    padding: 10px 25px;
    clear: both;
}

.drTitle 
{
    font-size: 14pt;
    font-weight: bold;
    color: #4345FB;
}

.drSmall 
{
    font-size: 11pt;
    font-style: italic;
    color: #666;
}

#resultList 
{
    margin-left: 10px;
    width: 100%;
}

/* ***** LOGIN PAGE STYLES ***** */
#loginMain 
{
    margin: 25px 50px;
    clear: both;
}

.loginTitle 
{
    font-size: 12pt;
    font-weight: bold;
    color: #4345FB;
}

.loginSubtitle 
{
    font-size: 11pt;
    font-style: italic;
    color: #666666;
}


/* ***** ALL OTHER STYLES ***** */
/* CSS for creating cool, Joomla-looking, warning paragraphs */
p.warn {
    background: #FFF7C0 url(images/warn.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #F7D229;
    border-bottom: 2px solid #F7D229;
}
p.alert {
    background: #FBEEF1 url(images/exc.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #FEABB9;
    border-bottom: 2px solid #FEABB9;
}
p.info {
    background: #F8FAFC url(images/info.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #B5D4FE;
    border-bottom: 2px solid #B5D4FE;
}

.ssList 
{
    /* General site list format */
    width: 80%;
    list-style-type: circle;
    list-style-image: url(images/squares-sm-blue.gif);
    margin: 0;
    padding: 2px 5px 2px 30px;
}

.ssListSmall 
{
    /* Same as ssList except for font size */
    width: 80%;
    list-style-type: circle;
    list-style-image: url(images/squares-sm-blue.gif);
    margin: 0;
    padding: 2px 5px 2px 30px;
    font-size: smaller;
}

.ssList.li , .ssListSmall li
{
    padding: 0 0 8px 15px;
}