mteam

Not sure if this is what your after ?

test

The last bit of code in your functions js are causing it to display vertical if you comment that out and then change the max width to 900px on .sidebar .sitefooter .widget-area{} see where that gets you
 
this is what wants commenting out
 
/** * Arranges footer widgets vertically. */ /*if ( $.isFunction( $.fn.masonry ) ) { var columnWidth = body.is( '.sidebar' ) ? 228 : 245; $( '#secondary .widget-area' ).masonry( { itemSelector: '.widget', columnWidth: columnWidth, gutterWidth: 20, isRTL: body.is( '.rtl' ) } ); }*/

something like http://jsfiddle.net/9SDLw/

add welcomebutton to this line
 
$('.scroll,.nav-collapse .nav, .welcomebutton').localScroll({ change this to start with the hash
 
<div class="welcomebutton"><a href="#lets-talk" class="btn btn-blue ">  

Maybe something like
 
#what-do-our-customers-say .inner { padding-top: 80px; padding-bottom: 80px; height: 320px; position: relative; } .testimonials-tab .etabs { margin: 30px 0 0 0; padding: 0; overflow: inherit; line-height: 1; position: absolute; top: 225px; left: 52%; } and adjust with mediaqueries for smaller screen size

line 101 in skin css try changing background-color to background
 
Sorry I just reread U your looking for the lines In screen css #page & #page bottom lines 1621 & 1629

Not doing too well with this(I guess that why they added the class for IE), give this a try its in the book.css
 
.rm-container .rm-front, .rm-container .rm-back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /*ie*/ .rm-open .rm-front, .rm-open .rm-back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: visible; backface-visibility: visible; } html:not(.safe-mod) .rm-container .rm-back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } /*ie*/ html:not(.safe-mod) .rm-open .rm-back {z-index:1000;transition:all 6s;}

line 589 & 592 should be the small screen size and then lines 1492 & 1499 above 600px wide

This is a bit of a hacky way to do it
 
.container{position:relative;overflow:hidden;} #header { width: 23.5%; /*235px*/ max-width: 235px; height: 100%; background-color: #f7d846; padding-top:80px; padding-left:0px; z-index: 100 !important; position:absolute;top:0;bottom:0;/*added this line*/ } #contentwrapper { width: 70%; /*700px*/ padding-top:11.428571%; /*80px*/ margin: 0 0 0 235px;/*added this line width of sidebar*/ }

Looking at your code I think something like this should work
 
$('.overlay, .overlay .close').on('click',function(e) { if ($(e.target).closest('a:not(.close)').length) { } else { e.preventDefault(); $('.overlay').fadeOut(500); $('.world-pop').hide(); } });

I'd guess at the first code you posted this line
 
define('DB_HOST', localhost');
 
is missing an apostrophe before localhost
 
define('DB_HOST',' localhost');

Probably not the best way (I also removed the float on the ul) see if thats what your after
 
@media only screen and (max-width: 800px) { .foot-link li { width: 32%; } .foot-link li:nth-child(3n+4){clear:left;} } @media only screen and (max-width: 600px) { .foot-link li { width: 49%; } .foot-link li:nth-child(3n+4) { clear:none;} .foot-link li:nth-child(2n+3) {clear:left;} }

I think i've understood what your after
 
Id just use a div create the effect and positioning with css and the use jquery to hide when clicked
 
Maybe something like this will work
 
<div class="pop"> Click for menu   <a href="#">close</a> </div> .popnomore{display:none;} .pop { background: #eee; border: 1px solid #ccc; padding: 10px; border-radius: 8px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); position: absolute; width: 200px; top:50px;left:50px; } /* arrows - :before and :after */ .pop:before { position: absolute; display: inline-block; border-top: 7px solid transparent; border-right: 7px solid #eee; border-bottom: 7px solid transparent; border-right-color: rgba(0, 0, 0, 0.2); left: -8px; top: 15px; content: ''; } .pop:after { position: absolute; display: inline-block; border-top: 6px solid transparent; border-right: 6px solid #eee; border-bottom: 6px solid transparent; left: -6px; top: 16px; content: ''; } $('.pop a').click(function (e) { e.preventDefault(); $('.pop').addClass('popnomore') });

body{background: url(your image add) bottom left no-repeat fixed;

I've re-done some of the jquery (I'm not the greatest at this)

function goToByScroll(id){ // Remove "links" from the ID id = id.replace("links", ""); // Scroll $('html body').animate({ scrollTop: $("#"+id).offset().top}, 'slow'); } $("#sidebar > ul > li > a").click(function(e) { // Prevent a page reload when a link is pressed e.preventDefault(); // get clicked name attribute var currentElement = $(this).attr("name"); // Call the scroll function goToByScroll($(this).attr("id")); // remove hovered class $("li a,.footer-ribbon li").removeClass("hovered"); // Add hovered class to the clicked one $(this).addClass("hovered"); // Add hovered class to footer li with matching name attr $('.footer-ribbon li[name = "' + currentElement + '"]').addClass('hovered'); }); As you seemed to have a lot of lines to do the same thing (changed a few bits of html to get working shouldn't really use the same id more than once)  
can be seen working here Matty.html if you want to see the changes I'll take down once you've checked it

You could try something like html
 
<body id="invest" onload="clickMenu('menu')" style="zoom: 1;"><!--added id to body--> <li class="sub investe"><1--added class to parent li--> do the same on the project page but with proj as id and proje as class
 
css
 
 
#invest .investe ul, #proj .proje ul{display:block;} I think that should work

zozo tabs css line 47 overflow hidden your problem

Just used this css with your html




.portThumbs { width: 251px; height: 302px; margin-left: 28px; margin-bottom: 49px; float: left; position: relative; } #some-element { opacity: 0; transition: opacity .75s ease-in-out; -moz-transition: opacity .75s ease-in-out; -webkit-transition: opacity .75s ease-in-out; } .portThumbs:hover #some-element { opacity: 1; transition: opacity .75s ease-in-out; -moz-transition: opacity .75s ease-in-out; -webkit-transition: opacity .75s ease-in-out; }

Looking at this tutorial http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/index.php it would be quite easy to implement what your trying to do

A <dt> term must be followed by a <dd> Description
 
but a description can cover more than one term
 
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <dl> <dt>album1</dt> <dt>album2</dt><dd>selction of music</dd><!--this descition covers both terms--> </dl> </body> </html>  
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <dl> <dt>album1</dt><dd>my music</dd> <dt>album2</dt><!--no description for this term--> </dl> </body> </html> hth

In your style.css line 638
 
font-weight:bold is whats causing it comment out, delete or change to font-weight:normal

Add the link to the script just before your closing body tag

In the larger screen sizes float and width is used to get the <li>'s to sit next to each other this isn't applied to the smaller screen size thats why they sit on top of each other

add to css
html{overflow-y:scroll;}

Article h2 got max width set on it