﻿/** Setup **/

body, div, blockquote, p, a, h1, h2, h3, h4, h5, h6, table, tbody, tr, td 
                { padding: 0; margin:0; }

body            { font-family: Arial, Helvetica, Sans-Serif; background-color: #555555;}

/** Library **/

.small          { width: 100px; }
.medium         { width: 150px; }
.long           { width: 200px; }
.mlong          { width: 250px; }
.xlong          { width: 350px; }
.short          { height: 20px; }
.mtall          { height: 45px; }
.tall           { height: 60px; }
.xtall          { height: 120px; }

.center         { display: block; text-align:center; }

/** Structure **/

#logo           { display:block; position:absolute; z-index: 1000; 
                    background-image: url('../img/dtc-logo.png'); width:190px; height: 129px; 
                    top: 5px; text-decoration:none; border:0;}
                
#header         { display:block; z-index: 900; width: 100%; height:93px; background-image: url('../img/header-bar-gradient.png'); position:absolute; top: 0; left:0;}

#main-frame     { display:block; z-index: 200; width: 1000px; height:100%; background-color: #333333; 
                    border-right: solid 1px #666666; border-left: solid 1px #666666; 
                    padding: 105px 0px 0px 0px; margin: 0px auto 0px auto; }
                
#feature-box    { display:block; width: 962px; height: 218px; border: solid 4px #777777; margin: 0px auto 0px auto; background-repeat:no-repeat; background-image: url('../img/feature-home-gearsmetal.jpg'); }

    #feature-box #text { display: block; margin: 88px 0px 0px 10px; background-image: url('../img/text/technology-for-good.png'); width: 350px; height: 41px; }

#inner-headline { display: block; width: 962px; height:99px; border: solid 4px #777777; margin: 0px auto 0px auto; background-repeat: no-repeat; background-image:url('../img/inner-headliner.jpg'); }

    #inner-headline #text       { display: block; background-repeat:no-repeat; margin: 34px 0px 0px 10px; }
    
    #inner-headline #text.whoweare  { background-image: url('../img/text/headline-who-we-are.png'); width: 202px; height: 32px; }
    #inner-headline #text.whatwedo  { background-image: url('../img/text/headline-what-we-do.png'); width: 206px; height: 32px; }
    #inner-headline #text.portfolio { background-image: url('../img/text/headline-portfolio.png'); width: 143px; height: 32px; }
    #inner-headline #text.testimon  { background-image: url('../img/text/headline-testimonials.png'); width: 210px; height: 32px; }
    #inner-headline #text.contact   { background-image: url('../img/text/headline-contact-us.png'); width: 180px; height: 30px; }
    #inner-headline #text.blog      { background-image: url('../img/text/headline-blog.png'); width: 73px; height: 41px; }
    #inner-headline #text.jobs      { background-image: url('../img/text/headline-jobs.png'); width: 74px; height: 32px; }

#content-frame  { display: block; padding: 0px 19px 10px 19px; }

#main-two-column
                { display:block; width: 700px; padding: 10px 0px 0px 10px; }

#intro-box      { display:block; width: 715px; margin: 15px 0px 0px 0px; }
    
    #intro-box #feature-text { display:block; width:710px; height:42px; margin: 0; background-repeat:no-repeat; background-image: url('../img/text/home-using-tech-for-positiv.png'); }
                    
#home-boxes     { display: block; width: 725px; margin: 20px 0px 0px 0px; }

    #home-boxes .box-header     { display:block; height:20px; border-bottom: solid 1px #444444; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px; background-repeat:no-repeat;}                                      
    #home-boxes #what-we-do     { display:block; width: 355px; }    
    #home-boxes #contact        { display:block; width: 355px; float:right; }
    
        #home-boxes #what-we-do p   { font-size: 12px; padding: 0; margin: 10px 0px 10px 0px; }
        #home-boxes #contact p      { font-size: 14px; padding: 0; margin: 10px 15px 10px 15px; }
                
    #home-boxes #contact #contact-header        { background-image: url('../img/text/home-contact-us.png'); }
    #home-boxes #what-we-do #what-we-do-header  { background-image: url('../img/text/home-what-we-do.png'); }
    
    .contactby      { display:block; height: 25px; font-size: 14px; margin: 5px 20px 10px 5px; 
                        padding: 0px 0px 0px 30px; color: #dddddd; font-weight: bold; }
                        
    #byphone, #byemail, #byskype    { background-repeat:no-repeat; background-position: 0px 1px;}
    
    #byphone                        { background-image: url('../img/phone.jpg'); }
    #byemail                        { background-image: url('../img/envelope.jpg'); }
    
    #byskype #skypebutton           { display: block; float: left; height: 23px; width: 70px; margin: -4px 10px 0px 0px;}

#home-gallery                           { display: block; padding: 5px; height: 135px;}
#home-gallery .gallery-item             { display: block; float: left; width: 100px; height: 130px; 
                                            margin: 0px 15px 0px 0px; background-color: #444444; }
#home-gallery .gallery-item:hover
                                        { background-color: #555555; }
#home-gallery .gallery-item img         { display: block; border: solid 3px #999999; width: 85px; height: 60px; margin: 5px auto; }
#home-gallery .gallery-item .caption    { display: block; width: 85px; margin: 8px auto; font-size: .6em; color: #ffffff; }
#home-gallery .gallery-item:hover .caption 
                                        { color: #FFFF99; text-decoration:none }
#home-gallery-more                      { display: block; text-align: left; padding: 0px 0px 0px 0px; 
                                            font-size: .8em; margin: 0; text-decoration:none;}
        
#sidebar        { display: block; width: 225px; float:right; margin: 10px 0px 0px 0px; padding: 10px 0px 0px 0px; }

    #sidebar .box    { display:block; margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; width:inherit; }
    
    #sidebar .box .header   { display:block; margin: 0px 0px 10px 0px; background-repeat:no-repeat; 
                                height:17px; width:inherit; border-bottom: solid 1px #444444; 
                                padding: 0px 0px 5px 0px; font-size: 15px; font-weight:bold; color: #eeeeee;}
    
    #sidebar .box p         { padding: 0px 10px 5px 10px; margin:0;}
    #sidebar .box p.highlight-small
                            { font-size: .7em; color: #cccccc; line-height: 1.3em; padding: 5px 25px 0px 25px; }
                            
    #sidebar #team-blog.box .header     { background-image: url( '../img/text/side-team-blog.png' ); }
    #sidebar #our-services.box .header  { background-image:url('../img/text/side-our-services.png'); }
    #sidebar #our-clients.box .header   { background-image:url('../img/text/side-our-clients.png'); }
    #sidebar #more.box .header          { background-image:url('../img/text/side-more.png'); }
    
    #sidebar .box .item                 { font-size: 12px; background-image: url('../img/gear-gray.jpg'); 
                                            background-repeat:no-repeat; background-position: 0px 1px; 
                                            padding: 0px 0px 0px 25px; margin: 0px 10px 15px 10px; color: #eeeeee; }
    #sidebar #team-blog.box .item       { font-size: 12px; }
    #sidebar #our-services.box .item    { font-size: 12px; }
    #sidebar #more.box .item            { font-size: 12px; }    
    
#footer         { display:block; width: 1000px; height:123px; background-image: url('../img/footer.jpg'); 
                    background-repeat:no-repeat; margin: 0px auto 0px 0px; clear:both; }
    #footer p       { margin:0; padding:0; }
    #footer a       { color:#dee8ee; text-decoration:none; }
    #footer a:hover { color: #A9C4D3; }
    
#simple-nav { display: block; width: 100px; float: left; margin: 15px 0px 0px 175px; text-align: right; 
                padding: 0px 15px 0px 0px; border-right: solid 1px #dee8ee; border-right-color: #aaaaaa; }
#nav-column { display: block; width: 100px; float: left; margin: 15px 0px 0px 10px; text-align:left;
                padding: 0px 15px 0px 0px; border-right-color: #aaaaaa; }
                
    #simple-nav a, #nav-column a { display:block; font-size: 11px; margin: 0px 0px 2px 0px; }  
        
#legal          { display: block; width: 200px; float:right; margin: 30px 20px 0px 0px;}

    #legal p        { font-size: 11px; color: #333333; text-align:right; margin-bottom: 15px;}

/** Menu **/

#menu               { display: block; position: absolute; z-index: 1000; height: 50px; width: 700px; 
                        white-space:nowrap; top: 30px; margin: 0px 0px 0px 300px;}
#menu ul            { display: block; white-space:nowrap; height:27px;}
#menu li            { display: block; float: left; list-style: none; border-right: solid 2px #ababab; 
                        padding: 0px 5px 0px 5px; }
#menu li.last       { border: 0; }
#menu li a          { display: block; background-repeat: no-repeat; height: 27px; background-position: 0px 0px; }
#menu li a:hover    { background-position: 0px -26px; }
#menu li a.on       { background-position: 0px -53px; }
#menu li a.on:hover { background-position: 0px -53px; }
#menu li ul         { display: none; position:absolute; width: 120px; height: auto; border: solid 1px #999999;  
                        margin:0; padding:0; background-image: url("/img/library/trans-black-65.png"); z-index: 10000;
                        background-repeat:repeat; }
#menu li:hover ul   { display: block; }
#menu li li         { display: block; height: auto; list-style: none; border: 0; margin:0; padding:0; width: 100%; }
#menu li li a       { display:block; height: auto; width: 100%; font-size: 12px; padding: 5px 7px; color: #eeeeee; margin:0; 
                        font-weight: bold; text-decoration: none; }
#menu li li a:hover { color: #cccccc; }

#home               { background-image: url('../img/nav/menu_01.png'); width: 60px; }
#about              { background-image: url('../img/nav/menu_03.png'); width: 113px; }
#whatwedo           { background-image: url('../img/nav/menu_05.png'); width: 114px; }
#portfolio          { background-image: url('../img/nav/menu_07.png'); width: 79px; }
#testimonials       { background-image: url('../img/nav/menu_09.png'); width: 114px; }
#contactus          { background-image: url('../img/nav/menu_11.png'); width: 100px; }
#more-menu          { background-image: url('../img/nav/more.png'); width: 69px; margin-left: 3px; }

/** Buttons **/

.get-a-quote        { display: block; float:right; margin: 0px 40px 0px 0px; background-image: url('../img/get-a-quote-button.jpg'); width: 155px; height: 41px; background-position: 0 0; border: 0; text-decoration:none; }
    
    .get-a-quote:hover  { background-position: 0px -41px; }
  
.get-quote-submit   { height: 30px; width:115px; margin: 10px 0px 0px 0px; background-color: Transparent; border: 0; background-image:url('../img/get-quote-submit-button.png'); background-repeat: no-repeat; background-position: 0px 0px; }
    
    .get-quote-submit:hover     { background-position: 0px -30px; }

/** Fields **/

.form-area          { display:block; padding: 10px 0px 10px 40px; }
.field-row          { display: block; padding: 5px 10px 5px 10px; height: 30px; }
.field-label        { display: block; float:left; font-size: 14px; color: #dddddd; margin: 2px 0px 0px 0px; }
.field-input        { display:block; float: left; height: 18px; }
.field-inputbox     { display:block; }
.input-sans-label   { display: block; margin: 9px 0px 9px 0px; }
.textbox            { font-size:14px; background-color: #eeeeee; padding: 3px 4px;
                        border: solid 2px #666666; font-family:Arial, Helvetica, Sans-Serif }
.textbox-highlight  { border-color: #999999; background-image: none; }
.watermark          { color: #999999; }

.quote-area         { display: block; padding: 5px; width: 535px;}
.quote-area p       { padding: 10px 0px; margin: 0;}
.quote-table        { width: 100%; }
.quote-table td     { text-align:left; padding: 5px 5px 5px 0px; font-size: 14px; color:#dddddd; vertical-align:top;
                        font-weight: bold;}
.quote-table td.right
                    { text-align: right; padding: 5px 0px 5px 5px; }
.quote-table td.center 
                    { text-align: center; }

/** Portfolio **/

.portfolio                      { display: block; padding: 15px 10px 10px 10px; }
.portfolio .item                { display: block; width: 630px; background-color: #555555; 
                                    margin: 10px 30px 20px 30px; padding: 0px 0px 10px 0px; }
.portfolio .item .feature       { display: block; width: 390px; height: 100px; margin: 15px; border: solid 6px #eeeeee;}
.portfolio .item .about         { display: block; float:right; height: 110px; width: 170px; font-size: 11px; 
                                    color: #bbbbbb; margin: 15px 20px 15px 0px; }
.portfolio .item h1             { display: block; padding: 5px 10px 5px 10px; font-size: 22px; color: #eeeeee; 
                                    font-family: Georgia, Serif;
                                    font-weight:normal; margin: 0; background-color: #444444;}
.portfolio .item .text          { display: block; width: 325px; border-right: solid 1px #666666; }
.portfolio .item h2             { padding: 0px 15px 5px 15px; font-size: 14px; font-weight: bold; margin:0; }
.portfolio .item p              { margin: 0; padding: 0px 25px 10px 25px; font-size: 13px; color: #eeeeee;}
.portfolio .item .wedid         { display: block; float:right; width: 265px; margin: 10px 15px 0px 0px; }
.portfolio .item .wedid .header { display: block; font-size: 15px; font-weight: bold; color: #eeeeee; padding: 0px 0px 5px 0px; }
.portfolio .item .wedid .item   { display: block; width: 210px; font-size: 12px; color: #eeeeee; 
                                    background-image: url('../img/gear-gray.png'); background-repeat:no-repeat; 
                                    background-position: 0px 1px; padding: 0px 0px 5px 20px; margin: 0px 0px 0px 5px; }  

/** Blog **/

.entry-frame    { display:block; padding: 10px 0px 10px 30px; }
.entry-content  { display:block; margin: 0px 0px 0px 115px; padding:0; border-bottom: dotted 1px #666666;
                    width: 550px;}
.entry-content h1 
                { padding: 0px 20px 0px 0px; margin:0; font-size: 23px; font-weight:normal; letter-spacing: 1px; }
.entry-content h1 a
                { color: #9ec5da; text-decoration:none; }
.entry-content h1 a:hover
                { color: #5E9EC1; text-decoration:underline; }
.entry-content p 
                { padding: 5px 0px 5px 0px; margin-left:0; }
.entry-content .footer 
                { font-size: 10px; color: #cccccc; text-align: right; padding: 3px 2px; }
.byline         { font-size: 10px; color: #aaaaaa; padding: 5px 0px 5px 0px; }
.datetime       { display: block; float: left; background-color: #666666; color: #dddddd; font-family: Georgia, Serif;
                    font-size: 12px; font-weight:bold; text-transform:capitalize; padding: 4px 5px; margin:0;
                    border-bottom: solid 5px #444444;}
.comment-area   {
    padding: 10px 20px 10px 130px;
    width: 385px;
}

.comment {
    display:block;   
    border-bottom: dotted 1px #555555; 
}

.comment .comment-author {
    font-weight:bold;
}

.new-comment-area {
    padding: 10px 20px 10px 20px;
}

.new-comment {
    background-color: #444444;  
    padding:10px;    
}

.new-comment .title {
    font-size: 14px;
    font-weight:bold;
    color: #ffffff;
    padding: 5px;    
}

.new-comment td {
    font-size: 12px;
    color: #cccccc;
    padding: 5px 10px;
    vertical-align: top;
}

/** Text **/
h1              { font-size: 24px; font-weight:bold; color: #ffffff; }
h2              { font-size: 24px; color: #ffffff; margin: 10px 10px 5px 10px; }
h3              { font-size: 18px; color: #eeeeee; margin: 15px 10px 10px 20px; padding: 3px 5px;
                    background-color: #444444; display:inline; }
h4              { font-size: 25px; font-family: Arial, Helvetica, Sans-Serif; color: #eeeeee; font-weight:bold;
                    padding: 0px 0px 5px 0px;}
h5              { font-size: 14px; color: #eeeeee; font-weight: bold; padding: 10px 10px 0px 10px;
                    margin: 5px 10px 0px 30px; }                

p               { font-size: 12px; margin: 5px 10px 5px 30px; color: #ffffff; line-height: 18px;
                    padding: 5px 10px 5px 10px; }
a               { color: #9ec5da; text-decoration: none; }
a:hover         { color: #5E9EC1; text-decoration: underline; }
ul              { padding: 5px 0px 10px 40px; margin: 0px 0px 0px 20px;}
li              { list-style-type: square; font-size: .8em; color: #ffffff; padding: 2px 0px 2px 5px;}
    
#intro-box p    { font-size: 14px; line-height: 25px; text-align:justify; margin: 0px 0px 10px 0px; }

blockquote.quote    { display: block; width: 600px; background-image: url('../img/talk-box-top.jpg'); background-repeat:no-repeat; background-position: 0 0; margin: 20px 0px 20px 40px; padding: 12px 0px 0px 0px;}

    blockquote.quote .quote-text{ display:block; width: 100%; background-color:#444444; margin: 0; }
    blockquote.quote p          { font-size: 14px; color: #dddddd; padding: 5px 10px 5px 10px; margin:0; }
    blockquote.quote .bottom    { display:block; width: 600px; height: 55px; background-image: url('../img/talk-box-bottom.jpg'); background-repeat:no-repeat; background-position: 0 0; }
    blockquote.quote .said      { display:block; text-align:right; font-size: 13px; color: #dddddd; margin: 5px 0px 0px 0px;}

/** Sections **/

.major-section  { padding: 0px 0px 10px 0px; margin: 0px 20px 0px 20px; }
.major-section .title    
                { display:block; height: 10px; padding: 10px 0px 20px 10px; margin:0; }
.major-section .title h1 
                { font-size: 20px; font-weight: normal; color: #bbbbbb; margin:0; padding:0;
                    text-transform: uppercase; letter-spacing: 1px; font-family:Georgia, Serif;}                    
.major-section .content 
                { width:575px; margin: 0; padding: 0px 0px 0px 20px; }               
.major-section .content .description
                { font-size: .8em; color: #ffffff; padding: 10px 0px 10px 0px; margin: 0; }
.major-section .content p 
                { padding: 10px 0px 10px 10px; margin: 0; }                 
.major-section .content h3  
                { margin:0; }               
.major-section .content h5 
                { padding: 3px 0px 3px 0px; }           
.gototop
                { text-align:right; font-size: 10px;}
.section        { padding: 10px 0px 10px 0px; }                   

/** Partners table **/

table.partners {
    width: 100%;
}

table.partners td {
    vertical-align:top;
    margin:0;
    padding:0;
}

/** Tab major section **/

.big-tabs {  
    height:150px;
    margin: 0px 0px 0px 50px;
}

.big-tab {
    display: block;
    height: 30px;
    width: 300px;
    font-size: 17px;
    font-family: Georgia, "Times New Roman", Serif;       
    padding:10px 0px;
    margin:0;
}

.big-tab:hover {
    text-decoration:none;
}

.big-tabs .display {
    padding:0;
    margin:0;    
    width: 295px; 
    height:150px;
    display:none;
    border: solid 1px #444444;
}

.big-tabs .display h1 {
    padding: 5px 5px;
    font-size: 13px;
    color: #eeeeee;
    background-color: #444444;
}

.big-tabs .display p {
    font-size: 11px; 
    line-height: 15px;    
    padding: 5px 5px;
    margin: 0;
}

.big-tabs .display .highlight {
    background-color: #444444;
}

.big-tabs .active {
    display:block;
}