/******************** ZI CSS - BODY ************************/

body, html{
    font: 12px arial,Verdana,Arial,Sans-serif;
    color: #7f7f7f;
    line-height: 12pt;
    font-weight: normal;
    background-color: #000000; 
    text-align: center;
    min-width: 760px;
    margin: 0px;
    padding: 0px;
    scrollbar-face-color: #272727;
    scrollbar-shadow-color: #272727;
    scrollbar-highlight-color: #272727;
    scrollbar-3dlight-color: #272727;
    scrollbar-darkshadow-color: #000000;
    scrollbar-track-color: #000000;
    scrollbar-arrow-color: #ccff00;
}

/*
  Damien:
    This img block setting is an importantly needed addition, much like
     the margin 0 and things needed for body, basically it fixed the problem
    with FF and Safari where little gaps appear around places that images
    are being used because these browsers make them default as display:
    inline. This sets the default to be the standard of IE
*/
img {
  display: block;
}

/* Other general top level settings */
table, td, tr {
  border: 0px;
  border-collapse: collapse;
  padding: 0px;
  vertical-align: top;
}

        
/******************** BIG DIV ************************/

#bigdiv {
	background-color: #272727;
    margin:0 auto;
    width:760px;
	text-align: left;
	position:relative;
	border-top: 0px;
	border-bottom: 20px;
	border-style: solid;
	border-color: #000000;
}

/******************** FLASH ************************/

div#flash {
  width:740px;
  /* This is substituded by the javascript margin: -295px 0px 10px 10px;*/
  z-index:10;
  text-align: center;
}


/******************** NO FLASH ************************/

div#noflash {
  text-align:left;
  margin: 0px 0px 15px 20px;
}

/******************** COLUMNS HOLDER ************************/

div#hold{
  min-width:720px;
  margin: 0px 20px 0px 20px;
  position:relative;
  height:100%;
}

div#hold table {
  width: 100%;
}

/******************** HOME PAGE COLUMNS ************************/

div#col1{
  float: left;
  width: 240px;
  padding: 5px 0px 0px 0px;
  background-image: url(img/fade.gif);
  background-repeat: no-repeat;
}

div#col2{
  float: left;
  width: 240px;
  clear: none;
  padding: 5px 0px 0px 0px;
  background-image: url(img/fade.gif);
  background-repeat: no-repeat;
}

div#col3{
  background: url(img/curve_tl.gif) 0 0 no-repeat;
  background-color: #1d1d1d;
  float: left;
  clear: right;
  width: 240px;
  padding: 5px 0px 0px 0px;
}


/************************* LEFT & RIGHT *****************************/

div#colleft{
background-image: url(img/fade_column_left.gif);
background-repeat: no-repeat;
float: left;
width: 480px;
height:100%;
padding: 5px 0px 0px 0px;
}

div#colright{
background: url(img/curve_tl.gif) 0 0 no-repeat;
background-color: #1d1d1d;
width: 240px;
padding: 5px 0px 0px 0px;
height:100%;
top:0px;
}


/************************ PORTFOLIO & SUBMENU ******************************/

div#colportfolio{
background-image: url(img/fade_column_540.gif);
background-repeat: no-repeat;
float: left;
width: 550px;
padding: 5px 0px 0px 0px;
}

div#submenu{ 
float: left;
clear:right;
width: 170px;
padding-right:10px;
}


/************************** FOOTER ****************************/

div#footer {
  background: #212121;
  height: 117px;
  margin:0 auto;
  width:760px;
  text-align: left;
  background-image: url(img/footer.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  position:relative;
}


div#footer a{
padding: 0 10px 0 0;
}

/*********************** P & H TAGS *******************************/

p {
font: 12px arial,Verdana,Arial,Sans-serif;
color: #7f7f7f;
line-height: 12pt;
text-align:left;
padding:0px 15px 15px 10px;
margin:0px;
position:relative;
font-weight: normal;
}


h1 {
font: 16px "Trebuchet MS",Verdana,Arial,Sans-serif;
text-transform: uppercase;
font-weight: normal;
color: #acacac;
text-decoration : none;
position:relative;
text-align:left;
padding:0px 10px 0px 10px;
margin:0px;
}


h2 {
font: 12px arial, Verdana,Arial,Sans-serif;
line-height: 12pt;
color: #ccff00;
text-decoration : none;
position:relative;
text-align:left;
padding:5px 10px 5px 10px;
margin:0px;

}


h5 {
margin: 0px;
padding: 80px 0px 0px 25px; 
font: 11px TrebuchetMS,Tahoma,Verdana,Arial,Sans-serif;
color: #999;
text-align:left;
background-image: url(img/bottom_logos.gif);
background-repeat: no-repeat;
}


img{
border:0px;
}


/*********************** LIST TAGS *******************************/

li{
color: #7f7f7f;
text-align: left;
list-style-type: none;
list-style-position: outside;
padding: 0px 0px 7px 0px;
}


ul{
margin-left:20px; 
margin-right:0px; 
list-style:none;
}


/*********************** HYPERLINKS TAGS *******************************/

a:link {
text-decoration: none;
color: #acacac;
}

a:visited {
text-decoration: none;
color: #888888;
}

a:active {
text-decoration: none;
}

a:hover {
text-decoration: none; 
color: #ccff00;
}


/*********************** HOME PAGE - DTECH *******************************/

div#dtechnews {
font: 12px arial, Verdana,Arial,Sans-serif;
color: #7f7f7f;
line-height: 12pt;
text-align:left;
padding: 0px 10px 0px 10px; 
}

.dtechnewsrow{
padding:0px 0px 15px 0px;
}

.dtechnewstitle {
float:left;
color: #ccff00;
padding:10px 0px 5px 0px;
}

.dtechnewsdate{
float:right;
padding: 10px 0px 0px 0px;
}

.dtechnewsimage {
padding: 0px 0px 5px 0px;
border:none;
clear:both;
}

.dtechnewsproject{ 
display:none;
}

.dtechnewsclient{
display:none;
}


.dtechnewslink{
display:none;
}

.dtechnewswaffle{
}    
    


/****************************** NEWS PAGE - DTECH ***************************/
    

/**NEWS DIV**/

div#newsnews {
font: 12px arial, Verdana,Arial,Sans-serif;
color: #7f7f7f;
line-height: 12pt;
text-align:left;
}


/**NEWS ROW**/

.newsnewsrow{
background-image: url(img/fade_column_left.gif);
background-position: top right;
background-repeat: no-repeat;
padding: 10px 20px 20px 10px;
}


/***TITLE***/

.newsnewstitle {
float:left;
color: #ccff00;
}

/***DATE***/

.newsnewsdate{
float:right;
}


/***IMAGE***/

.newsnewsmainimage {
border:none;
clear: both;
padding: 5px 0px 0px 0px;
}

/*
.newsnewsimage {
display: none;
}
*/

/**PROJECT**/

.newsnewsproject{
padding: 5px 0px 0px 0px
}


/**CLIENT**/

.newsnewsclient{
padding: 5px 0px 0px 0px
}

/**LINK**/

.newsnewslink{
padding: 5px 0px 0px 0px;
}



/**WAFFLE**/

.newsnewswaffle{
padding: 5px 0px 0px 0px;
}



/****************************** PORTFOLIO PAGE - DTECH ***************************/
    
div#pportfolio {
font: 12px arial, Verdana,Arial,Sans-serif;
color: #7f7f7f;
line-height: 12pt;
text-align:left;
}

.pportfoliorow{
background-image: url(img/fade_column_left.gif);
background-position: top right;
background-repeat: no-repeat;
padding:0px 0px 20px 0px;
clear:both;
}

.pportfoliocategory{
display: none;
}

.pportfolioautosequencenumber{
color: #999;
font: 27px arial, Verdana,Arial,Sans-serif;
color: #acacac;
padding: 3px 0px 0px 0px;
}

.pportfolioimage {
border:none;
padding: 0px 10px 20px 0px;
float: left;
width: auto;
height: auto;
}

.pportfoliodate{
clear: right;
padding: 0px 0px 4px 0px;
}

.pportfoliotitle {
text-transform:uppercase;
clear: right;
color: #ccff00;
padding: 0px 0px 4px 0px;
}

.pportfolioclient{
padding: 0px 0px 4px 0px;
}

.pportfoliolink{
padding: 0px 0px 4px 0px;
}
    


/****************************** PORTFOLIO SUBMENU - DTECH ***************************/

div#submenu{
padding: 0px 0px 0px 0px;
z-index: 5;
}


div#portfoliocategory a{
color: #c4f40b;
display: block;
text-transform: uppercase;
}

div#portfoliocategory a:hover{
color: #acacac;
}

.portfoliocategorygroup{
font: 12px arial, Verdana,Arial,Sans-serif;
font-weight: bold;
line-height: 15pt;
text-align:left;
padding: 0px 0px 0px 20px;
margin-bottom: 10px;
clear:both;
background-image: url(img/menu_fade.gif);
background-position: top left;
background-repeat: no-repeat;
}

/**************************************************************************************/

div#clearer {
    font-size: 0px;
    line-height: 0px;
    display: block;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
    width: auto;
}

.righttablecell {
  background: #1d1d1d;
}

.lefttablecell {
  width: 480px;
}

/*********************************** EMAIL FORM *************************************/

#form{
padding: 0 0 0 10px;
margin:0;
}

#form td {
padding: 0 10px 0 0;}


.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 5px 0;
padding-left: 200px; /*width of left column containing the label elements*/
height: 1%;
}

.cssform label{
float: left;
margin-left: -155px; /*width of left column*/
width: 100px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 300px;
border:0;
background-color: #1d1d1d;
color: #fff;
}

textarea{
width: 305px;
height: 102px;
border:0;
background-color: #1d1d1d;
}