Hello.

I have a strange error I'm struggling with. Please bear in mind I'm new to web development, and my code is in a messy and experimental phase

The following Javascript runs fine, however if I move the startTimer() function call to anywhere else, or put anything in front of it, I get no errors but my CSS fails.

Code:
$(document).ready(function() {
//timer stuff
    startTimer();
    $(document).bind("mousemove", function() { resetTimer(); });
    $(document).bind("touchstart", function() { resetTimer(); });
    query();
});
//query function
function query() {
//script for iPhone portrait
if(Modernizr.mq('all and (max-width: 320px)')) {
         clearTimeout ( alertTimerId );
         clearTimeout ( counterId );
}

//script for iPhone landscape
if(Modernizr.mq('all and (min-width: 321px)')) {
         clearTimeout ( alertTimerId );
         clearTimeout ( counterId );
}

//script for iPad portrait
if(Modernizr.mq('(max-device-width: 768px) and (orientation: portrait)')) {
         clearTimeout ( alertTimerId );
         clearTimeout ( counterId );
}

//script for iPad landscape
if(Modernizr.mq('(max-device-width: 1024px) and (orientation: landscape)')) {
         clearTimeout ( alertTimerId );
         clearTimeout ( counterId );
}

//script for dekstops etc
//make sure the timer is going
startTimer();
$(document).bind("mousemove", function() { resetTimer(); });
    $(document).bind("touchstart", function() { resetTimer(); });

if(Modernizr.mq('all and (min-width: 1028px)')) {
         //script to keep the main content in the center
  $(window).resize(function(){
  $('#mainBodyList').css({
   position:'absolute',
   left: ($(window).width() - $('#mainBodyList').outerWidth())/2 + 35,
   top: ($(window).height() - $('#mainBodyList').outerHeight())/1.9
  });
});
   
//call the centering function
$(window).resize();

//vars
var line1 = document.getElementById("designLine");
var line2 = document.getElementById("codeLine");
var designHover = document.getElementById("dMenu");
var codeHover = document.getElementById("cMenu");
var designHeight = $("#dMenu")[0].scrollHeight;
var codeHeight = $("#cMenu")[0].scrollHeight;
  
//code for the design menu hover
$(designHover).hover(function(){
  TweenLite.to( $('#designLine'), 1, {css:{height:designHeight - 100, bottom:designHeight - 175}, ease:Expo.easeOut});
  TweenLite.to( $('.designMenu'), 1, {css:{top:(designHeight -75) * -1, height:designHeight+100}, ease:Expo.easeOut});
},function(){
  TweenLite.to( $('#designLine'), 1, {css:{height:'150px', bottom:'75px'}, ease:Expo.easeOut});
  TweenLite.to( $('.designMenu'), 1, {css:{top:'0', height:'100px'}, ease:Expo.easeOut});
});
        
//code for the code menu hover
$(codeHover).hover(function(){
  TweenLite.to( $('#codeLine'), 1, {css:{height:codeHeight - 100, bottom:codeHeight - 175}, ease:Expo.easeOut});
  TweenLite.to( $('.codeMenu'), 1, {css:{top:(codeHeight -75) * -1, height:codeHeight+100}, ease:Expo.easeOut});
},function(){
  TweenLite.to( $('#codeLine'), 1, {css:{height:'150px', bottom:'75px'}, ease:Expo.easeOut});
  TweenLite.to( $('.codeMenu'), 1, {css:{top:'0', height:'100px'}, ease:Expo.easeOut});
});
}
};
//time functions and tweening opacity functions
var timerId = 0;
var counterId = 0;
   
function startTimer()
{
    alertTimerId = setTimeout('fadeGUI()',60000);
};
           
function resetTimer()
{
    clearTimeout ( alertTimerId );
    clearTimeout ( counterId );
    startTimer();
    fadeGUIIn();
};
                
function fadeGUI()
{
    TweenLite.to( $('#logo'), 4, {css:{opacity:0}, ease:Expo.easeOut});
    TweenLite.to( $('#mainBodyList'), 4, {css:{opacity:0}, ease:Expo.easeOut});
};
           
function fadeGUIIn()
{
    TweenLite.to( $('#logo'), 2, {css:{opacity:0.99}, ease:Expo.easeOut});
    TweenLite.to( $('#mainBodyList'), 2, {css:{opacity:0.99}, ease:Expo.easeOut});
};
function iPhonePortrait()
{
TweenLite.to( $('#contactInfo'), 2, {css:{paddingLeft:60}, ease:Expo.easeOut});
};
In case it helps, my messy CSS:

Code:
* {
    padding: 0;
    margin: 0;
}
head {
    background: #fff;
}
body {
    background: #fff;
}
/*-- iPhone portrait --*/
  #logo {
         opacity: 1;
         margin-left: 10px;
         margin-top: 10px;
         height: 100px;
         width: 100px;
         background-image: url('../assets/AL.png');
         background-size:100px;
}
#contactInfo {
         font-family: 'Helvetica', sans-serif;
         font-size:12pt;
         padding-left: 10px;
         padding-top: 20px;
         opacity:1;
}

#contactInfo a, a:link, a:visited, a:active, a:hover {
         color:#F15A29;
         text-decoration:none;
}
#contactInfo li {
         list-style-type:none;
         line-height: 220%;
}
#mainBodyList {
         opacity: 1;
         height:100px;
         width:310px;
         margin-left: 10px;
         margin-top: 50px;
}
.menu {
         width:300px;
}
.menuHeader {
         font-family: 'Helvetica', sans-serif;
         font-size: 1px;
         margin: 0;
         opacity: 0;
}

.menuList {
         text-decoration: none;
         list-style-type: none;
}


.menuItem {
         font-family: 'Helvetica', sans-serif;
         color:#F15A29;
}

.projectHeader {
         font-family: 'Helvetica', sans-serif;
         font-weight: bold;
         font-size: 10pt;
         margin-bottom: 5px;
         margin-top: 20px;
}

.projectBody {
         font-family: 'Helvetica', sans-serif;
         font-size: 9pt;
         margin-bottom: 30px;
        
}

#designLine {
         width:0;
         height:0;
         opacity:0;
}

#codeLine {
         width:0;
         height:0;
         opacity:0;
}

.more {
         font-family: 'Helvetica', sans-serif;
         font-size: 9pt;
         text-align: left;
         background-color: #F15A29;
         color: #fff;
         width: 75px;
         float: left;
         padding: 2px;
         margin-right: 25px;
         margin-bottom: 25px;
}

.designMore {
  opacity: 0;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
}

.designMenu {
         position: relative;
         margin-top: 0;
         margin-bottom: 40px;
         padding-bottom: 10px;
}

.codeMenu {
         position: relative;
         margin-top: -75px;
         margin-bottom: 100px;
         padding-bottom: 50px;
}

/*-- iPhone landscape --*/
@media screen and (min-width: 321px) {
#logo {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  padding-left: 5px;
}

#contactInfo {
         float: left;
         margin-bottom: 0;
         margin-left: 145px;
         margin-top: 0;
         padding-top: 50px;
}

#mainBodyList {
  padding-top: 100px;
  margin-top: 0;
  width: 470px;
}
}
/*-- iPad portrait --*/
@media (max-device-width: 768px) and (orientation: portrait) {

}
/*-- iPad landscape --*/
@media (max-device-width: 1024px) and (orientation: landscape) {

}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1028px) {
#logo {
    opacity: 1;
    margin-left: 100px;
    margin-top: 50px;
    height: 100px;
    width: 100px;
    background-image: url('../assets/AL.png');
    background-size:100px;
}
#contactInfo {
position: absolute;
top:50px;
right:50px;
}

#mainBodyList {
opacity: 1;
float: left;
width:830px;
margin-top: 100px;
margin-left: 0;
padding: 0;
}
.menuHeader {
opacity:1;
    font-size: 75px;
    font-weight: 100;
}
.menuItem {
    float:left;
    overflow: hidden;
    height: 100px;
}
.projectHeader {
font-weight: bold;
font-size: 10pt;
margin-bottom: 5px;
margin-top: 20px;
}
.projectBody {
    font-size: 9pt;
    margin-bottom: 30px;
}
#designLine {
    width:6px;
    height:150px;
    position: relative;
    bottom: 75px;
    margin-left: 50px;
    opacity: 1;
    background-color:#F15A29;
}
#codeLine {
    width:6px;
    height:150px;
    position: relative;
    bottom: 75px;
    margin-left: 50px;
    opacity: 1;
    background-color:#F15A29;
}
.more {
    text-align: left;
    width: 75px;
    float: left;
    padding: 2px;
    opacity: 1;
    margin-bottom: 0px;
}
.designMore {
opacity: 1;
}
.designMenu {
    position: relative;
    height: 100px;
    overflow: hidden;
    padding: 0;
}
.codeMenu {
    position: relative;
    margin-left: 100px;
    margin-top: 0px;
    height: 100px;
    overflow: hidden;
    padding: 0;
}
 
}
Any ideas would be greatly appreciated. Thanks.