Button Linking Help....

Hey guys!
I am doing some work for a friend at the moment, they have a FLASH header they have brought from a template site... it can be found here:
http://iforest.co.uk/flash/ (with a link to the source code....)
What I am struggling with (I have changed images and the text) But I cant make each of the buttons or areas HyperLinked... I want each to act as a button so they can browse their site. Can anyone please help? I have tried making the images buttons, and setting the action as GetURL etc I have also tried linking the text in the properties section, but it just wont work!
Any help would be greatly appreciated!
Thanks
C

Hi,
In the pic_splash movieclip, Layer 5 at the last key frame(35) please add the following actionscript code.
stop();
this["pic"+1].onRelease = function () {
   getURL("http://www.adobe.com" , "_blank" );
this["pic"+2].onRelease = function () {
   getURL("http://www.google.com" , "_blank" );
this["pic"+3].onRelease = function () {
   getURL("http://www.nokia.com" , "_blank" );
If you add the above lines of code, you can be able to navigate to the corresponding URL's on click.
Thanks

Similar Messages

Dreamweaver simpleviewer multiple galleries button links help

I am trying to do this:
http://www.airtightinteractive.com/simpleviewer/examples/multiple_galleries/gallery1/index .html
and here is another good example
http://www.designhousestudios.co.uk/sampleportfoliogallery/sampleportfolio.html
on my page here:
http://peachtree-designs.com/
This seems to be the code that pertains to the different slideshows (this is from the example webpage of how I want it to be):
<div id="header" >
<a href = "../gallery1/index.html">Gallery 1</a> | <a href = "../gallery2/index.html">Gallery 2</a>
</div>
<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
<script type="text/javascript">
The "Simple" Viewer slideshow gives instructions on how to simply embed and I have done that successfully, a link is here in case you want to check it out:
http://www.airtightinteractive.com/simpleviewer/examples/embedded/
I have this working fine but would like to embed several galleries. The instruction page of "simple"viewer says to create multiple galleries you just need to:
" ...To create multiple SimpleViewer galleries, make a copy of the whole SimpleViewer gallery folder for each gallery. Create your individual galleries as normal. You can now create a menu page that links to the index.html page in each sub-folder. Here is an example that contains a menu to navigate between 2 SimpleViewer galleries."
My confusion lies in what the heck a menu page is. I have ignored this all together and tried looking at the code from pages that give examples. especially the page that gives a download of html.
But I don't understand how to link the buttons in Dreamweaver to create different slideshows. I've put the four slideshow folders (print, illustration, logo, design) into my main HTML page. I assume the solution is to put the code mentioned above in for each slideshow/gallery .. reference each gallery by my folders names but then somehow make the DW buttons link to those folders.
I'll keep poking around at this and see if I can figure it out, but any input, advice or help would be SO very appreciated. If you would speak in laymans terms I'd appreciate it, I know flash well but am new to dreamweaver and not very good at codeing though I manage.
Thanks so much in advance, sorry this is so long winded.
sharon

I'm actually still having a problem with the individual galleries linking to the swf. Here's an explination and I'm attaching a snapshot of the file folder structure and the html's:
Thanks for responding :) I feel like I'm almost there, been struggling with this for a week.
my site is here:
http://peachtree-designs.com/web.html
I am going with a different approach, instead of trying to link the graphics from within each gallery folder I am instead placing each gallery html outside the individual gallery folders in my root folder ... then trying to link the main html page to each html gallery file, and have each gallery file link/see the swf galleries within the folders.
I have made separate gallery folders for each gallery, print, logo ect is in it's separate folder in the root folder of my website.
In the main root folder I have the index.html *plus* I've put each galleries html file *outside* it's folder but directly in the root folder, so the main html webpage file can link (with the buttons) to each gallery html in the root folder.
Problem is getting the galleries html's to connect/link to the swf gallery in each gallery folder (within the root folder) (I'd put the html's directly in it's gallery folder but then the graphics links break). "gallery not found" is what I get and I'm not sure how to do this. In the code of each gallery html is this:
<td valign="top"><script type="text/javascript">
var fo = new SWFObject("illustrations/viewer.swf", "viewer", "500", "500", "8", "#c5bdb2");
fo.write("flashcontent");
</script></td>
so the gallery html's in the root folder *should* be directed to each swf in it's gallery folder: illustrations/viewer.swf .. print/viewer.swf ... etc ... but it's not working.
I'm going to try to just attach my whole site in case someone can take a look and tell me what's wrong. It's large but I'm desperate and it's hard to explain.

Photoshop button links- help!

I created several different photoshop buttons that link to different pages in my website. I had never had an issue with them until I started moving the physical location of the buttons around on the page. In preview mode, all links work perfectly. However when I publish my work, the buttons are linked to all the wrong pages (they usually link to the page that used to be in that physical location).
However I've double checked and they are all linked properly. I have no idea what is wrong.
Here is my site. if you click on the buttons in the bottom row you will see what I mean.
http://www.maddienieman.com/
Please help me,
MN

clear your cache. they all work for me

Flash button link help

i have a flash website template where i have done all the editing for my website but now on profile page i create a button and i want when i click on that button that button will take me on another page which is already in that template, but i can't create that. Please assit me asap.
I have create that button on "symbol 25 copy 2" and i want that button take me on "symbol 25 copy 4"

What will people who do not have Flash installed do when they
come to your
page? How about the search engines?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Andy" <[email protected]> wrote in message
news:e50thk$hjd$[email protected]..
> In DW if I hit the "Play" button in Properties and then
click the Flash
> button, the link works but will not work in IE6!!!???
>
>
> "Andy" <[email protected]> wrote in message
> news:e50rde$fde$[email protected]..
>> Thanks for your reply, Alan.
>>
>> That is what I did put in the link box but for some
reason the link will
>> not work.
>> I put
http://www.netspace.net.au in
the link box, then saved my work and
>> viewed it in IE6, but it will not connect me to the
site when I click on
>> the button. If I create a hyperlink using a word, eg
Netspace, it works
>> OK.
>> I'm using Dreamweaver 8.
>>
>> Andy
>>
>> "Alan" <[email protected]>
wrote in message
>>
news:C0995965.28F809%[email protected]..
>>> In the Flash Button dialog box, in the url or
link box, type the full
>>> url
>>> address including the
http://
>>>
>>>
http://www.example.com
>>> instead of
>>> www.example.com
>>>
>>> You have to do this for all external links,
whether using flash buttons
>>> or
>>> regular links.
>>>
>>>
>>
>>
>
>

Rollover Button Link HELP please

I am trying to create a button that does this (HOME in the top left side):
http://fromtherivercollective.com/Blog/
for this site:
http://fromtherivercollective.com
Is this possible in iweb? if not with shapes can I use images? I am not getting anywhere and am so frustrated. Any help is much appreciated. Thanks!

Here's an example of something similar: rollover drop down. The code used is included.
And another type: Color fading menu/navbar based on jQuery
OT

HELP!!! Cant make buttons/links work.

HI,
I have a flash that I am trying to make the buttons/links towork on and no matter what I do they just do not work. I have many hours into it so far and just had no success weather using my CS3 how to book of the forums information.
I not sure what I am missing. Never had this much trouble before. the first one I tried is HOME, have not gone farther since I can make the 1st one work.
Here is a link to the files.
http://www.pcccomputer.com/hold/Web%20pages/Page30.html
Can some one give me a cule where I messed up and how to fix it.
Thank you so much.
M

You have a few things going on that aren't helping. When you code buttons the way you have, you have to put the code on the timeline and give the buttons the instance name you use in that code. You also have to assign the code to the instance that is going to use it.
You have one such piece of code on the timeline, which would be correct except I believe the button it belongs to doesn't exist yet (it's somewhere down the timeline), and it needs to be in the presence of that code for that code to do anything.
The other similar version of that code you do not have on the timeline, but have it attached to the button instead, which will not work. And again, it is most likely not where it needs to be because that instance is not the instance that exists when the menu is finished setting up... that instance is at the beginning of a transition to the real instance that the code should be assigned to.
Try assigning all your buttons instance names, at every keyframe. Then create an actions layer for your code and use it for the code. And place all the button code in the last frame of the layer so that the butons have it assigned to them where it counts... when they are present and ready to be used.

Button Link to Object Standard.

Dear All.,
Now I have a problem with button link to object stanbard (17 is Sale order object).
I have to use button link and Editbox on the new form, then I set button link to this editbox and set LinkedObject=17 in screen painter. I have run this form i select Sale Order document Number on this Editbox and i click button link to sale order that show data following my selected.. but it can't not open sale order and alert message "You are not permitted to perform this action [Message 200-30]".. so how can i set permitted to perform this action. pls help me...
Thanks,
Sivhour.

Hi Prasan,
Authorizations are set in under the Administration System Initialization Authorization General Authorization.
Regards,
Vítor Vieira

How can I set a button/link that is visible on all slides?

I want to add a button/link that is automatically visible on all slides (whole project). But it seems it does not work. Any help?

Hello,
It depends on your version. I hope you are on CP6 or later. In that case you have two possiblities:
a shape button on the main master slide (and be sure that all daughter master slides have the objects of the main master slide)
a shape button on the first slide, timed for the rest of the project.
More details: Why I like Shape Buttons - Captivate 6! - Captivate blog
There is also a webinar on demand from Adobe 'Lilybiri's favourite...'
Lilybiri

Flash button link will not work in CS4

Can anyone walk me through step by step to get a flash button link to work in CS4? I tries action scripts 2 and 3... I cut and pasted a bunch of code on line, watched tutorials, and no matter what i do, the link won't work in CS4. The button looks and works fine, but won't go to the web site ot web page after clicking on it.
At this point, I am so confused, i think it would be better if someone walked me through step by step. My email is [email protected] I can email the button is that would help. Thanks.
Steve.

Hi,
This issue is fixed in Encore CS5.
Thanks,
Pankaj Gauba

How can i make a button link in flash??

Hey Guys,
Im pretty new to flash but really need your help and
guidance. I have a nice video ive created, and i want to make the
buttons link to certain pages on a website it will be displayed at.
If you want to see the flash video in place on the website,
visit www.loveandmarriagebridal.co.uk - i want to make the buttons
to link to the following pages.
button 1. www.loveandmarriagebridal.co.uk/index.php
button 2. www.loveandmarriagebridal.co.uk/about_us.php
button 3. www.loveandmarriagebridal.co.uk/
button 4.
http://loveandmarriagebridal.co.uk/account.php
button 5.
http://loveandmarriagebridal.co.uk/contact_us.php
Could anybody please tell me exactly what i need to do in
order to acheive that. I am using Flash CS3. Ive looked around the
net for a solution, but i honestly have no idea what im searching
for.
Your help would be very much appreciated
Thanks
Andy

See which form of ActionScript you used to make the site.
Open the Actions panel and see whether you've chosen AS versions 1
& 2, or AS 3. If you've picked the earlier versions, you can
attach a link easily to each button by clicking on the button, and
adding a little code in the Actions panel. Turn on ScriptAssist to
make it easier. Click on "on" and choose "release" or "press" or
both. Then scroll down the commands on the left and add getURL. You
will then have a few lines that say something like, on(Release)
getURL("putyourpageurlhere"). See bottom for exact syntax. That's
all. The new .html or .php page will load when the button is
clicked.
If your buttons are not actually four-state buttons, but
graphic or movie clip symbols, you will have do it a little
differently. Instead of attaching the code to a button, you attach
it to a keyframe. You give your symbol an instance name in the
property panel, then in the Actions panel create a function that
says essentially: when you click on this instance (onRelease)
getURL.
If you're using AS3, the concept is similar but the code is
different. With a quick search you can find dozens of code examples
that you can cut and paste.
Here's that AS2 button code...

Button Link Transitions with Audio?

Ive got a question on what can be used as a Button Transition. I have a 10 sec. AV in PP2, that I want to use. In general, no problems. Ive Exported the Video to DV-AVI (silent), and it works beautifully. I only have to do a blend from the Menu for the head and then a still from the Timeline at the tail. No biggie. What I am having problems with is getting an SFX Audio file into the PP2 Sequence for this Transition. So far, I am having problems. I tried to make a Timeline for this AVI with an AC3 Audio, but Encore2 would not allow a link to it, via the Pickwhip. I tried to Import several variations of muxed files, but kept getting errors with the number of channels on Import. Then, I did a muxed MPEG file, and got my first big "Crash" of Encore2. When I linked to the M2v, I got something about Abbie Normal Condition. Wasnt he the founder of the Yippies back in the 60s, along with poet, Allen Ginsberg? The error (really An Abnormal Condition... Please try to Save... ) came up and I could not even exit from Encore2. Had to finally use TaskManager to kill the Process. This was a first for me after all of these years. Lesson - do not use the M2v as a Button Transition!
Now, Im certain that there are possibilities that I have not tried, but before I beat what could be a dead horse, I wanted to find out one thing: can I even have Audio in a Button Transition?
I have total control over my Asset, so I can engage in any workaround necessary. If anyone has any info (Help/Manual do not go deeply into specifics on Button Transitions, and even Jeffs Book, Focal Easy Guide... doesnt mention them, as I can find.), Id greatly appreciate it. Same for any ideas on using Audio for these. In my case, its a bit of an electronic whoosh with a long gong tone, and moves left to right and rear to front to rear (in the 5.1 version). I do not need to do 5.1, as stereo, panned left to right would work fine too.
Appreciate the direction, thoughts and ideas,
Hunt

Jbowden,
Thanks for the simple little test. I just linked my existing SFX AC3 to the Main Menu's Audio and it worked fine. The pan/fade of the 5.1 was intact and worked in Preview.
I Exported the Button Transition test as a DV-AVI/PCM WAV from PP2, and Imported as a Timeline into Encore2. Tested and it played fine, but there was just the left-right pan, as expected. Linked my Button #1 to the AVI, as it would not link to the Timeline (as before), and went to Preview - "An Abnormal Condition... Save... " happened again. It is obviously not just the M2v, but the AVI, as well.
Back to square one in my tests. I've been working with a preliminary, test Project in Encore. It was used to create a DVD set for client review of most other aspects of the Project. It contained 4 Dynamic Links to AE, which were rendered out, plus 2 Menus a short lead-in AVI and some other Assets. Without any Button Transitions, it previewed and burned perfectly.
What I am going to do now is create a fresh Encore2 Project. Initially, it will only have the Play First AVI, the two Menus (Main & Scene Selection) and then I'll work with just the Button Transitions - all other Assets will not be included. I want to eliminate any other possible problem from the mix.
One thing that occurred to me was that this Project was a very full DVD. Though the Transcode is Automatic, I wonder if I am now adding too much to an already Transcoded Project. Rather than clear all Caches, and Revert to the unTranscoded state in this Project, I'll build, instead, from scratch. If that works, I'll just do the Button Transitions for the Scene Select Menu (4 Buttons/Links) and test again. If it still goes well, I'll add in the Rendered AE files and probably not use DL this time. Then, I'll Transcode and test to see if it all holds up. This method will not tell us exactly where the problem lies, if it works at all, but then when I have time, I can go back and clean Caches and Revert the Assets for a final test.
To date, the motion-only Button Transitions worked fine. It was only when I have tried (several different schemes) to add Audio, that I have encountered the problem.
Should have the preliminary test this AM, as the Project is very simple and starting over is not a big deal.
One side observation that I have made is that after I had to use TaskManager to end the Encore2 Process the other day, it now takes Encore2 a few minutes to even get the Splash Screen up. This is new behavior. I also cannot shift focus to/from Encore2 (with PP2 open), by clicking on the icon in the Taskbar. Even Rt-clicking and choosing Restore does not Maximize it. Only by going to TaskManager and clicking on the Application does it Maximize. As this was my first Encore2 "Crash," I am not sure what might be happening there. If I can get this Project done, I'll probably do a Repair Installation of Encore2, to see if the new behavior subsides.
Thanks for the input. Will be back with followups.
Hunt

How to create authorisation object for save button please help in abap

how to create authorisation object for save button please help in abap

Hi
In general different users will be given different authorizations based on their role in the orgn.
We create ROLES and assign the Authorization and TCODES for that role, so only that user can have access to those T Codes.
USe SUIM and SU21 T codes for this.
Much of the data in an R/3 system has to be protected so that unauthorized users cannot access it. Therefore the appropriate authorization is required before a user can carry out certain actions in the system. When you log on to the R/3 system, the system checks in the user master record to see which transactions you are authorized to use. An authorization check is implemented for every sensitive transaction.
If you wish to protect a transaction that you have programmed yourself, then you must implement an authorization check.
This means you have to allocate an authorization object in the definition of the transaction.
For example:
program an AUTHORITY-CHECK.
AUTHORITY-CHECK OBJECT <authorization object>
ID <authority field 1> FIELD <field value 1>.
ID <authority field 2> FIELD <field value 2>.
ID <authority-field n> FIELD <field value n>.
The OBJECT parameter specifies the authorization object.
The ID parameter specifies an authorization field (in the authorization object).
The FIELD parameter specifies a value for the authorization field.
The authorization object and its fields have to be suitable for the transaction. In most cases you will be able to use the existing authorization objects to protect your data. But new developments may require that you define new authorization objects and fields.
http://help.sap.com/saphelp_nw04s/helpdata/en/52/67167f439b11d1896f0000e8322d00/content.htm
To ensure that a user has the appropriate authorizations when he or she performs an action, users are subject to authorization checks.
Authorization : An authorization enables you to perform a particular activity in the SAP System, based on a set of authorization object field values.
You program the authorization check using the ABAP statement AUTHORITY-CHECK.
AUTHORITY-CHECK OBJECT 'S_TRVL_BKS'
ID 'ACTVT' FIELD '02'
ID 'CUSTTYPE' FIELD 'B'.
IF SY-SUBRC <> 0.
MESSAGE E...
ENDIF.
'S_TRVL_BKS' is a auth. object
ID 'ACTVT' FIELD '02' in place 2 you can put 1,2, 3 for change create or display.
The AUTHORITY-CHECK checks whether a user has the appropriate authorization to execute a particular activity.
This Authorization concept is somewhat linked with BASIS people.
As a developer you may not have access to access to SU21 Transaction where you have to define, authorizations, Objects and for nthat object you assign fields and values. Another Tcode is PFCG where you can assign these authrization objects and TCodes for a profile and that profile in turn attached to a particular user.
Take the help of the basis Guy and create and use.
Regards
ANJI

Adobe PDF Link Helper Problem

Hello,
I am looking for some help because I am out of options. When I open up a pdf through IE, and use the add-on toolbar, none of the buttons can be used. They are all "frozen" except for the zoom function. This is the case for multiple or any documents. I have tried uninstalling IE9 and reverting back to IE8 but no luck. None of the IE are 64 bit, they are all 32 bit. Any help in this matter is greatly appreciated.
Here is a bit of background:
OS: Windows 7 (some PC's are 32 bit and others are 64 bit)
Adobe X 10.1.3
IE9 and IE8 both 32 bit.
Add ons are enabled for Adobe.
Thank you.

I do not see either PDF Link Helper or Adobe Acrobat SharePoint Open Documents Component in 64 bit IE9. I see them both in the 32 bit version. Are they both for displaying in a browser? The root issue I am trying to solve is getting the SharePoint 2010 Acrobat X integration to work, The original symptom was that a user would check out a pdf file from a SharePoint library, edit it (using the comment feature in Reader) and then Save or Check In. Either action would result in a Cannot Access the Network error. Looking at the HTML traffic in Fiddler showed the error text had nothing to do with the problem, which seemed to be about attribute values. Anyway, I put this on the back burner for a couple months and returned to it recently. It now works on my machine in a 32 bit browser. (ACCEPTABLE RESTRICTION). My coworker still gets the original error. I poked around and found the SharePoint Open Documents add-on on my machine and not hers and suspect it has something to do with the difference in behavior. So I am trying to find out what it is supposed to do and if it really is relevant, how to cause it to be downloaded on other people’s machines. I have been through the server configuration steps listed in Chapter 13 of the Acrobat Admin Guide.

Bad navigation bar buttons/links when viewing in browser

i've created my own nav bar, but when i view it online, the buttons/links are out of line
i.e. the page you view has the buttons below or above the horizontal of all the other buttons.
this looks scruffy!
everything is kosher when viewed in iWeb. none of the buttons overlap. i'm using standard web fonts (helvetica, courier).
i'm scratching my head wondering what's gone wrong.

here's one:
www.drewpower.com
i realised, after posting, that the offending button is the page title button you are on.
e.g. when you're on 'links', the 'links' button is duff.
my solution? well as they're redundant, i took em out.
but any feedback would be helpful.
ta!

Web links, email links, button links

I have several different links through out my site. I want them to look differently but it keeps inheriting the styles of my button link. How can I make them appear different. For instance, I don't want my email link to have a background behind it when you hoover. I just want it to change colors. What am I doing wrong. Can anyone help?
HTML
<p>According to the American Society of Civil Engineers (ASCE) the nations bridges are getting a little better – last graded as a “C” (2009) in 2013 they are graded as a “C+”. The ASCE not only has the National Report Card on infrastructure available <a href="http://www.infrastructurereportcard.org/" title="ASCE National Report Card" target="new" class="weblink">(see the 2013 report Card here),</a> they have State and Local reports available as well. <a href="http://www.asce.org/Infrastructure/Report-Card/State-and-Local-Report-Cards/" title="ASCE’s State and Local Report Cards." target="new" class="weblink">ASCE’s State and Local Report Cards.</a></p>
<p>Read the entire Case Study by clicking on the RESOURCES tab and selecting Pavemend Case Studies. Send us a photo and a brief report of your Pavemend repair and get a Pavemend Cap by “Mossy Oak.” <strong><a href="mailto:[email protected]" class="emaillink">[email protected]</a></strong>
</p>
CSS
a.weblink:link, a.weblink:visited, a.weblink:active {
    /* This will handle all the states of the link other than when it is hovered over */
     /* put your style rules in this area */
    color: #0033CC; /* or any other color */
    text-decoration: underline;
a.weblink:hover {
     /* This makes the link Text Hover Color controlable */
     color:#999; /* or whatever color you want that is different from the color that you set for the other statuses */
a.emaillink:link, a.emaillink:visited, a.emaillink:active {
    /* This will handle all the states of the link other than when it is hovered over */
     /* put your style rules in this area */
    color: #0033CC; /* or any other color */
    text-decoration: underline;
    background-color: none;
a.emaillink:hover {
    /* This makes the link Text Hover Color controlable */
    color: #999; /* or whatever color you want that is different from the color that you set for the other statuses */
    background-color: none;
a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 100%;
    padding: 5px;
a:visited {
    color: #FFFFFF;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    background-color: #03C;
    color: #FFF;
    height: 120%;
    alignment-baseline: text-after-edge;
    /* [disabled]font-size: smaller; */
    text-align: left;
    background-size: 0%;

Not sure what I'm doing wrong. Still not getting it right. Now my footer is wrong also:
CSS
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
.clear-fix:before,
.clear-fix:after {
    content: " ";
    display: table;
.clear-fix:after {
    clear: both;
.clear-fix {
    *zoom: 1;
.sidebarleft img.MgTp {
    margin-top: 185px;
#menu {
    clear: none;
    position: static;
    width: 100%;
    padding-top: px;
    padding-right: px;
    padding-left: px;
    padding-bottom: px;
    background-image: url(_images/topnavpanel.png);
    color: #FFFFFF;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: px;
    background-repeat: no-repeat;
    float: none;
    text-align: center;
#menu ul {
    margin: 0;
    padding: 0;
    text-align: left;
#menu li {
    list-style: none;
    float: left;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #000000;
/**top level menu**/
#menu li a {
    display: inline-block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 13em;
    padding: 8px;
    font-weight: bold;
    line-height: 12px;
    color: #000;
    border-top-style: none;
    font-size: 90%;
    margin-bottom: 0;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
    border-bottom-style: none;
    text-align: center;
/**top menu style on mouse over**/
#menu li:hover > a {
    color: #FFF;
    width: 13em;
    text-align: center;
/**sub-menu**/
#menu li ul {
    display: none;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    margin-left: 40px;
    margin-right: 0;
    margin-top: 0;
    border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
    display: block;
    position: absolute;
    z-index: 1000;
    padding: 0;
    text-align: left;
#menu li:hover li, #menu li.hover li {
    float: none;
    background-color: #E1D5BB;
    text-align: left;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
    width: 14em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
    color: #FFF;
    background-color: #03C;
    position: relative;
    text-align: left;
/* Clear floated elements at the end*/
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#pavemendlogo {
    background-image: url(_images/PAVEMEND_LOGO_WHITE.png);
    background-repeat: no-repeat;
    height: 78px;
    width: 196px;
    margin-left: 23px;
    margin-top: -130px;
/**END HORIZONTAL DROP-MENUS STYLES**/
#pavemendlogoresourcepage {
    background-image: url(_images/PAVEMEND_LOGO_WHITE.png);
    background-repeat: no-repeat;
    height: 78px;
    width: 196px;
    margin-left: 23px;
    margin-top: -160px;
/**END HORIZONTAL DROP-MENUS STYLES**/
#slqlogo {
    background-image: url(_images/PMND_SLQ_logo_White.png);
    background-repeat: no-repeat;
    height: 92px;
    width: 225px;
    margin-left: 23px;
    margin-top: -170px;
    margin-bottom: 35px;
#fifteenlogo {
    background-image: url(_images/PMND15Whitesingle.png);
    background-repeat: no-repeat;
    height: 98px;
    width: 225px;
    margin-left: 23px;
    margin-top: -170px;
    margin-bottom: 29px;
    z-index: 1000;
#trlogo {
    background-image: url(_images/PMND_TRlogoWhite.png);
    background-repeat: no-repeat;
    height: 115px;
    width: 225px;
    margin-left: 23px;
    margin-top: -185px;
    margin-bottom: 26px;
    z-index: 1000;
#vrlogo {
    background-image: url(_images/PMND_VRlogoWhite.png);
    background-repeat: no-repeat;
    height: 134px;
    width: 225px;
    margin-left: 23px;
    margin-top: -195px;
    margin-bottom: 18px;
    z-index: 1000;
#dotlinelogo {
    background-image: url(_images/Dotline_White-Red.png);
    background-repeat: no-repeat;
    height: 91px;
    width: 225px;
    margin-left: 23px;
    margin-top: -170px;
    margin-bottom: 35px;
#sllogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
    height: 92px;
    width: 225px;
    margin-left: 23px;
    margin-top: -170px;
    margin-bottom: 35px;
#ialogo {
    background-image: url(_images/InstantAsphalttopLogo.png);
    background-repeat: no-repeat;
    height: 102px;
    width: 225px;
    margin-left: 23px;
    margin-top: -170px;
    margin-bottom: 25px;
#kemroklogo {
    background-image: url(_images/KEMROK_LOGOWhiteType.png);
    background-repeat: no-repeat;
    height: 52px;
    width: 225px;
    margin-left: 23px;
    margin-top: -150px;
    margin-bottom: 53px;
#kemrokvrlogo {
    background-image: url(_images/KEMROK_LOGO_VR.png);
    background-repeat: no-repeat;
    height: 46px;
    width: 230px;
    margin-left: 23px;
    margin-top: -150px;
    margin-bottom: 59px;
#fireroklogo {
    background-image: url(_images/Firerok_logo_White.png);
    background-repeat: no-repeat;
    height: 81px;
    width: 225px;
    margin-left: 23px;
    margin-top: -155px;
    margin-bottom: 30px;
#awlogo {
    background-image: url(_images/PMNDAWlogowhite1.png);
    background-repeat: no-repeat;
    height: 70px;
    width: 225px;
    margin-left: 23px;
    margin-top: -155px;
    margin-bottom: 40px;
#aslogo {
    background-image: url(_images/PMNDASlogowhite1.png);
    background-repeat: no-repeat;
    height: 64px;
    width: 225px;
    margin-left: 23px;
    margin-top: -155px;
    margin-bottom: 47px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 27px;
    width: 550px;
    margin-left: 220px;
    margin-top: -40px;
    bottom: px;
    margin-bottom: 66px;
#resourcestype {
    background-image: url(_images/ResourcesType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 148px;
    margin-left: 220px;
    margin-top: -60px;
    bottom: px;
    margin-bottom: 73px;
#Contacttype {
    background-image: url(_images/PurchaseType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 151px;
    margin-left: 220px;
    margin-top: -60px;
    bottom: px;
    margin-bottom: 73px;
#Contesttype {
    background-image: url(_images/ContestType.png);
    background-repeat: no-repeat;
    height: 54px;
    width: 478px;
    margin-left: 220px;
    margin-top: -75px;
    bottom: px;
    margin-bottom: 59px;
#sustainabilitytype {
    background-image: url(_images/SustainabilityType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 179px;
    margin-left: 220px;
    margin-top: -60px;
    bottom: px;
    margin-bottom: 73px;
#techsupporttype {
    background-image: url(_images/TechSupportType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 761px;
    margin-left: 220px;
    margin-top: -60px;
    bottom: px;
    margin-bottom: 73px;
body {
    background-color: #666;
    color: #000;
    text-align: center;
    background-image: url(_images/roadblurred.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    padding-top: 60px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
.formtext {
    font-size: 100%;
    text-align: left;
.bodyfootnote {
    font-size: 70%;
    margin-left: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
    font-size: 70%;
    color: #F00;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    text-decoration: none;
    list-style: none;
    text-align: left;
h1, h2, h3, h4, h5, h6, p {
    /* [disabled]margin-top: 0; */     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 23px;
    line-height: 25px;
h4 {
    padding-left: 0px;
    color: #F40633;
    line-height: 0px;
    font-size: 100%;
h5 {
    padding-left: 23px;
    color: #F40633;
    line-height: 0px;
    font-size: 120%;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
    margin-left: 0px;
    position: ;
    top: 155px;
    -webkit-box-shadow: 0px 0px 0px 0px;
    box-shadow: 0px 0px 0px 0px;
    left: 9px;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 100%;
    padding: 5px;
a:visited {
    color: #FFFFFF;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    background-color: #03C;
    color: #FFF;
    height: 120%;
    alignment-baseline: text-after-edge;
    /* [disabled]font-size: smaller; */
    text-align: left;
    background-size: 0%;
a.weblink:link, a.weblink:visited, a.weblink:active {
    /* This will handle all the states of the link other than when it is hovered over */
     /* put your style rules in this area */
        background-color: none;
        color: #0033CC; /* or any other color */
    text-decoration: underline;
a.weblink:hover {
     /* This makes the link Text Hover Color controlable */
        background-color: none;
     color:#999; /* or whatever color you want that is different from the color that you set for the other statuses */
a.emaillink:link, a.emaillink:visited, a.emaillink:active {
    /* This will handle all the states of the link other than when it is hovered over */
     /* put your style rules in this area */
    background-color: none;
    color: #0033CC; /* or any other color */
    text-decoration: underline;
a.emaillink:hover {
    /* This makes the link Text Hover Color controlable */
    background-color: none;
    color: #999; /* or whatever color you want that is different from the color that you set for the other statuses */
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    width: 960px;
    background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/Bridge4WebScreened.png);
    background-repeat: no-repeat;
    margin-bottom: 0;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0;
    text-align: left;
    position: static;
.containerTS {
    width: 960px;
    background-color: #FFF;
    margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/US_Map.png);
    background-repeat: no-repeat;
    text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background-color: #000;
    background-image: url(_images/BannerBlured960.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
    background-size: contain;
.headerSL {
    background-color: #000;
    background-image: url(_images/PMND_SL_Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerPurchase {
    background-color: #000;
    background-image: url(_images/contact_us_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSLQ {
    background-color: #000;
    background-image: url(_images/PMND_SLQ_Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerDOTline {
    background-color: #000;
    background-image: url(_images/DOTLINEHeader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header15 {
    background-color: #000;
    background-image: url(_images/PMND15Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTR {
    background-color: #000;
    background-image: url(_images/PMND_TRHeader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAW {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAS {
    background-color: #000;
    background-image: url(_images/anti_scale_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerVR {
    background-color: #000;
    background-image: url(_images/PMND_VRHeader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerIA {
    background-color: #000;
    background-image: url(_images/Instant_asphalt_packaged_Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrok {
    background-color: #000;
    background-image: url(_images/KEMROKpackagedHeader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrokVR {
    background-color: #000;
    background-image: url(_images/KEMROK_VRpackagedHeader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerFirerok {
    background-color: #000;
    background-image: url(_images/FIREROKpackagedHeader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAntiWear {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTechSupport {
    background-color: #000;
    background-image: url(_images/FEBlurred.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerResources {
    background-color: #000;
    background-image: url(_images/ResourceBanner.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerContact {
    background-color: #000;
    background-image: url(_images/contact_us_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSustainability {
    background-color: #000;
    background-image: url(_images/Sustainability_topheader.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-style: normal;
    font-weight: bolder;
    color: #FFF;
    padding-top: 150px;
    padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
    float: right;
    width: 180px;
    margin-left: 0px;
    margin-right: 30px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/Testimonialb.gif);
    background-repeat: no-repeat;
    height: 456px;
    text-decoration: none;
    z-index: 1000;
.sidebarPurchase {
    float: right;
    width: 210px;
    margin-left: 0px;
    margin-right: 0px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/purchaseSB.png);
    background-repeat: no-repeat;
    height: 460px;
    margin-top: 0px;
    text-decoration: none;
    background-color: #217CC0;
    background-position: 10px 10px;
.sidebarPurchasePhoto {
    width: 190px;
    margin-left: 10px;
    margin-right: 20px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/purchaseSB.png);
    background-repeat: no-repeat;
    height: 127px;
    margin-top: 320px;
    text-decoration: none;
    /* [disabled]background-color: #217CC0; */
    background-position: 10px 10px;
    text-align: center;
.ipadsidebar {
    float: right;
    width: 200px;
    margin-left: 0px;
    margin-right: -20px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/iPadSidebar.png);
    background-repeat: no-repeat;
    height: 460px;
    margin-top: 0px;
    text-decoration: none;
    background-position: 0px 0px;
    text-align: right;
.sidebarleft {
    float: left;
    width: 200px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 85%;
    font-style: oblique;
    height: 180px;
    text-decoration: none;
    padding-top: 8px;
    padding-left: 10px;
    margin-right: 5px;
    margin-bottom: px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 120%;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: 0px;
    text-align: left;
.sidebarleftnonav {
    float: left;
    width: 200px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 85%;
    font-style: oblique;
    height: 180px;
    text-decoration: none;
    padding-top: 8px;
    padding-left: 10px;
    margin-right: 5px;
    margin-bottom: px;
    /* [disabled]background-color: #217CC0; */
    vertical-align: bottom;
    line-height: 120%;
    font-weight: bold;
    border-bottom-style: none;
    border-bottom-width: 10px;
    margin-top: 0px;
    text-align: left;
.sidebarleftresources {
    float: left;
    width: 200px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 83%;
    font-style: oblique;
    height: 490px;
    text-decoration: none;
    padding-top: 8px;
    padding-left: px;
    margin-right: 5px;
    margin-bottom: px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 120%;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: 0px;
    text-align: left;
.sidebargreen {
    float: left;
    width: 195px;
    height: 410px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #8CC63F;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    padding-left: 10px;
.nav2 {
    font-family: bebas-neue;
    font-style: normal;
    font-weight: 400;
    color: #FFF;
    text-align: left;
.content {
    width: 730px;
    float: left;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 10px 0;
    text-align: left;
    font-size: 100%;
    margin-left: px;
.contactform {
    width: 680px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 10px 0;
    text-align: left;
    font-size: 90%;
    margin-left: 23px;
    z-index: 1000;
.contestcontactform {
    width: 680px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding-top: 0px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 10px;
    text-align: left;
    font-size: 90%;
    margin-left: 23px;
    z-index: 1000;
    margin-top: 100px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px;
    text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    text-decoration: none;
ul.nav li {
    border-bottom: 1px solid #666;
    text-align: left;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #C6D580;
    text-align: left;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background-color: #DFEBF3;
    color: #FFF;
    text-decoration: none;
    text-align: left;
/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both;
    background-color: #000000;
    height: 150px;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
    margin-left: 23px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.productlogos {
    margin-left: 23px;
    margin-top: 20px;
    float: none;
.Bold {
    font-weight: bold;
.left {
    text-align: left;
.inherent {
    font-style: inherit;
sup {
    position: relative;
    top: -1ex;
    vertical-align:baseline;
    font-size: 75%;
.footer p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80%;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 30px;
#wrapper {
     width:970px; /**adjust as needed**/
     margin:0 auto; /**centers page on screen**/
.fltrtpostcard { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-left: 720px;
    top: 0px;
    margin-top: -200px;
    margin-bottom: 20px;
    margin-right: 0px;
    height: auto;
.flt_rgt {
    float: right;
    margin-top: 15px;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.flt_pftrgt {
    float: right;
    margin-top: -50px;
    margin-right: 0px;
    background-image: ;
    background-repeat: no-repeat;
.flt_rgtbtmlogo {
    float: right;
    margin-top: 20px;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.flt_rgt2 {
    float: right;
    margin-top: px;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    top: -50px;
    right: -20px;
    padding-top: 0px;
    padding-right: 50px;
.title {
    /* [disabled]margin-right: 30px; */
    margin-top: 0px;
    margin-left: 23px;
    background-image: ;
    background-repeat: no-repeat;
    /* [disabled]margin-left: 20px; */
    top: 30px;
    /* [disabled]margin-top: 30px; */
    left: 30px;
.flt_products {
    float: right;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 500px;
    margin-top: -70px;
.flt_productsb {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 500px;
    margin-top: -80px;
    visibility: inherit;
.flt_productslq {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 350px;
    margin-top: -125px;
.flt_producttr {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 375px;
    margin-top: -125px;
.flt_productvr {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 475px;
    margin-top: -105px;
.flt_productia {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 420px;
    margin-top: -125px;
.flt_productkemrok {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 485px;
    margin-top: -180px;
.flt_productkemrokvr {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 590px;
    margin-top: -170px;
.flt_productfirerok {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 485px;
    margin-top: -170px;
.flt_productaw {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 430px;
    margin-top: -170px;
.flt_product15 {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 280px;
    margin-top: -125px;
.flt_productdotline {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 280px;
    margin-top: -155px;
.flt_productsl {
    float: left;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
    margin-left: 370px;
    margin-top: -170px;
.container section nav {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
    padding-top: 3px;
nav ul {
    list-style: none; /* this creates the space between the navigation on the content below */
    font-size: 90%;
    border-top-width: 0px;
    border-top-style: solid;
    /* [disabled]border-top-color: #666; */
    position: absolute;
    line-height: 120%;
    text-align: left;
nav ul li {
    text-decoration: none;
    color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    text-align: left;
    color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #FFF;
    text-decoration: none;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #FFF;
    text-decoration: none;
    height: 120%;
    width: auto;
    margin-left:;
.orange {
    color: #FAA634;
.white {
    color: #FFFFFF;
.red {
    color: #F00;
.red1 {
    color: #F00;
.toppanel {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
.white {
.CeraTechLogo {
    background-image: url(_images/CTI_logo_white.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 60px;
#resources {
    background-image: url(_images/ResourcesType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
.pavemendlogo {
    margin-left: 23px;
    margin-top: -130px;
    /* [disabled]margin-top: -40px; */
.footer_img {
    margin-top: -20px;
    margin-left: -10px;
.footer_img2 {
    margin-top: -40px;
    text-align: right;
    float: left;
    margin-right: 35px;
    margin-left: 200px;
footer aside {
    width: 25%;
    float: left;
    text-align: left;
    min-height: 50px;
    margin-left: 23px;
    line-height: 120%;
    font-size: 80%;
    margin-top: 20px;
.aside2 {
    float: none;
    margin-left: 100px;
    width: 29%;
    margin-top: 35px;
.aside3 {
    float: none;
    margin-left: 400px;
    width: 29%;
    line-height: 120%;
    margin-top: -43px;
.sidebarleft img {
    margin-left: -10px;
.sidebarleft icon {
    margin-top: 0px;
    margin-left: -10px;
.sidebarleft nav ul li a img {
    margin-top: 0px;
.content section p a {
    color: #000000;
    font-size: 100%;
/**sub-menu, help for older IE**/
.content section p a:hover ul {
    display: block;
    position: ;
    z-index:1000;
    padding: 0;
.content section p a:hover li, .content section p a li.hover li {
    float: none;
    background-color: #E1D5BB;
/**drop-menu style**/
.content section p a:hover li a, nav li.hover li a {
    width: 14em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
.content section p a:hover {
    position: relative;
    background-color: none;
    background-image: ;
    background-image: ;
    height: 120%;
    width: 120%;
    overflow-y: hidden;
    overflow-x: hidden;
    visibility: visible;
    font-weight: bold;
    color: rgba(255,255,255,1.00);
/* Clear floated elements at the end*/
.content section p a:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
#firstname {
    width: 330px;
    margin-top: 0px;
#lastname {
     width:330px;
#streetaddress {
     width:684px;
#city {
     width:330px;
#zip {
     width:260px;
#company {
     width:684px;
#phone {
     width:330px;
#email {
     width:330px;
#outsidetheus {
     width:330px;
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">

<link href="../pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {color:blue}
a:visited {color:black}
a:hover,
a:active,
a:focus {background:blue; color:white}
.weblink a:link {color:blue}
.weblink a:visited {color:yellow}
.weblink a:hover,
.weblink a:active,
.weblink a:focus {background:none; color:red}
.email a:link {color:green}
.email a:visited {color:silver}
.email a:hover,
.email a:active,
.email a:focus {background:none; color:navy}
</style>


</head>
<body>
<div id="wrapper">
<div class="container">

<div class="header"></div>
<div id="pavemendlogo"></div>
      <div id="prochoicetype"></div>

<nav>
    <ul id="menu">
      <li><a href="../pavemend_home_page.html">OUR PRODUCTS ▼</a>
        <ul>
          <li><a href="../slq_product_page.html">SLQ<sup>®</sup> - Very Rapid Repair Mortar</a></li>
          <li><a href="../sl_product_page.html">SL<sup>®</sup> - Semi-Leveling Rapid Repair Concrete</a></li>
          <li><a href="../dotline_product_page.html">DOTLine™ - Pre-Extended Rapid Repair Concrete</a></li>
          <li><a href="../15.0_product_page.html">Pavemend 15.0<sup>®</sup> - Self Leveling Rapid Repair Mortar</a></li>
          <li><a href="../TR_product_page.html">Pavemend TR<sup>®</sup> - Semi-Leveling Rapid Repair Mortar</a></li>
          <li><a href="../VR_product_page.html">Pavemend VR<sup>®</sup> - Vertical & Overhead Rapid Repair Mortar</a></li>
          <li><a href="../IA_product_page.html">Instant Asphalt™ - Permanent Asphalt Repair Material</a></li>
          <li><a href="../kemrok_product_page.html">KEMROK™ - Chemical Resistant Repair Concrete</a></li>
          <li><a href="../kemrokVR_product_page.html">KEMROK VR™ - Vertical & Overhead Chemical Resistant Repair Mortar</a></li>
          <li><a href="../firerok_product_page.html">FIREROK™ - High Temperature Repair Concrete</a></li>
          <li><a href="../antiwear_product_page.html">Anti-Wear™ - Reactive, Concrete Surface Hardener</a></li>
          <li><a href="../antiscale_product_page.html">Anti-Scale™ - Reactive, Concrete Surface Hardener</a></li>
        </ul>
      </li>
      <li><a href="../resources_page.html">RESOURCES</a></li>
      <li><a href="../technical_support.html">TECHNICAL SUPPORT</a></li>
      <li><a href="../contact_page.html">CONTACT US</a></li>
    </ul>
</nav>

</section>

<div class="sidebar1">
    
</div>


<div class="content">
    <p>
    <section>
        <p> </p>
<img src="../_images/homeheader.png" alt="" width="650" height="31" class="fltlft"/>
    </section>
    </p>
    <p> </p>
</section>
    <p> </p>
      <section><p><strong>Pavemend</strong><sup>®</sup> concrete and asphalt repair products are quickly becoming the preferred repair materials for Turnpike, State DOT bridge crews and discriminating engineers who recognize the value of durable, permanent concrete and asphalt repairs. Contractors and maintenance personnel save time, reduce repair costs, and minimize exposure to traffic and traffic disruptions.</p>
        <h3>Concrete & Asphalt repair applications include:</h3>
        <table width="700" align="left" >
          <tr>
            <td valign="top" nowrap style="padding-left: 15px;">Full & Partial Depth Bridge Deck Repairs </td>
            <td valign="top" nowrap style="padding-left: 15px;">Dowel Bar Retrofits</td>
            <td valign="top" nowrap style="padding-left: 15px;">Industrial Concrete Repair</td>
          </tr>
          <tr>
            <td valign="top" nowrap style="padding-left: 15px;">Bridge Header Joints</td>
            <td valign="top" nowrap style="padding-left: 15px;">Cold Weather Repairs</td>
            <td valign="top" nowrap style="padding-left: 15px;">Concrete Exposed to High Heat </td>
          </tr>
          <tr>
            <td valign="top" nowrap style="padding-left: 15px;">Bridge Approach Slabs</td>
            <td valign="top" nowrap style="padding-left: 15px;">Runway Repairs</td>
            <td valign="top" nowrap style="padding-left: 15px;">Concrete Exposed to Chemicals</td>
          </tr>
          <tr>
            <td valign="top" nowrap style="padding-left: 15px;">Form & Pour Repairs</td>
            <td valign="top" nowrap style="padding-left: 15px;">Utility Trenches</td>
            <td valign="top" nowrap style="padding-left: 15px;">Concrete Exposed to Wastewater</td>
          </tr>
          <tr>
            <td valign="top" nowrap style="padding-left: 15px;">Joint Nosings</td>
            <td valign="top" nowrap style="padding-left: 15px;">Post Grooving Treatments</td>
            <td valign="top" nowrap style="padding-left: 15px; padding-bottom: 30px;">Manhole Rehabilitation</td>
          </tr>
        </table>
<h3>Sustainable Concrete and Asphalt Repair Technology</h3>
<p>Featuring technology developed in the USA, Pavemend products require only the addition of water, no bonding agents or curing compounds. Pavemend concrete and asphalt products are easier to use, offer greater durability provide, superior return on investment, and are by the far the most sustainable repair products available today.</p>
      </section>
            <p> </p>
</div>


<footer>
         <img src="../_images/productfamily.png" alt="" width="250" height="80" class="flt_products"/>
<div class="footer"><img src="../_images/Done_Smart_White_Logo.png" alt="done_smart_white" width="150" height="17" class="flt_rgt" />
<aside><strong><em style="color: #FFF; font-size: 90%;">Manufactured by</em></strong><br><br>
<img src="../_images/CTI_logo_white.png" alt="" width="200" height="47" class="footer_img"/></aside>
<aside class="aside2"><a href="#../twitter.com/Pavemend"><strong><em>Twitter</em></strong> <img src="../_images/twitter-bird-dark-bgs.png" width="20" height="17" alt=""/></a></aside>
<aside class="aside3"><strong><em style="color: #FFF"><a href="../sustainability_page.html">Planet Friendly Technology</a></em></strong><br>
<a href="../sustainability_page.html"><img src="../_images/PFTLogo.png" alt="Planet Friendly Technology" width="75" height="73" class="footer_img2" title="Planet Friendly Technology"/></a></aside>
</footer>
    </div>
</div>

</body>
</html>
I feel like I'm making a mess of it.

Button Linking Help....

Similar Messages

Maybe you are looking for