Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem adding another menu in javascript

    Hi,

    I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one.

    I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something.

    Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included.

    If I'm not making myself clear, please let me know and I will try to explain it better

    Thanks
    walkie


    index.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Identity</title>
    <script type="text/javascript" src="javascript/jquery.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
    <script type="text/javascript" src="javascript/javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    </head>
    
    <body>
    	<div id="leftSide">
        	<!--Site Title-->
        	<div id="title">
            	<!--Main Title-->
            	<h1><span></span>Identity</h1>
                <!--Caption/Sub Title-->
                <span class="titleSubText">the portfolio of john smith</span>
            </div>
            <div id="arrowWrapper"><div id="arrow"></div></div>
        	<div id="buttonsWrapper">
            
            	<!--About Button-->
            	<div id="aboutButtonWrapper">
                	<div class="navButton" id="aboutButton"></div>
                    <div class="navCaption" id="aboutCaption">
                    	<!--About Button: Label-->
                    	<span class="navCaptionText">about</span><br />
                        <!--About Button: Sub-Label-->
                    	<span class="navSubCaptionText">who I am</span>
                    </div>
                </div>
                
            	<!--Portfolio Button-->
            	<div id="portfolioButtonWrapper">
                	<div class="navButton" id="portfolioButton"></div>
                    <div class="navCaption" id="portfolioCaption">
                        <!--Portfolio Button: Label-->
                    	<span class="navCaptionText">portfolio</span><br />
                        <!--Portfolio Button: Sub-Label-->
                    	<span class="navSubCaptionText">my work</span>  
                    </div>
    			</div>
                
            	<!--Services Button-->
            	<div id="servicesButtonWrapper">
                	<div class="navButton" id="servicesButton"></div>
                    <div class="navCaption" id="servicesCaption">
                    	<!--Services Button: Label-->
                    	<span class="navCaptionText">services</span><br />
                        <!--Services Button: Sub-Label-->
                    	<span class="navSubCaptionText">what I do</span>                  
                    </div>
                </div>
                
            	<!--Contact Button-->
            	<div id="contactButtonWrapper">
                	<div class="navButton" id="contactButton"></div>
                    <div class="navCaption" id="contactCaption">
                    	<!--Contact Button: Label-->
                    	<span class="navCaptionText">contact</span><br />
                        <!--Contact Button: Sub-Label-->
                    	<span class="navSubCaptionText">get in touch</span>                  
                    </div>
                </div>
                
            </div>
        </div>
        
        <div id="contentPanelWrapper">
    		<div id="contentPanelEdge"></div>
            
            
            <!--Wrapper That Contains 'About' Content-->
            <div class="content" id="aboutContent">
            	<!--Title-->
            	<div class="contentTitle">about</div>
                <!--Body Text-->
                <div id="aboutText">
                	<h3>Who I Am</h3><br />
                	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
                	dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
                	Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
                	sagittis id neque.</p><br />
                    <p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
                	pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
                </div>
    		</div>
            
            
            <!--Wrapper That Contains 'Portfolio' Content-->
            <div class="content" id="portfolioContent">
            	<!--Title-->
            	<div class="contentTitle">portfolio</div>
                <!--Image Slider-->
                <div id="portfolioSlider">
                	<div id="sliderToolbar">
                    	<div class="sliderButton" id="prevButton"></div>
                        <div class="sliderButton" id="nextButton"></div>
                    </div>
                	<div id="imageWrapper">
                		<ul id="imgList">
    						<!--Portfolio Images Go Here (See Documentation)-->
                			<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
                    		<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
                    		<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
                    		<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
                    	</ul>
                    </div>
                </div>
    		</div>
            
            
            <!--Wrapper That Contains 'Services' Content-->
            <div class="content" id="servicesContent">
            	<!--Title-->
    	  		<div class="contentTitle">services</div>
                <!--Service 1 Column-->
                <div class="serviceColumn" id="serviceColumn1">
                	<h3>Identity Design</h3><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                    at pharetra ligula urna ut ligula.</p>
                </div>
                <!--Service 2 Column-->
                <div class="serviceColumn" id="serviceColumn2">
                	<h3>Web Design</h3><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                    at pharetra ligula urna ut ligula.</p>
                </div>
                <!--Service 3 Column-->
                <div class="serviceColumn" id="serviceColumn3">
                	<h3>Icon + UI Design</h3><br />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                    at pharetra ligula urna ut ligula.</p>
           	    </div>
    		</div>
            
            
            <!--Wrapper That Contains 'Contact' Content-->
    		<div class="content" id="contactContent">
            	<!--Title-->
      		<div class="contentTitle">contact</div> 
          		<div id="contactFormWrapper">
                	<!--Contact Form-->
           	  		<form id="contact" method="post" action="mail.php">
               	  		<input type="text" id="name" name="name" value="name" />
                  		<input type="text" id="email" name="email" value="email" /><br /><br />
                  		<textarea id="message" name="message" rows="" cols="">message</textarea>
                  		<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
              		</form>
                    <div id="successMessage"></div>
          		</div>
      	    </div>
            
            
    	</div>
            
    </body>
    </html>

    javascript.js
    Code:
    numImages=0;
    currentImage=1;
    currentPanel="none";
    
    $(document).ready(function(){		
    						   
    	// Initializes FancyBox Lightbox
    	$("a.sliderImage").fancybox({
    		'zoomSpeedIn':200, 
    		'zoomSpeedOut':200, 
    		'overlayShow':true,
    		'padding':4
    	});
    	
    	SelectButton("none");
    	$("#arrow").fadeOut(0);
    	
    	if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
    		$("input").css({"height":13});
    		$("#name").css({"width":155});
    	};
    	
    	$("#title").click(function(){
    		ShowPanel("none");
    	});
    						   
    	// Handles Formatting the Portfolio Slider
    	$("#imgList").children().each(function(){
    		numImages++;									   
    	});
    	$("#imageWrapper").css({"width":(numImages*541)});
    	
    	// Handles Function of the Portfolio Slider
    	$("#prevButton").click(function(){
    		if (currentImage==1){
    			currentImage=numImages;
    		} else {
    			currentImage--;
    		};
    		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
    	});
    	$("#nextButton").click(function(){
    		if (currentImage==numImages){
    			currentImage=1;
    		} else {
    			currentImage++;
    		};
    		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
    	});
    		
    	// Handles Rollover and Click For the Nav Buttons
    	$("#aboutButton").mouseenter(function(){
    		SelectButton("about");
    	});
    	$("#portfolioButton").mouseenter(function(){
    		SelectButton("portfolio");
    	});
    	$("#servicesButton").mouseenter(function(){
    		SelectButton("services");
    	});
    	$("#contactButton").mouseenter(function(){
    		SelectButton("contact");
    	});
    	$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
    		SelectButton("none");
    	});
    	$("#aboutButton").click(function(){
    		ShowPanel("about");								 
    	});
    	$("#portfolioButton").click(function(){
    		ShowPanel("portfolio");								 
    	});
    	$("#servicesButton").click(function(){
    		ShowPanel("services");								 
    	});
    	$("#contactButton").click(function(){
    		ShowPanel("contact");								 
    	});
    	
    	// Handles Contact Form Behavior	
    	$("#name").focus(function(){
    		$("#name").css({"background-color":"#FFFFFF"});
    		if ($("#name").val()=="name"){
    			$("#name").val("");
    			$("#name").css({"color":"#444444"});
    		};
    	});
    	$("#name").blur(function(){
    		if ($("#name").val()==""){
    			$("#name").val("name");
    			$("#name").css({"color":"#888888"});
    			$("#name").css({"background-color":"#ffdddd"});
    		};
    	});
    	$("#email").focus(function(){
    		$("#email").css({"background-color":"#FFFFFF"});
    		if ($("#email").val()=="email"){
    			$("#email").val("");
    			$("#email").css({"color":"#444444"});
    		};
    	});
    	$("#email").blur(function(){
    		if ($("#email").val()==""){
    			$("#email").val("email");
    			$("#email").css({"color":"#888888"});
    			$("#email").css({"background-color":"#ffdddd"});
    		};
    		if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
    			$("#email").css({"background-color":"#ffdddd"});
    		};
    	});
    	$("#message").focus(function(){
    		$("#message").css({"background-color":"#FFFFFF"});
    		if ($("#message").val()=="message"){
    			$("#message").val("");
    			$("#message").css({"color":"#444444"});
    		};
    	});
    	$("#message").blur(function(){
    		if ($("#message").val()==""){
    			$("#message").val("message");
    			$("#message").css({"color":"#888888"});
    			$("#message").css({"background-color":"#ffdddd"});
    		};
    	});
    	$("#submit").mousedown(function(){
    		$("#submit").attr({"src":"images/sendButtonSel.png"});
    	});
    	$("#submit").mouseup(function(){
    		$("#submit").attr({"src":"images/sendButton.png"});	
    	});
    	$("#submit").mouseout(function(){
    		$("#submit").attr({"src":"images/sendButton.png"});								
    	});
    	$("#name,#email,#message").keyup(function(){
    		if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
    			EnableSubmitButton();
    		} else {
    			DisableSubmitButton();
    		};
    	});
    	$("#submit").click(function(){
    		DisableSubmitButton();
    		var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
    		$.ajax({  
    			type: "POST",  
    			url: "mail.php",  
    			data: dataString,  
    			success: function() {  
    				ResetForm();
    				$("#successMessage").fadeIn(10);
    				setTimeout('$("#successMessage").fadeOut(1000);',2000);
    			}
    		});
    		return false; 
    	});
    
    });
    
    function EnableSubmitButton(){
    	$("#submit").attr({"disabled":""});
    	$("#submit").attr({"src":"images/sendButton.png"});
    };
    
    function DisableSubmitButton(){
    	$("#submit").attr({"disabled":"disabled"});
    	$("#submit").attr({"src":"images/sendButtonDis.png"});
    };
    
    function ResetForm(){
    	DisableSubmitButton();
    	$("#name, #email, #message").css({"background-color":"#FFFFFF"});
    	$("#name, #email, #message").css({"color":"#888888"});
    	$("#name").val("name");
    	$("#email").val("email");
    	$("#message").val("message");
    };
    
    function ShowPanel(panel){
    	currentPanel=panel;
    	SelectButton(panel);
    	$(".content").fadeOut(250);
    		switch(panel){
    			case "none":
    				$("#contentPanelWrapper").animate({"left":"100%"},500);
    				$("#arrow").fadeOut(50)
    			break;
    			case "about":
    				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
    					$("#aboutContent").show();
    					$("#contentPanelWrapper").animate({"left":"44%"},500);
    				});
    				$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
    			break;
    			case "portfolio":
    				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
    					$("#portfolioContent").show();
    					$("#contentPanelWrapper").animate({"left":"44%"},500);
    				});
    				$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
    			break;
    			case "services":
    				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
    					$("#servicesContent").show();
    					$("#contentPanelWrapper").animate({"left":"44%"},500);
    				});
    				$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
    			break;
    			case "contact":
    				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
    					$("#contactContent").show();
    					$("#contentPanelWrapper").animate({"left":"44%"},500);
    				});
    				$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
    			break;
    		};
    };
    
    function SelectButton(button){
    	if (currentPanel!="about"){
    		$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
    		$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
    		$("#aboutButton").css({"background-position":"0px 0px"});
    	};
    	if (currentPanel!="portfolio"){
    		$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
    		$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
    		$("#portfolioButton").css({"background-position":"0px -64px"});
    	};
    	if (currentPanel!="services"){
    		$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
    		$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
    		$("#servicesButton").css({"background-position":"0px -128px"});
    	};
    	if (currentPanel!="contact"){
    		$("#contactCaption").animate({"left":50},{queue:false, duration:250});
    		$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
    		$("#contactButton").css({"background-position":"0px -192px"});
    	};
    	switch(button){
    		case "none":
    		break;
    		case "about":
    			$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
    			$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
    			$("#aboutButton").css({"background-position":"65px 0px"});
    		break;
    		case "portfolio":
    			$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
    			$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
    			$("#portfolioButton").css({"background-position":"65px -64px"});
    		break;
    		case "services":
    			$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
    			$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
    			$("#servicesButton").css({"background-position":"65px -128px"});
    		break;
    		case "contact":
    			$("#contactCaption").animate({"left":70},{queue:false, duration:250});
    			$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
    			$("#contactButton").css({"background-position":"65px -192px"});
    		break;
    	};
    
    };

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Also, here are the CSS if it's needed:

    style.css
    Code:
    @charset "UTF-8";
    
    * { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; }
    
    body {
    	background-color:#eec015;
    	overflow:hidden;
    }
    
    h1 {
    	position:relative;
    	font-family:Helvetica, Arial, sans-serif;
    	color:#FFFFFF;
    	font-size:19pt;
    	font-weight:normal;
    	text-shadow: rgba(0,0,0,0.75) 0px 1px 2px;
    }
    
    h1 span {
    	background: url(../images/textGradient.png) repeat-x;
    	position:absolute;
    	display:block;
    	width:100%;
    	height:30px;	
    }
    
    h3 {
    	font-size:10pt;
    }
    
    #name, #email, #message {
    	border:1px #A5A5A5 solid;
    	background-color:#FFFFFF;;
    	font-family:Helvetica, Arial, sans-serif;
    	font-size:10pt;
    	resize:none;
    	color:#888888;
    }
    
    #name, #email {
    	height:20px;
    	width:166px;
    	padding-top:4px;
    	padding-bottom:2px;
    	padding-left:2px;
    	padding-right:2px;
    }
    
    #message {
    	width:344px;
    	height:51px;
    	padding-top:4px;
    	padding-bottom:2px;
    	padding-left:2px;
    	padding-right:2px;
    }
    
    #submit {
    	padding-top:6px;
    }
    
    #leftSide {
    	position:absolute;
    	left:0px;
    	right:57%;
    	top:0px;
    	bottom:0px;
    	width:auto;
    	height:auto;
    	background-color:#4f545a;
    	background-image:url(../images/leftSide7.png);
    	background-position:right;
    	background-repeat:repeat-y;
    }
    
    #title {
    	position:absolute;
    	top:50%;
    	margin-top:-33px;
    	right:265px;
    	width:auto;
    	height:66px;
    	text-align:right;
    	line-height:26px;
    	cursor:pointer;
    }
    
    .titleSubText {
    	font-family:Helvetica, Arial, sans-serif;
    	color:#a2a0a0;
    	font-size:10pt;
    	text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
    }
    
    #arrowWrapper {
    	position:absolute;
    	top:50%;
    	margin-top:-143px;
    	right:170px;
    	width:12px;
    	height:286px;
    }
    #arrow {
    	position:absolute;
    	left:0px;
    	top:22px;
    	width:12px;
    	height:20px;
    	background-image:url(../images/highlightArrow.png);	
    }
    
    #buttonsWrapper {
    	position:absolute;
    	top:50%;
    	margin-top:-143px;
    	right:15px;
    	width:145px;
    	height:286px;
    }
    
    #aboutButtonWrapper {
    	position:absolute;
    	left:0px;
    	top:3px;
    	width:145px;
    	height:64px;
    }
    
    #aboutButton {
    	background-position:0px 0px;
    }
    
    #portfolioButtonWrapper {
    	position:absolute;
    	left:0px;
    	top:76px;
    	width:145px;
    	height:64px;
    }
    
    #portfolioButton {
    	background-position:0px -64px;
    }
    
    #servicesButtonWrapper {
    	position:absolute;
    	left:0px;
    	top:148px;
    	width:145px;
    	height:64px;
    }
    
    #servicesButton {
    	background-position:0px -128px;
    }
    
    #contactButtonWrapper {
    	position:absolute;
    	left:0px;
    	top:221px;
    	width:145px;
    	height:64px;
    }
    
    #contactButton {
    	background-position:0px -192px;
    }
    
    .navButton {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:65px;
    	height:64px;
    	background-image:url(../images/icons.png);
    	cursor:pointer;
    	z-index:2;
    }
    
    .navCaption {
    	position:absolute;
    	left:50px;
    	top:16px;
    	width:75px;
    	height:40px;
    	opacity:0;
    	z-index:1;
    }
    
    .navCaptionText {
    	font-family:Helvetica, Arial, sans-serif;
    	color:#c2c2c2;
    	font-size:11pt;
    	text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
    }
    
    .navSubCaptionText {
    	font-family:Helvetica, Arial, sans-serif;
    	color:#898989;
    	font-size:8pt;
    	text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
    }
    
    #contentPanelWrapper {
    	position:absolute;
    	top:50%;
    	margin-top:-140px;
    	left:100%;
    	right:0px;
    	width:auto;
    	height:280px;
    	background-image:url(../images/panelBack.png);
    	overflow:hidden;
    }
    
    #contentPanelEdge {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:30px;
    	height:280px;
    	background-image:url(../images/panelEdge2.png);
    }
    
    .content {
    	position:absolute;
    	left:37px;
    	top:27px;
    	width:565px;
    	height:185px;
    	padding-top:45px;
    }
    
    .contentTitle {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:565px;
    	height:30px;
    	font-family:Helvetica, Arial, sans-serif;
    	color:#434242;
    	font-size:16pt;
    	text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
    }
    
    #aboutContent {
    	display:none;	
    }
    
    #aboutText {
    	height:144px;
    	font-family:Helvetica, Arial, sans-serif;
    	color:#434242;
    	font-size:10pt;
    	text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;	
    	overflow:auto;
    }
    
    #portfolioContent {
    	background-image:url(../images/sliderBack.png);
    	background-position:-3px 50px;
    	background-repeat:no-repeat;
    	display:none;
    }
    
    #portfolioSlider {
    	position:absolute;
    	left:8px;
    	top:60px;
    	width:541px;
    	height:139px;
    	overflow:hidden;
    }
    
    #imageWrapper {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:541px;
    	height:139px;
    }
    
    #imgList ul { 
    	list-style:none;
    }
    
    #imgList li {
    	display:inline;
    	float:left;
    }
    
    #sliderToolbar {
    	position:absolute;
    	top:85px;
    	left:193px;
    	width:154px;
    	height:48px;
    	background-image:url(../images/navbarBack.png);
    	z-index:3;
    }
    
    .sliderButton {
    	position:absolute;
    	top:8px;
    	width:32px;
    	height:31px;
    	background-image:url(../images/navButtons.png);
    	cursor:pointer;
    }
    
    #prevButton {
    	left:26px;
    	background-position:0px 0px;
    }
    #prevButton:active {
    	background-position:32px 0px;
    }
    
    #nextButton {
    	left:99px;
    	background-position:0px -62px;
    }
    #nextButton:active {
    	background-position:32px -62px;
    }
    
    #servicesContent {
    	display:none;
    }
    
    .serviceColumn {
    	position:absolute;
    	top:55px;
    	width:165px;
    	height:165px;
    	font-family:Helvetica, Arial, sans-serif;
    	color:#434242;
    	font-size:8pt;
    	text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
    	line-height:12pt;
    }
    
    #serviceColumn1 {
    	left:0px;
    }
    
    #serviceColumn2 {
    	left:200px;
    }
    
    #serviceColumn3 {
    	left:400px;
    }
    
    #contactContent {
    	display:none;
    }
    
    #contactFormWrapper {
    	position:absolute;
    	left:2px;
    	top:67px;
    	width:350px;
    	height:150px;
    }
    
    #contact {
    	line-height:7px;
    	letter-spacing:1px;
    	text-align:right;
    }
    
    #successMessage {
    	position:absolute;
    	left:0px;
    	top:102px;
    	width:129px;
    	height:27px;
    	background-image:url(../images/sentBadge.png);
    	z-index:3;
    	display:none;
    }
    
    #submit {
    	width:84px;
    	height:27px;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •