/************************************************* Design: Potential 4 Success css style sheet Author: Barry Harman Version: 2.1 Date created: Dec 2008 Last update: 15 November 2009 **************************************************/ /* =Textual */ /*** Sets body, text and main div attrbutes ***/ body {font-family: Verdana, Garamond, Helvetica; background: white; text-align:center; background-color: #FFEBCD; } h1, h2, h1.home { font-family: Verdana, Garamond, Helvetica; } h1 { margin-bottom: 0px; margin-left: 20px; font-size: 100%; color: #303030; font-weight: bold; } /*sets main content headings */ h1.aboutus { margin-top: 5px; text-align: justify; margin-left: 325px; font-size: 100%; color:#303030; font-weight: bold; } /*sets main content headings */ h1.home {margin-top: 5px; margin-bottom: 0px; text-align: left; margin-left: 20px; font-size: 100%; color: #303030; font-weight: bold; } /*sets main content headings */ h2.banner_address { font-size: 65%; font-weight: bold; text-align:center; } h2 {margin-top: 10px;margin-bottom: 0px; margin-left: 20px; text-align: justify; font-size: 80%; color: #202020; font-weight: normal; }/*sets secondary content headings and bullet lists*/ p {margin-top: 10px; margin-bottom: 0px; margin-left: 20px; text-align: justify; font-size: 80%; color: #202020; } p.margins { margin-top: 0px; margin-bottom: 0px; margin-left: 2px; margin-right: 2px; text-align: left; font-size: 100%; color: #202020; } .banner { position:relative;border-style:none; } .Logo1 {border: 0px; width: 70px; height: 74px } #Content1 { float: left; position:relative; display:inline; } #Content2 { float: left; position:relative; display:inline; } #Address{ float:left; display:inline; margin-left: 10px; margin-right:5px; width:146px; margin-top: -15px;} #MainNav { float: left; display:inline; margin-left: 25px; margin-right: 5px; width: 131px; } #ContentBannerHead { position:relative;float: left; margin-top: -18px; width: 750px; height: 132px; border-style: none; text-align: center; background-position: left; background-repeat:no-repeat; background-image:url('../Icons/vertical.gif'); padding-left: 30px; } #ContentMain { float: left; padding-top: 10px; margin-top: -1px; width: 760px; height: 800px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif');padding-left: 20px; } #ContentAboutUs { float: left; padding-top: 20px; margin-top: -1px; width: 750px; height: 570px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif');padding-left: 30px; } #ContentLogin { float: left; padding-top: 20px; margin-top: -1px; width: 723px; height: 450px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left: 30px; } #ContentLibraryLink { float: left; padding-top: 20px; margin-top: -1px; width: 723px; height: 450px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left: 30px; } #ContentContactUs { float: left; padding-top: 20px; margin-top: -1px; width: 723px; height: 450px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left:30px; } #ContentTC { float: left; padding-top: 20px; margin-top: -1px; width: 723px; height: 515px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left: 30px; } #ContentPrices { float: left; padding-top: 20px; margin-top: -1px; width: 770px; height: 800px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left: 30px; } #ContentLinks { float: left; padding-top: 20px; margin-top: -1px; width: 723px; height: 800px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left:30px; } #ContentBenefits { float: left; padding-top: 20px; margin-top: -1px; width: 775px; height: 800px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left:30px; } #ContentServices{ float: left; padding-top: 20px; margin-top: -1px; width: 723px; height: 560px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left:30px; } #ContentTestimonial { float: left; padding-top: 20px; margin-top:-1px; width: 723px; height: 450px; background-position: left;background-repeat:no-repeat;background-image:url('../Icons/vertical.gif'); padding-left:30px; } #SecNavWrapper { width:1000px; } #SecNavIndent { float:left; display:inline; width:171px; margin-left: 9px; margin-bottom: 0px; background-position: right; background-repeat:no-repeat; background-image:url('../Icons/vertical.gif');font-size: 80%; font-weight: normal; border-top: 2px solid gray; } #SecNav { float: left; display:inline; text-align: center; width:818px; margin-left: -10px; margin-right: 0px; margin-bottom: -2px; font-size: 80%; font-weight: normal; border-top: 2px solid gray; } #Footer1 { margin-left: 8px; margin-right: 11px; color:#202020; text-align: center; font-size: 80%; font-weight: bold; border-top: 2px solid gray; } #Footer2 { margin-left: 20px; margin-right:30px; color: #202020; font-size: 70%; text-align: center; font-weight: normal; } #Footer3 { margin-left: 20px; margin-right:30px; color: #202020; font-size: 70%; text-align: center; font-weight: normal; } div.box1 { margin: 0 auto; text-align: center; } div.box2 { margin: 0 auto; text-align: center; } /* =Boxes */ /*** Sets up 2 round corner content boxes, top for babnner and bottom for content ***/ /*Defines the top of a curved corner box for the page banner */ #box1 { width:1005px; margin: 0 auto; text-align:left; } .boxtop1 { /*make this the same size as the top image*/ display: block; width: 1000px; height: 28px; margin-left:1px; /*set the image as a background*/ background-position: left top; background-repeat:no-repeat; background-image:url('../Icons/top.gif'); padding-bottom: 0px} /*Defines the bottom of a curved corner box for the page banner */ .boxbottom1 { /*make this the same width as the bottom image*/ /*don’t set the height as this needs to be flexible*/ display:block; height: 130px; width:1000px; /*set the image as a background*/ background-position: left bottom; background-repeat:no-repeat; background-image:url('../Icons/bottom.gif') ; padding-bottom: 0px; margin-left:1px; } /*Defines the contents of the curved corner page banner box*/ .maincontent1 { display:block; /*align the main content nicely*/ padding-left:20px; padding-right:20px; } /*Defines the top of a curved corner box for the page contents */ .boxtop2 { /*make this the same size as the top image*/ display:block; width:1000px; height:30px; margin-left:1px; background-image:url('../Icons/top.gif'); background-position:left top; background-repeat:no-repeat; } /* hide from IE-mac \*/ * html .boxtop2{margin-left: 1px; } /* end hide */ .preDivider { /*puts a visual divider in*/ float:left; padding-top: 0px; margin-top:9px; width:185px; background-position:161px; background-repeat:no-repeat; background-image:url('../Icons/vertical.gif'); } .postDivider { /*sets up space after visual divider*/ display:inline; width: 100%; margin-top:6px;} .Spacer { /*puts a visual divider in*/ background-repeat:no-repeat; background-image:url('../Icons/vertical.gif'); } /*Defines the bottom of a curved corner box for the page contents */ .boxbottom2 { /*make this the same width as the bottom image*/ /*don’t set the height as this needs to be flexible*/ width:1000px; /*set the image as a background*/ background-position: left bottom; background-repeat:no-repeat; background-image:url('../Icons/bottom.gif'); padding-bottom:1px; margin-left:1px; margin-top:-3px; } /* =Specific */ /*** Sets login table attributes ***/ table.logdetails { margin-left:auto; margin-right:auto; border-style:ridge; border-color:#cb8700; } input.logCell { border-style:ridge; border-color:#cb8700; } /*** Sets focus area of forms light orange,brown ***/ input:focus, textarea:focus { background-color:#ffd790; border: 1px solid #ffaf40; } /*** Buffer between content area and footer ***/ .clear { clear:both; } /* Clears the float assigned to the BR tag */ .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } /*** Sets list attrbutes: bulets, colour and word wrap ***/ .bullet { list-style: outside; list-style-image: url("../Icons/P4Sbird2.gif");} .bullet li {font-size: 80%; margin-left: -40px; margin-right: -40px;margin-bottom: 0px; } .bulletB { list-style: outside; list-style-image: url("../Icons/P4Sbird2.gif"); } .bulletB li { font-size: 100%; margin-left: -45px; margin-right: -35px;margin-bottom: 0px; } /* =Table*/ /*** Sets Prices table attributes ***/ table#prices1 { margin-top: 0px; padding-top: 0px; margin-left: auto; margin-right:auto; width:100%;line-height:100%; border:0;} td p.special { font-size: 100%; margin-top: 3px; margin-bottom: 3px; text-align: center; font-weight: bold; } td.Cell { font-size: 80%; width: 50%; border-style:ridge; border-color:#cb8700; background-color: #FFDD90; } /*** Sets Single photo and Home page Gallery Link and Table Attributes ***/ table#HomePageSinglePhoto { float:right; margin-left: 20px; margin-right: -20px; margin-top: 5px; margin-bottom: 20px; height: 146px; width: 113px; border-style: inset; background-color: #000000; } .HomePagePhoto{ border-style:inset;border-color:#997000;padding:10px 10px 10px 10px; } .HomePagePhotoInset{ border:solid 1px;border-color:#997000; } /* =Links*/ #ContentLibraryLink a:link { text-decoration: none; color: black; font-size: 100%; border: 0; } #ContentLibraryLink a:visited { text-decoration: none; color: #997000; font-size: 100%; border: 0; } #ContentLibraryLink a:hover, a:active { text-decoration: none; color: #cb8700; font-size: 100%; } #LinksCLF a:link { text-decoration: none; color: #cb8700; font-size: 100%;font-weight: bold; } #LinksCLF a:visited { text-decoration: none; color: #cb8700; font-size: 100%;font-weight: bold; } #LinksCLF a:hover, a:active { text-decoration: none; color: #997000; font-size: 100%;font-weight: bold; } /*** Sets Contact us page links attributes ***/ #LinksCU a:link { text-decoration: none; color: black; font-size: 100%; } #LinksCU a:visited { text-decoration: none; color: #997000; font-size: 100%; } #LinksCU a:hover, a:active { text-decoration: none; color: #cb8700; font-size: 100%; } /*** Sets Prices page links attributes ***/ #LinksP a:link { text-decoration: none; color: #cb8700; font-size: 100%; } #LinksP a:visited { text-decoration: none; color: #997000; font-size: 100%; } #LinksP a:hover, a:active { text-decoration: none; color: #cb8700; font-size: 100%; font-weight: bold; } /*** Sets T&C page links attributes ***/ #LinksTC a:link { text-decoration: none; color: #cb8700; font-size: 100%; font-weight: bold; } #LinksTC a:visited { text-decoration: none; color: #cb8700; font-size: 100%; font-weight: bold;} #LinksTC a:hover, a:active { text-decoration: none; color: #997000; font-size: 100%;font-weight: bold; } /*** Sets link page attributes ***/ #ContentLinks a:link { text-decoration: none; color: black; font-size: 100%; } #ContentLinks a:visited { text-decoration: none; color: #cb8700; font-size: 100%; } #ContentLinks a:hover, a:active { text-decoration: none; color: #997000; font-size: 100%; font-weight: bold; } /*** Sets footer link attributes ***/ a.links:link { text-decoration: none; color: black; font-size: 90%; } a.links:visited { text-decoration: none; color: #cb8700; font-size: 90%;font-weight: normal; } a.links:hover, a.links:active { text-decoration: none; color: #997000; font-size: 90%; font-weight: normal; } a.linksp:link { text-decoration: none; color: #cb8700; font-size: 90%; } a.linksp:visited { text-decoration: none; color: #cb8700; font-size: 90%;font-weight: normal; } a.linksp:hover, a.links:active { text-decoration: none; color: #997000; font-size: 90%; font-weight: normal; } /* =MainNav*/ /*** Sets attributes for side navigation button pull down vertical menu ***/ #dropmenu { padding: 0; margin: 0; list-style: none; font-family: verdana, Arial, Helvetica, sans-serif; } /*Aligns button text centre and black, removes bullets, sets spacing. */ #dropmenu a { text-align: center; display: block; text-decoration: none; font-size: 95%; color: black; height: 20px; /*sets height of pull down menu block */ width: 116px; /*sets width of pull down menu block */ padding: 4px 4px 0px 0px; background-image: url(../Icons/buttonA.gif); background-repeat: no-repeat; } /* Sets hovered button image */ #dropmenu ul li a:hover {background: url('../Icons/buttonB.gif') no-repeat;} /* Changes the icon when moused over */ #dropmenu li:hover a { background: url('../Icons/buttonB.gif') no-repeat; font-weight: bold; } #dropmenu a:active,#dropmenu a:focus { background: url('../Icons/buttonB.gif') no-repeat; font-weight: normal; } /* Set the Sub-Menu UL to be visible when its associated Root-Level link is moused over. */ #dropmenu li:hover ul { display:block;} /* Sets the Text color of the Sub-Level links when the Root-Level menu items are moused over. */ #dropmenu li:hover ul a { display:block; height: 20px; /*sets height of pull down menu block */ width: 100px; /*sets width of pull down menu block */ color: black; font-weight: normal; padding:0px 0px 0px 0px; text-align: center; margin-left: 10px; margin-top: -1px; background: url('../Icons/drop_button1.gif') no-repeat; color:black!important; } #dropmenu ul .top a:hover { font-style: italic;background: url('../Icons/drop_button2.gif') no-repeat; color:black!important; } #dropmenu ul .bot a:hover { font-style: italic;background: url('../Icons/drop_button2.gif') no-repeat; color:black!important; } #dropmenu li { width: auto; } #nav-home { padding-bottom: 20px; } #nav-about-us{ padding-bottom: 20px; } #nav-contact-us { padding-bottom: 20px; } #nav-terms { padding-bottom: 20px; } #nav-client { padding-bottom: 20px; } /* =SingleButton*/ /*** Sets attributes for single link buttons ***/ table.button_position { padding-left: 20px; margin-left: auto; margin-right: auto; } /* Bullets off. Padding and margins zeroed*/ #buttons { padding: 0px; margin: 0px; list-style: none; font-family: verdana, Arial, Helvetica, sans-serif; } /*Aligns button text centre and black, removes bullets, sets spacing. */ #buttons a{ text-align: center; display: block; text-decoration: none; font-size: 95%; color: black; height: 22px; /*sets height of pull down menu block */ width: 100px; /*sets width of pull down menu block */ padding: 0px 0px 0px 0px; background-image: url(../Icons/Single_Button1.gif); background-repeat: no-repeat; } /* Sets hovered button image */ #buttons ul li.topmenu a:hover {background: url('../Icons/Single_Button2.gif') no-repeat; } /* Changes the icon when moused over */ #buttons li:hover a, #buttons a:focus, #buttons a:active { background: url('../Icons/Single_Button2.gif') no-repeat; } /* Set the Sub-Menu UL to be visible when its associated Root-Level link is moused over. */ #buttons li:hover ul { display:block;} /* Sets the Text color of the Sub-Level links when the Root-Level menu items are moused over. */ #buttons li:hover ul a { color: black; } #buttons ul a:hover { background: url('../Icons/Single_Button2.gif') no-repeat;color: black!important; } #buttons li { width: 100px; } #nav-client-login { padding-bottom: 15px; } #nav-benefits { padding-bottom: 15px; } #nav-services { padding-bottom: 15px; } #nav-prices { padding-bottom: 15px; } #nav-print-prices{ padding-bottom: 15px; } #nav-TCs{ padding-bottom: 15px; }