body {
background-color: #000000;
}
#container {
 position: relative;
 background-color: #000000;
 margin: 0 auto;
 width: 760px;
 height: 580px;
}
#abovenav {
position: absolute;
background-color: transparent;
top: 0px;
left: 340px;
width: 100px;
height: 20px;
color: #FFFFFF;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
}

#abovenav1 {
position: absolute;
background-color: #000000;
top: 0px;
left: 10px;
width: 80px;
height: 20px;
text-align: center;
border-right: 4px solid #A12B03;
border-left: 4px solid #A12B03;
}

/*IMPORTANT: FOR DEALING WITH THE PROBLEM OF VANISHING DROP DOWN MENU IN IE6 */
/*THE MOMENT MOUSE MOVES DOWNWARDS TOWARDS THE DROP DOWN MENU IT VANISHES */
/*SOLUTION:*/
/*INSTEAD OF THREE DROP DOWN LINKS, HAVE FOUR. THE TOP MOST LINK SHOULD BE EMPTY AND SHOULD BE POSITIONED ON TOP OF THE 3D ANIMATION MAIN LINK.*/
/*WHEN MOUSE HOVERS OVER 3D ANIMATION, THE DROP DOWN MENU OPENS. THE TOP LINK ALSO OPENS ON TOP OF 3D ANIMATION LINK. SINCE IT IS KEPT AS TRANSPARENT IT DOES NOT SHOW*/
/*THE PROBLEM OCCURS BECAUSE IE NEEDS A CONSTANT LINK BETWEEN THE MAIN LINK AND THE DROP DOWN MENU. AND SINCE THE FIRST LINK I THE DROP DOWN MENU IS ON THE 3D ANIMATION LINK, THE MOUSE EASILY PASSES FROM THE 3D LINK TO THE DROP DOWN MENU WITHOUT ANY POSSIBILITY OF BREAKAGE IN BETWEEN*/


/*the position is relative so that the topnav bar is broken form the main page flow; so it can be positioned anywhere;; z index 2 lifts the navbar more towards the viewer so that it is not overlapped by anything; it is the first thing visible from the viewers side*/
#topnav {
position: relative;
top:20px;
left: 100px;
width: 660px;
height: 30px;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
border-top: 1px solid #A12B03;
z-index: 2;
}
#topnav ul {
margin: 0px;
padding: 10px;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
}
/*position relative in ul li breaks the li away from the flow of the topnav; float left shifts the content in li to the left of the page*/
#topnav ul li {
display: inline;
list-style-type: none;
position: relative;
float: left;
}
/*this sets the dimensions etc for the a links contained within the li within the topnav; this setting shall also apply to the a=link that becomes visible on hovering over 3d animation; but we have changed the settings for that later so that we can have a narrower row for the items there.*/
#topnav ul li a, #topnav ul li a:visited
{
background-color: #000000;
color: #FFFFFF;
width: 100px;
height: 30px;
text-decoration: none;
border-right: 1px solid #fff;
padding: .75em .5em 0em .5em;
}
/*this hides the links/ the ul contained within the li of 3d animation*/
#topnav ul li ul {display: none;}

/* specific to non IE browsers;; li:hover works in all browsers other than ie:: for IE a:hover with changes has to be used */
#topnav ul li:hover a {color:#ffffff; background:#A12B03;}

/*this sets the size of the ul that shall contain the li and the a*/
#topnav ul li:hover ul {display:block; position: absolute; top:-19px; left:-20px; width:110px;}
#topnav ul li:hover ul li a.hide {background:#A12B03; color:#ffffff; }
#topnav ul li:hover ul li:hover a.hide {background:#A12B03; color:#ffffff;}

/*the following sets the border etc for the box contained links that will become visible on hover :: border gives an all around border around the a=links that will become visible on hover ::  */
#topnav ul li:hover ul li a {display:block; background:#000000; color:#ffffff; padding: .75em .5em 0em .5em; font-size: 10px; border: .5px solid #fff; height: 15px; width: 105px;}

/*this gives the changed background colour on hover*/
#topnav ul li:hover ul li a:hover {background:#A12B03; color:#ffffff;}

/*for hiding the borders and the background colours of the first link in the drop down menu*/
#topnav ul li:hover ul li a.hide1 { border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;background: transparent; }]

/*for getting a transparent background on hover */
#topnav ul li:hover ul li:hover.hide1 {background: transparent; }


#topnav ul#list li a#border
 {
 border-right: 1px solid #000000;
 }

#topnav a:link  {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
#topnav a:visited {
color: #FFFFFF;
}

#topnav a:hover {
color: #FFFFFF;
background-color: #A12B03;
text-decoration: none;
}
#topnav a:active {
color: #FFFFFF;
}

#leftcolumn {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 580px; 
}
#flash {
position: absolute;
background-color: #000000;
top: 25px;
left: 0px;
width: 100px;
height: 100px;
}
#navcontainer {
position: absolute;
top: 120px;
width: 97px;
height: 300px;
left: 0px;
}
#navcontainer ul 
{
margin: 0;
padding: 0;
list-style-type: none;
margin-left: 0px;

}
#navcontainer li
{ 
background-color: #000000;
margin: 5px 0 5px 0;

}
#navcontainer a 
{ 
display: block;
width: 97px;
height: 30px;
text-decoration: none;
text-align: center;
font-family: serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
#navcontainer a:link
{
color: #FFFFFF;
text-decoration: none;
}
#navcontainer a:visited
{
color: #FFFFFF;
text-decoration: none;
}
#navcontainer a:hover
{
background-image: url(../../../IMAGES/button-home.jpg);
margin: 5px 0 5px 0;
color: #FFFFFF;
}
#navcontainer a:active
{
color: #FFFFFF;
text-decoration: none;
}
#flash2 {
position: absolute;
top: 470px;
left: 5px;
width: 97px;
height: 70px;
}
#leftcolumnbottom {
position: absolute;
top: 540px;
left: 0px;
width: 100px;
height: 40px;
color: #CCCCCC;
font-family: sans-serif;
font-size: 11px;

font-weight: bold;
}

#header2 {
position: absolute;
background-color: #000000;
top: 50px;
left: 100px;
width: 660px;
height: 80px;
}

#studiojpg {
position: absolute;
background-image: url(../../../IMAGES/impactstudiocopy.jpg);
top: 10px;
left: 200px;
width: 229px;
height: 71px;
}
#content {
position: absolute;
background-color: #000000;
top: 130px;
left: 100px;
width: 660px;
height: 451px;
}
#content2 {
position: absolute;
background-image: url(../../../IMAGES/graphicdesign/big/persept.jpg); 
background-repeat: no-repeat;
background-position: 120px;
top: 10px;
left: 40px;
width: 580px;
height: 360px;
}


#content3a {
position: absolute;
top: 380px;
left: 40px;
width: 290px;
height: 20px;
color: #ffffff;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}

#content3b {
position: absolute;
top: 380px;
left: 330px;
width: 290px;
height: 20px;
color: #ffffff;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
#content3a a, #content3b a {
text-decoration: none;
color: #ffffff;
}

#content3a a, #content3b a {
text-decoration: none;
color: #ffffff;
}
#content3a a:link, #content3b a:link {
text-decoration: none;
color: #FFFFFF;
}
#content3a a:visited, #content3b a:visited {
text-decoration: none;
color: #FFFFFF;
}
#content3a a:hover, #content3b a:hover {
text-decoration: none;
color: #A12B03;
}
#content3a a:active, #content3b a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #A12B03;
}
#content4 {
position: absolute;
top: 416px;
left: 0px;
width: 660px;
height: 33px;
text-align: center;
font-family: serif;
font-size: 11px;
color: #999999;
text-decoration: none;
border-top: 2px solid #A12B03;
}
#content4 a {
text-decoration: none;
color: #A12B03;
}
#content4 a:link  {
text-decoration: none;
color: #A12B03;
}
#content4 a:visited {
text-decoration: none;
color: #A12B03;
}
#content4 a:hover {
text-decoration: none;
color: #999999;
}
#content4 a:active {
text-decoration: none;
color: #999999;
background-color: #A12B03;
}