@charset "UTF-8";
/**
 * Core stylesheet
 * Based on ZUI XHTML/CSS structure (http://beingzoe.com/zui/
 * by zoe somebody (http://beingzoe.com/) and scragz (jason mouratides)(http://scragz.net/)
 *
 * link color        #ff0101
 */

@media screen, handheld, projection, print  {  


/**
 * CLEAR DEFAULT STYLES
 * Reset based on YUI (http://developer.yahoo.com/yui/reset/)
 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,select,p,blockquote,th,td,hr { margin: 0; padding: 0; }
ol,ul { list-style:none; }
hr { background: transparent none; border: 0 none; height: 0; }
table { border-collapse:collapse; border-spacing: 0; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
abbr,acronym { border: 0 none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
sup,sub { height: 0; line-height: 1em; vertical-align: baseline; _vertical-align: bottom; position: relative; }
fieldset,img { border: 0 none; }
a { text-decoration: none; outline: none; }



/**
 * VERTICAL RHYTHM
 * NOTE: Be aware of elements inside of other elements
 * NOTE: top-bottom padding/margin must total line-height
 */
body { font-size: 75%; }
html > body { font-size: 12px; line-height: 18px; }
h1 { font-size: 30px; line-height: 36px; margin-top: 36px; }
h2 { font-size: 20px; line-height: 36px; margin-top: 36px; }
h3 { font-size: 16px; line-height: 18px; margin-top: 36px; }
h4 { font-size: 14px; line-height: 18px; margin-top: 18px; }
h5 { font-size: 13px; line-height: 18px; margin-top: 18px; }
h6 { line-height: 18px; margin-top: 18px; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 0em; font-weight: bold; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
p, blockquote, pre, p, ul, ol, dl, address, label { margin-top: 18px; margin-bottom: 0; }
ul ul { margin-top: 0; }
table {  margin-top: 17px; /* consider borders */ margin-bottom: 0; }
th, td {  padding: 8px 9px 9px; /* consider borders */ }
caption { /* stupid exception */ padding: 9px; font-size: 10px; /* 10px */ line-height: 18px; /* 18px */ }
p:first-child, h1:first-child, h2:first-child, dt:first-child { margin-top: 0; }


/**
 * RESET
 */
body { 
    background: #000 url('../images/layouts/bg.bd.png') center top repeat-y;
    color: #fff;
    font-family: Arial, Arial, Helvetica, sans-serif; 
    text-shadow: 0 0 2px #000, -2px -2px 4px #000, 2px 2px 4px #000;
}
/* block */
ul, ol, dl { padding-left: 18px; }
ol { padding-left: 27px; }
ul ul, ol ol, dl dl { margin-top: 0; }
ul { list-style: disc outside none; }
ol { list-style: decimal outside none; }
dt { font-weight: 700; }
dt { margin-top: 18px;  }
ul ol, ol ul { margin-top: 0; }
blockquote {
    margin-right: 30px;
    margin-left: 30px;
    font-style: italic;
}
hr { border-top: 1px solid #000; margin-top: 17px; }
/* text */
h1, h2, h3, h4, h5, h6 { font-family: 'MicroFLF'; font-weight: bold; line-height: 140%; }
strong { font-weight: 700; font-style: inherit; }
em { font-weight: inherit; font-style: italic; }
abbr, acronym, cite, dfn, kbd, tt, code, var, samp { font-family: "Lucida Console", Monaco, monospace; font-size: 14px; }
abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
q:before { content: "\201C"; } q:after { content: "\201D"; }
q q:before { content: "\2018"; } q q:after { content: "\2019"; }
sup { bottom: 1ex; }
sub { top: 0.5ex; }
/* tables */
table, th, td { border: 1px solid #333; } 
caption { caption-side: bottom; }
thead th { background: #999 none 0 0 no-repeat; }
th { background: #ddd none 0 0 no-repeat; }
tr.even th { background: #bbb none 0 0 no-repeat; }
td { background: #fff none 0 0 no-repeat; }
tr.even td { background: #ddd none 0 0 no-repeat; }
/* forms */
fieldset { 
    margin-top: 18px;
    padding: 9px;
    border: 1px solid #ccc; 
}
legend { font-weight: bold; background-color: #ccc; }
legend + p { margin-top: 0; }
input, textarea {
    margin-top: 7px;
    padding: 4px 4px 5px;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 12px;
    line-height: 18px !important;
    vertical-align: baseline !important;
}
option {
    height: 18px;
    padding: 0 4px 0 4px;
}
input[type='text'], input[type='password'], textarea { 
    width: 30em;
    border: 1px solid #333; 
}
input[type='text'], input[type='password'] {  }
textarea { /*height: 7.8em;*/ }
input[type='submit'] { }
a {
    color: #ff0101;
	cursor:pointer;
}
a:visited { color: #ff0101; }
a:active {
    color: #f92020;
}
a:focus, a:hover { color: #ff3636; }


/**
 * LAYOUT
 */
#doc {
    position: relative;
    width: 968px;
    margin: 0 auto;
}
#hd {
    position: relative;
    height: 110px;
    margin: 0 0 3px;
    background: #000 url('../images/layouts/bg.hd-logo.png') right bottom no-repeat;
}

    ul#hd_nav {
        position: absolute;
        display: inline;
        bottom: 0;
        left: 0;
        width: 600px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    ul#hd_nav li { 
        float: left;
    }
    #hd_nav a {
        display: block;
        height: 21px;
        background: #000 url('../images/layouts/nav.sprite.png') 0 0 no-repeat;
    }
    #hd_nav li.home a { width: 55px; background-position: 0 0; }
    #hd_nav li.home a:hover { background-position: 0 -21px; }
    #hd_nav li.about a { width: 66px; background-position: -55px 0; }
    #hd_nav li.about a:hover { background-position: -55px -21px; }
    #hd_nav li.portfolio a { width: 95px; background-position: -120px 0; }
    #hd_nav li.portfolio a:hover { background-position: -120px -21px; }
    #hd_nav li.clients a { width: 75px; background-position: -214px 0; }
    #hd_nav li.clients a:hover { background-position: -214px -21px; }
    #hd_nav li.contact a { width: 80px; background-position: -288px 0; }
    #hd_nav li.contact a:hover { background-position: -288px -21px; }
#bd {
    height: 574px;
    margin: 0 0 36px;
    padding: 40px 30px 30px;
    background: #000;
    border: 2px solid #fff;
    font-size: 18px;
    line-height: 24px;
}
#doc.home #bd {
    height: 644px; /* no padding to account for */
    padding: 0;
}
#doc.about #bd {
    background: #000 url('../images/layouts/about/bg.bd.jpg') right top no-repeat;
}
#doc.portfolio #bd {
    background: #000 url('../images/layouts/portfolio/bg.bd.jpg') 0 0 no-repeat;
}
#doc.clients #bd {
    background: #000 url('../images/layouts/clients/bg.bd.jpg') right top no-repeat;
}
#doc.contact #bd {
    background: #000 url('../images/layouts/contact/bg.bd.jpg') left bottom no-repeat;
}

#sb {
    display: none;
}
#ft {
    clear: both;
    margin: 0 0 18px;
    color: #ccc;
    text-align: right;
    font-size: 10px;
    line-height: 12px;
}

/* home */
.home_scrollable {
    width: 964px; 
    height: 644px;
    margin: 0;
}
.home_scrollable .scrollables_scrollable { 
    height: 644px;
} 
.home_scrollable .scrollables_header { /* optional */ }
.home_scrollable .scrollables_footer {
    /*
    position: absolute; 
    bottom: 0;
    left: 0;
    z-index: 0;
    */
}
.home_scrollable .scroll_item {
    width: 964px;
    height: 644px;
    text-align: center;
}
.home_scrollable .scroll_item .active { }

.home_scrollable .scrollables_next, .home_scrollable .scrollables_previous {
    display: none;
}

/* Clients */
#doc.clients ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    font-family: 'MicroFLF'; 
    font-size: 26px; 
    line-height: 28px;
}
#client_more { 
    color: #ff0101; 
    font-family: 'MicroFLF';  
    font-size: 19px;
    
}
/* Contact */
#contact_info { margin-top: 60px; text-align: center; }
.contact_message {
    margin-top: 36px;
    font-family: 'MicroFLF'; 
    font-size: 32px;
}
.contact_address {
    margin-top: 36px;
    font-family: 'MicroFLF';
    font-size: 40px;
}


/** 
 * HELPER CLASSES
 */
.hide { display: none; }
.clear { clear: both; }
.clearfix:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }

.small { font-size: 10px; }
.smaller { font-size: 0.85em; }
.large { font-size: 14px; }
.larger { font-size: 1.15em; }
.quiet { color: #666; }
.loud { color: #000; }
.highlight { background: #ff0; }

.first { margin-top: 0 !important; }
.last { margin-right: 0; padding-right: 0; /*mostly for grid*/ }
.top { margin-top: 0; padding-top:0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }
.center { text-align: center; margin: 0 auto; }

 
/**
 * PLUGINS
 **/

/* Tools.Scrollables */
.scrollables { /* functionality */ position: relative; }
.scrollables_scrollable { /* functionality */ position: relative; overflow: hidden; width: 100%; } 
.scroll_items { /* functionality */ width: 20000em; position: absolute; } 
.scroll_item { /* functionality */ float: left; } 

.scrollables_previous, .scrollables_next { 
    position: absolute; 
    bottom: 20px;
    font-size: 18px; 
}
.scrollables_previous {
    right: 40px;
    width: 10px;
    height: 10px;
    /*background: transparent url(/images/cotradeco/buttons/tools-left.png) 0 0 no-repeat;*/
    z-index: 1;
}
.scrollables_next {
    
    right: 20px;
    width: 10px;
    height: 10px;
    /*background: transparent url(/images/cotradeco/buttons/tools-right.png) 0 0 no-repeat;*/
    z-index: 1;
}
.scrollables_nav {
    position: absolute; 
    bottom: 10px;
    right: 90px;
    text-align: center;
    z-index: 1;
}
.scrollables_nav a {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    /*background: transparent url('_assets/images/layouts/sprite.dot-3-states.png') 0 0 no-repeat;*/
} 
    /* mouseover state */
    .scrollables_previous:hover, div.scrollables_next:hover, div.prevPage:hover, div.nextPage:hover {
        background-position:0px -25px;	
        cursor: pointer;
    }
    /* disabled navigational button */
    .disabled { visibility:hidden !important; }
    /* mouseover state */
    div.scrollables_nav a:hover { background-position: -17px 0;  }
    /* active state (current page state) */
    .scrollables_nav a.active { background-position: -34px 0;  } 	
    
}

@media print {

}

@media handheld {

}

@media speech, aural {
    /* research needs done on this; not sure what is up with the CSS2 aural media type */
}

@media tty {

}

@media braille, embossed {
    /* not sure how we are going to do this; embossed would probably be it's own */
}

/**
 * KERNEST.COM WEB FONT CSS GENERATED FOR tristankallas-com
 */
 
/* 
MicroFLF 
 
Foundry: Casady & Greene, http://www.moorstation.org/typoasis/designers/casady_greene/ 
Contributors: Richard A. Ware 
License: Freeware, http://en.wikipedia.org/wiki/Freeware 
*/

@font-face {
	font-family: 'MicroFLF';
	src: url('fonts/microflf.eot');
	src: local('://'), url('fonts/microflf.svg#microflf') format('svg'), url('fonts/microflf.woff') format('woff'),  url('fonts/microflf.ttf') format('truetype');
 }
/* 
MicroFLF Bold 
 
Foundry: Casady & Greene, http://www.moorstation.org/typoasis/designers/casady_greene/ 
Contributors: Richard A. Ware 
License: Freeware, http://en.wikipedia.org/wiki/Freeware 
*/

@font-face {
	font-family: 'MicroFLF';
	font-weight: bold;	
	src: url('fonts/microflf-bold.eot');
	src: local('://'), url('fonts/microflf-bold.svg#microflf-bold') format('svg'), url('fonts/microflf-bold.woff') format('woff'),  url('fonts/microflf-bold.ttf') format('truetype');
 }
.microflf {
 font-family: 'MicroFLF';
line-height: 140%;
}

.microflf-bold {
 font-family: 'MicroFLF';
font-weight: bold;
line-height: 140%;
}