/* =universals 
These rules are applied to all elements unless otherwise specified below. */
* { margin : 0; padding : 0; }

/* =body */
body {  }

/* =hx */
h1, h2, h3 { font-weight : bold; text-transform : uppercase; }

html,body {
	height: 100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#003;
	font-size:10px;
}





html {		background-repeat: repeat-x; background-color:#FFFFFF; background-position: 50% 50% }

	body {	 margin:0;	padding:0;	background-image: url(../images/mainbg.jpg);	background-repeat:no-repeat;	text-align:center; background-position: 50% 50%}
	html,body { height: 100%; font-family:Verdana, Arial, Helvetica, sans-serif;  font-size:10px; }
	body {  margin : auto auto;   }









/* =code */
code, pre {  font : 80% monaco, courier, monospace; font-weight : normal; color : #000000; }
pre {  padding-left : 20px; font-size : 80%; }


/* =img */
img, img a { border : none }
abbr, acronym { text-decoration : none; border : none; }


/* =a */
a:link { text-decoration : none; color : #FFFFFF;  }
a:visited { text-decoration : none; color : #FFFFFF;  }
a:hover { color : #D9401A;  }
a:active, a:focus { color : #D9401A;  }

/* a:focus { outline: none; }  removing dotted lines for Firefox, only for mouse navigation, however, it doesnt seem to work, so try applying overflow: hidden to the FIR elements in question */


/* generic layout design 
ul { margin-top:20px;}

*/

h1{margin-top:10px; text-align:left; font-size:14px; font-weight : bold;}
h2{margin-top:10px; text-align:center; font-size:14px; font-weight : bold;}
p {margin-top:15px;}



/* layout */
div#container { 
position : relative; 
width : 960px; 
min-height: 100%;
height: auto !important; 
height: 100%;
margin : auto auto; 
text-align : left;  

}




div#content_main_wrapper {  
width : 960px;

/* Positioning something vertically in the middle, with known height*/
position: absolute;
top:50%;
margin-top:-315px; /* then subtract the half of elements height*/

 }
 





 

 

/* Page specific menu link decoration */	

body.about #aabout,
body.portfolio #aportfolio,
body.info #ainfo,
body.contact #acontact,
body.clients #aclients,
body.threed #a3d,
body.twod #a2d,
body.movie #amovie
{
text-decoration:underline !important;
color:#01025C;
}

 div#altcont ul {
list-style-type:none  !important;
}


/* move list from left for IE to be able to display them 
ul{ 
list-style-type:circle;
margin-left: 20px
}
*/	

dt {
font-size:14px;
font-weight:bold;
margin-bottom:15px;}




/* Header - main Menu */
/* -------------------------------*/

#menu {	width: 960px; height:85px; margin:0;	padding:0;	background-image: url(../images/cd-top.jpg);	background-repeat:no-repeat;	text-align:center; background-position: top left}


#menu ul {
display: inline;
margin: 0;
padding: 0;
}

#menu li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}


/* Menu home */

li.menuhome a {
background: url(../images/home.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 35px;
left: 315px;
width: 106px;
height: 38px;
text-indent: -999999px;
overflow: hidden;
}

li.menuhome a:hover {
background: url(../images/home.jpg);
background-position: -106px 0;
}




/* Menu info */

li.menuinfo a {
background: url(../images/info.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 35px;
left: 422px;
width: 78px;
height: 38px;
text-indent: -999999px;
overflow: hidden;
}

li.menuinfo a:hover {
background: url(../images/info.jpg);
background-position: -78px 0;
}





/* Menu clients */

li.menuclients a {
background: url(../images/clients.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 35px;
left: 501px;
width: 112px;
height: 38px;
text-indent: -999999px;
overflow: hidden;
}

li.menuclients a:hover {
background: url(../images/clients.jpg);
background-position: -112px 0;
}



/* Menu portfolio */

li.menuportfolio a {
background: url(../images/portfolio.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 35px;
left: 614px;
width: 141px;
height: 38px;
text-indent: -999999px;
overflow: hidden;
}

li.menuportfolio a:hover {
background: url(../images/portfolio.jpg);
background-position: -141px 0;
}





/* Menu contact */

li.menucontact a {
background: url(../images/contact.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 35px;
left: 756px;
width: 127px;
height: 38px;
text-indent: -999999px;
overflow: hidden;
}

li.menucontact a:hover {
background: url(../images/contact.jpg);
background-position: -127px 0;
}


/* -------------------------------*/
/* Submenus
/* -------------------------------*/

#submenu {	display:block; position:absolute;  width: 960px; height:85px; margin:0;	padding:0;}


#submenu ul {
display: inline;
margin: 0;
padding: 0;
}

#submenu li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}




/* Menu 2d */

li.menu2d a {
background: url(../images/2d.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 5px;
left: 329px;
width: 69px;
height: 36px;
text-indent: -999999px;
overflow: hidden;
}

li.menu2d a:hover {
background: url(../images/2d.jpg);
background-position: -69px 0;
}

body.twod li.menu2d a {
background: url(../images/2d.jpg);
background-position: -69px 0;
}

/* Menu 3d */

li.menu3d a {
background: url(../images/3d.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 5px;
left: 399px;
width: 69px;
height: 36px;
text-indent: -999999px;
overflow: hidden;
}

li.menu3d a:hover {
background: url(../images/3d.jpg);
background-position: -69px 0;
}

body.threed li.menu3d a {
background: url(../images/3d.jpg);
background-position: -69px 0;
}


/* Menu movie */

li.menumovie a {
background: url(../images/movie.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 5px;
left: 469px;
width: 109px;
height: 36px;
text-indent: -999999px;
overflow: hidden;
}

li.menumovie a:hover {
background: url(../images/movie.jpg);
background-position: -109px 0;
}

body.movie li.menumovie a {
background: url(../images/movie.jpg);
background-position: -109px 0;
}

/* Menu Back to Site */

li.menuback a {
background: url(../images/backto.jpg);
background-position: 0 0;
display: block;
position:absolute;
top: 5px;
left: 733px;
width: 185px;
height: 36px;
text-indent: -999999px;
overflow: hidden;
}

li.menuback a:hover {
background: url(../images/backto.jpg);
background-position: -185px 0;
}


/* -------------------------------*/
/* terms - visitportoflio*/
/* -------------------------------*/


/* Terms link */

#tnc {
display:block;
position:absolute;
}

#tnc a {
background: url(../images/tnc.jpg);
background-position: 0 0;
display: block;
position:relative;
top: 485px;
left: 30px;
width: 129px;
height: 7px;
text-indent: -999999px;
overflow: hidden;
}


/* visitportfolio */

div#visitportfolio {  
display: block;
position:relative;
left: 322px;
top: 181px;
 }
 

div#visitportfolio a {
background: url(../images/visitportfolio.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 198px;
height: 21px;
text-indent: -999999px;
overflow: hidden;
}

div#visitportfolio a:hover {
background: url(../images/visitportfolio.jpg);
background-position: -198px 0;
}


/* switch to html button */


div#switch {  
display: block;
position:relative;
left: 294px;
top: 179px;
 }
 

div#switch a {
background: url(../images/switch.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 251px;
height: 22px;
text-indent: -999999px;
overflow: hidden;
}

div#switch a:hover {
background: url(../images/switch.jpg);
background-position: -251px 0;
}







/* -------------------------------*/
/* Main contents */
/* -------------------------------*/

#cdcontent {
	width: 960px;
	height:269px;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
	text-align:center;
	background-position: top left
}

#cdcontent_portfolio {
	width: 960px;
	height:269px;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
	text-align:center;
	background-position: top left
}

#cdcontent_home {
	width: 960px;
	height:269px;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
	text-align:center;
	background-position: top left
}





#main_textcontent { position:relative; display:block; padding-left: 60px; padding-right: 60px; padding-top:15px; text-align:left;}


#cdcontent_vert {	display: block; position:absolute; left:315px; width: 645px; height:545px; margin:0;	padding:0;	background-image: url(../images/cdvert_content.jpg);	background-repeat:no-repeat;	text-align:center; background-position: top left}

#main_textcontent_vert { position:relative; display:block; padding-left: 40px; padding-right: 65px; padding-top:55px; text-align:left;}

/* -------------------------------*/
/* COG Vert states */
/* -------------------------------*/

#vertstate {	display: block; position:absolute;  width: 315px; height:545px; margin:0;	padding:0;	background-image: url(../images/cdvert_cogbg.jpg);	background-repeat:no-repeat;	text-align:center; background-position: top left}


#cog_vert ul {
display: inline;
margin: 0;
padding: 0;
}

#cog_vert li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}




 div#icon_2d{  
 display: block;
position:absolute;
left: 79px;
top: 169px;
 }
 
  div#icon_3d {  
  display: block;
position:absolute;
left: 50px;
top: 308px;
 }

div#icon_movie {  
display: block;
position:absolute;
left: 65px;
top: 475px;
 }
 
 

/* Icon 2d */

li.icon2dclass a {
background: url(../images/icon_2d.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 93px;
height: 48px;
text-indent: -999999px;
overflow: hidden;
}

li.icon2dclass a:hover {
background: url(../images/icon_2d.jpg);
background-position: -93px 0;
}

body.twod li.icon2dclass a  {
background: url(../images/icon_2d.jpg);
background-position: -93px 0;
}


/* Icon 3d */

li.icon3dclass a {
background: url(../images/icon_3d.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 107px;
height: 69px;
text-indent: -999999px;
overflow: hidden;
}

li.icon3dclass a:hover {
background: url(../images/icon_3d.jpg);
background-position: -107px 0;
}

body.threed li.icon3dclass a {
background: url(../images/icon_3d.jpg);
background-position: -107px 0;
}

/* Icon movie */

li.iconmovieclass a {
background: url(../images/icon_movie.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 99px;
height: 51px;
text-indent: -999999px;
overflow: hidden;
}

li.iconmovieclass a:hover {
background: url(../images/icon_movie.jpg);
background-position: -99px 0;
}

body.movie li.iconmovieclass a  {
background: url(../images/icon_movie.jpg);
background-position: -99px 0;
}









/* -------------------------------*/
/* COG states */
/* -------------------------------*/


/*background-image: url(../images/cog_infostate.jpg);	
background-image: url(../images/cog_clientsstate.jpg);
background-image: url(../images/cog_portfoliostate.jpg)
background-image: url(../images/cog_homestate.jpg);	
background-image: url(../images/cog_contactstate.jpg);*/

#infostate {	width: 960px; height:276px; margin:0;	padding:0;	background-repeat:no-repeat;	text-align:center; background-position: top left}

#clientstate {	width: 960px; height:276px; margin:0;	padding:0;		background-repeat:no-repeat;	text-align:center; background-position: top left}

#portfoliostate {	width: 960px; height:276px; margin:0;	padding:0;	;	background-repeat:no-repeat;	text-align:center; background-position: top left}

#homestate {	width: 960px; height:276px; margin:0;	padding:0;	background-repeat:no-repeat;	text-align:center; background-position: top left}

#contactstate {	width: 960px; height:276px; margin:0;	padding:0;		background-repeat:no-repeat;	text-align:center; background-position: top left}

#cogmain ul {
display: inline;
margin: 0;
padding: 0;
}

#cogmain li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}




 div#iconleft{  
 display: block;
position:absolute;
left: 193px;
top: 414px;
 }
 
  div#iconright {  
  display: block;
position:absolute;
left: 695px;
top: 414px;
 }


/* Icon home */

li.iconhomeleft a {
/*background: url(../images/icon_home_left.jpg);
*/background-position: 0 0;
display: block;
position:absolute;
width: 70px;
height: 145px;
text-indent: -999999px;
overflow: hidden;
}

li.iconhomeleft a:hover {
/*background: url(../images/icon_home_left.jpg);
background-position: -70px 0;
*/}




/* Icon info */


li.iconinfoleft a {
/*background: url(../images/icon_info_left.jpg);
*/background-position: 0 0;
display: block;
position:absolute;
width: 70px;
height: 145px;
text-indent: -999999px;
overflow: hidden;
}

li.iconinfoleft a:hover {
/*background: url(../images/icon_info_left.jpg);
background-position: -70px 0;
*/}


li.iconinforight a {
/*background: url(../images/icon_info_right.jpg);
background-position: 0 0;
*/display: block;
position:absolute;
width: 72px;
height: 144px;
text-indent: -999999px;
overflow: hidden;
}

li.iconinforight a:hover {
/*background: url(../images/icon_info_right.jpg);
background-position: -72px 0;
*/}



/* Icon clients */

li.iconclientsright a {
/*background: url(../images/icon_clients_right.jpg);
background-position: 0 0;
*/display: block;
position:absolute;
width: 72px;
height: 144px;
text-indent: -999999px;
overflow: hidden;
}

li.iconclientsright a:hover {
/*background: url(../images/icon_clients_right.jpg);
background-position: -72px 0;
*/}


li.iconclientsleft a {
/*background: url(../images/icon_clients_left.jpg);
background-position: 0 0;
*/display: block;
position:absolute;
width: 70px;
height: 145px;
text-indent: -999999px;
overflow: hidden;
}

li.iconclientsleft a:hover {
/*background: url(../images/icon_clients_left.jpg);
background-position: -70px 0;
*/}



/* Icon portfolio */

li.iconportfolioright a {
/*background: url(../images/icon_portfolio_right.jpg);
background-position: 0 0;
*/display: block;
position:absolute;
width: 72px;
height: 144px;
text-indent: -999999px;
overflow: hidden;
}

li.iconportfolioright a:hover {
/*background: url(../images/icon_portfolio_right.jpg);
background-position: -72px 0;
*/}

li.iconportfolioleft a {
/*background: url(../images/icon_portfolio_left.jpg);
background-position: 0 0;
*/display: block;
position:absolute;
width: 70px;
height: 145px;
text-indent: -999999px;
overflow: hidden;
}

li.iconportfolioleft a:hover {
/*background: url(../images/icon_portfolio_left.jpg);
background-position: -70px 0;
*/}




/* Icon contact */

li.iconcontactright a {
/*background: url(../images/icon_contact_right.jpg);
background-position: 0 0;
*/display: block;
position:absolute;
width: 72px;
height: 144px;
text-indent: -999999px;
overflow: hidden;
}

li.iconcontactright a:hover {
/*background: url(../images/icon_contact_right.jpg);
background-position: -72px 0;
*/}



/* Icon 2d */

li.icon2d a {
background: url(../images/2d_icon.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 75px;
height: 100px;
text-indent: -999999px;
overflow: hidden;
}

li.icon2d a:hover {
background: url(../images/2d_icon.jpg);
background-position: -75px 0;
}



/* Icon 3d */

li.icon3d a {
background: url(../images/3d_icon.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 75px;
height: 100px;
text-indent: -999999px;
overflow: hidden;
}

li.icon3d a:hover {
background: url(../images/3d_icon.jpg);
background-position: -75px 0;
}



/* Icon movie */

li.iconmovie a {
background: url(../images/movie_icon.jpg);
background-position: 0 0;
display: block;
position:absolute;
width: 75px;
height: 100px;
text-indent: -999999px;
overflow: hidden;
}

li.iconmovie a:hover {
background: url(../images/movie_icon.jpg);
background-position: -75px 0;
}








/* -------------------------------*/
/* Contact page
/* -------------------------------*/

#errormsg {
display:block;
position:absolute;
top:13px;
left:700px;
color:#D9401A;
}


#contact_methods{
margin-top: 10px;
margin-bottom: 35px;
}

#contact_methods ul {
display: inline;
margin: 0;
padding: 0;
}
#contact_methods img	{
	padding:0;
	margin:0;
	vertical-align:bottom;
}

#contact_methods li {
display: inline;
list-style: none;
margin: 0;
margin-right:150px;
padding: 0;
}


input { height: 100%; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px;
	border: 1px solid #FFFFFF;
	height: 17px;
	background-color:#0E1447; }
	
	
form {  margin: 10px;}
form ol{ list-style-type: none;}
form ul{ list-style-type: none;}
form textarea { 
background-color:#0E1447;
height: 70px;
border: 1px solid #FFFFFF;
width: 300px;	
font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px
}

form ol li {
margin-top: 15px;
margin-bottom: 15px;
}


form label {
display: -moz-inline-box; /* Fixes Firefox */
display: inline-block;
line-height: 1.8;
vertical-align: top;
  width: 120px; 
}

form  ol li .loginimage {
display:block;
position:absolute;
top: 218px;
left: 439px;
border:0px;
width:88px;
height:32px;
}

#messagearea {
display:block;
position:absolute;
width: 600px;
top:126px;
left:400px;

}



/* -------------------------------*/
/* Gallery
/* -------------------------------*/


#gallery ul {
display: block;
margin: 0;
padding: 0;
}

#gallery li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}




div#item1 {  
display: block;
position:absolute;
margin: 0;
padding: 0;
left: 47px;
top: 180px;
 }
 
div#item1 a:hover img  {
border: 1px solid #D9401A;
 }
 
 
div#item2 {  
display: block;
position:absolute;
left: 370px;
top: 180px;
 }
 
 
 div#item2 a:hover img  {
border: 1px solid #D9401A;
 } 
 
div#item3 {  
display: block;
position:absolute;
left: 47px;
top: 310px;
 }
 
 
 div#item3 a:hover img {
border: 1px solid #D9401A;
 }
 
div#item4 {  
display: block;
position:absolute;
left: 370px;
top: 310px;
}

div#item4 a:hover img  {
border: 1px solid #D9401A;
 }