/*
 * http://colorschemedesigner.com/#3w21TmuXQw0w0
 * */
html { min-width: 960px; }
body { font: 1em/1.3 helvetica, arial, sans-serif; background: #b4b4b4 url('/img/bg_fade_content.png') repeat-x 0 0; margin: 0;  }
.clfx:after { content: '.'; display: block; visibility: hidden; height: 0; font-size: 0; clear: both; overflow: hidden; }
h1 { color: #A0D5FB; margin: 0 0 .5em 0; font-size: xx-large; }
#home h1 { color: #666; text-align: center; font-size: xx-large; }
h2 { font-size: large; border-bottom: 1px solid #ccc; }
#ftr > h2:first-child { border-bottom: 1px solid #ccc; }
#ftr h2 { border-bottom: none; margin-bottom: .5em; }
h3 { font-size: large; }
h4 { margin-bottom: .1em;  }
ol { list-style-type: disc; padding: 0 2em; margin: 1em .5em; }
p { margin: 1em 0; }
q:before, q:after { content: '"'; }

/* link colors */
a { color: #14669F; }
a:hover { color: #3FAAF5; }

.actions { text-align: right; margin: .5em auto; padding-right: 1.5em; }
form .actions { text-align: left; padding-left: .5em; } 
form .actions input { background-color: #A0D5FB; border-color: #444; color: #000; font-weight: bold; width: auto; text-transform: capitalize; }
form .actions input:hover { background-color: #3FAAF5; border-color: #222; color: #fff; }

#hdr { background: #080c0e url('/img/bg_fade.png') repeat-x 0 0; margin-bottom: 2em; border-bottom: 1px solid #ccc; }
#banner { max-width: 900px; margin: 0 auto; padding: .5em 1em; }
#logo { display: block; width: 200px; height: 90px; padding: .5em 1em; float: left; }
#mnav { float: right; margin: 2em 0 1em 0; padding: 0; letter-spacing: .1em; }
#mnav li { float: left; text-transform: capitalize; padding: .5em 0em .5em 1em; }
#mnav li:first-child { border-left: none; }
/* link colors */
#mnav li a { padding: .4em .5em .2em .5em; line-height: 2.0; color: #A66511; text-decoration: none; font-size: 110%; border-bottom: 4px solid #222; }
#mnav li a:hover, #work #mnav a[href='/work'], #services #mnav a[href='/services'], #company #mnav a[href='/company'], #contact #mnav a[href='/contact'] { color: #FFA735; border-bottom: 4px solid #14669F; }
#mnav li a:hover { color: #FFBD68; border-bottom-color: #333; }
 
#txt { max-width: 55em; margin: 1em auto; background-color: #fff; border: 1px solid #444; padding: 1em 2em; }
#txt ol { background-color: #f9f9f9; border: 1px solid #ccc; padding: .5em 2em; width: 15em; }
#home ul.work li { height: 10em;  width: 17.2em; padding: 0; }
#home ul.work li { position: relative;  }
#home ul.work div.new { display: block; height: 80px; position: absolute; top: -3px; right: -3px; z-index: 100; background: transparent url('/img/bg_new.png') no-repeat top right; width: 51px; height: 51px; display: block; border: none; padding: 0; margin: 0; }
#home ul.work div.wip { display: block; height: 80px; position: absolute; top: -3px; right: -3px; z-index: 100; background: transparent url('/img/bg_wip.png') no-repeat top right; width: 51px; height: 51px; display: block; border: none; padding: 0; margin: 0; }
#home ul.work img { width: 253px; height: 110px; margin: 10px 10px 0 10px; }
#home #ftr ul.work img { height: 70px; width: 265px; }
#home ul.work a, #home ul.work span { position: absolute; bottom: 0; left: 0; display: block; padding: .5em 1em; }
#home ul.work span { color: #666; }
ul.work li { float: left; width: 15.2em; height: 12em; background-color: #f9f9f9; border: 1px solid #ccc; padding: 1em; margin: 0 1em 1em 0; }
ul.work li p:first-child { margin-top: 0; }
ul.work img { display: block; float: left; width: 130px; height: 57px; border: 1px solid #bbb; margin-right: 1em; background-color: #f3f3f3; }
ul.work strong { color: #222; }
ul.work p {  font-size: 92%; }
#ftr ul.work li { font-size: 92%; height: 8em; width: 19.5em; border-color: #999;  }
dl.word { margin: 1em;  padding-left: 2em; }
dl.word dt { float: left; font-weight: bold; color: #000; }
dl.word dd { padding-left: 2em; margin-bottom: .3em; clear: left; }
dl.word dd:before { content: '-- '; }
div.service ol { float: right; }
ul.services { margin: 1em auto; padding-left: 3em; } 
ul.services > li { float: left; width: 17em; font-weight: bold; }
ul.services ul { padding-left: .1em; margin-top: .3em; }
ul.services li li  { float: none; font-weight: normal; }

#ftr { max-width: 57em; margin: 1.5em auto 1em auto;  background-color: #ddd; padding: 1em; border: 1px solid #444; }
#ftr ol { border: 1px solid #c9c9c9; font-size: 92%; }
#ftr ol li { background-color: #d9d9d9; border-bottom: 1px solid #c9c9c9; padding: .2em; }
#legal { max-width: 70em; margin: 0 auto 1em auto; color: #222; background-color: transparent; padding: 0; font-size: small; line-height: 1.4; text-align: right; }
#legal p { float: left; margin-top: 0; }
#legal small { display: block; float: right; }
#legal a { color: #222; }
#legal a:hover { color: #000; }

form#question { padding-left: 2em; display: block; float: left; padding-right: 2em; margin-bottom: 1em; }
fieldset { display: block; background-color: #f9f9f9; border: 1px solid #ccc; padding: 0 1em 1em; margin-bottom: 2em;  }
#address { margin: auto 1em; width: 300px; }
#address img { display: block; width: 358px; height: 275px; border: 1px solid gray; }
#address iframe { display: block; width: 358px; height: 275px; }
#address small { font-size: smaller; }
legend { font-weight: bold; }
label { display: block; }
select, input { width: 18em; border: 1px solid #999; }
textarea { width: 30em; height: 15em; border: 1px solid #999; }
textarea, input { padding: .5em .8em; }
fieldset input:focus, select:focus, textarea:focus { border-color: #3FAAF5; background-color: #F4F8FA; color: #000; }
select { padding: .5em 0 .5em .8em; }

#msg { margin: 1em; padding: 1em;  }
#msg.ok { border: 1px solid #9c9; background-color: #dfd; color: #000; }
#msg.err { border: 1px solid #c99; background-color: #fee; color: #900; }
h1.err { color: #c99; }