/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/* sub and super scripting */
sup, sub { font-size: 0.65em; height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; }
sup { bottom: 1ex; }
sub { top: .5ex; }
a:link {
color: #006666;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #009966;
}
a:hover {
text-decoration: none;
color: #006666;
}
a:active {
text-decoration: none;
color: #006666;
}
/* Canvas */
body { background: #fff url(/assets/img/bg.gif) center top no-repeat; font-size: 62.5%; font-family: arial, helvetica, sans-serif; line-height: 1.5em; }
div#wrapper { height:728px; width: 800px; margin: 0 auto; overflow: hidden; }
/* Header */
div#wrapper div.header { height: 125px; width: 800px; }
/* Logo */
div#wrapper div.header div.logo { height:86px; width:85px; position: relative; top: 28px; left: -15px; float: right; }
div#wrapper div.header div.logo h1 { height:86px; width:85px; text-indent:-5000px; background: url(/assets/img/logo-screen.gif) center top no-repeat; }
div#wrapper div.header div.logo h1 a { height:86px; width:85px; display: block; outline:none; }
/* Primary Navigation */
div#wrapper div.header div.navigation { position: relative; top: 95px; left: 0; height: 20px; width: 700px; }
div#wrapper div.header div.navigation ul#nav { list-style-type: none;}
div#wrapper div.header div.navigation ul#nav li { float: left; height: 20px; }
div#wrapper div.header div.navigation ul#nav li a { text-indent: -5000px; background-image: url(/assets/img/navigation.gif); background-position: 0 0; background-repeat: no-repeat; display: block; height: 20px; }
div#wrapper div.header div.navigation ul#nav li.home a { width: 64px; }
div#wrapper div.header div.navigation ul#nav li.home a:hover { width: 64px; background-position: 0 -20px ;}
body#home div#wrapper div.header div.navigation ul#nav li.home a { width: 64px; background-position: 0 -40px ;}
div#wrapper div.header div.navigation ul#nav li.web-design a { width: 111px; background-position: -64px 0; }
div#wrapper div.header div.navigation ul#nav li.web-design a:hover { width: 111px; background-position: -64px -20px; }
body#web-design div#wrapper div.header div.navigation ul#nav li.web-design a { width: 111px; background-position: -64px -40px; }
div#wrapper div.header div.navigation ul#nav li.animation a { width: 101px; background-position: -175px 0; }
div#wrapper div.header div.navigation ul#nav li.animation a:hover { width: 101px; background-position: -175px -20px; }
body#animation div#wrapper div.header div.navigation ul#nav li.animation a { width: 101px; background-position: -175px -40px; }
div#wrapper div.header div.navigation ul#nav li.branding a { width: 100px; background-position: -291px 0; }
div#wrapper div.header div.navigation ul#nav li.branding a:hover { width: 100px; background-position: -291px -20px; }
body#branding div#wrapper div.header div.navigation ul#nav li.branding a { width: 100px; background-position: -291px -40px; }
div#wrapper div.header div.navigation ul#nav li.photography a { width: 120px; background-position: -276px 0; }
div#wrapper div.header div.navigation ul#nav li.photography a:hover { width: 120px; background-position: -276px -20px; }
body#photography div#wrapper div.header div.navigation ul#nav li.photography a { width: 120px; background-position: -276px -40px; }
div#wrapper div.header div.navigation ul#nav li.audio a { width: 79px; background-position: -396px 0; }
div#wrapper div.header div.navigation ul#nav li.audio a:hover { width: 79px; background-position: -396px -20px; }
body#audio div#wrapper div.header div.navigation ul#nav li.audio a { width: 79px; background-position: -396px -40px; }
div#wrapper div.header div.navigation ul#nav li.web-hosting a { width: 115px; background-position: -475px 0; }
div#wrapper div.header div.navigation ul#nav li.web-hosting a:hover { width: 115px; background-position: -475px -20px; }
body#web-hosting div#wrapper div.header div.navigation ul#nav li.web-hosting a { width: 115px; background-position: -475px -40px; }
div#wrapper div.header div.navigation ul#nav li.contact a { width: 72px; background-position: -590px 0;}
div#wrapper div.header div.navigation ul#nav li.contact a:hover { width: 72px; background-position: -590px -20px;}
body#contact div#wrapper div.header div.navigation ul#nav li.contact a { width: 72px; background-position: -590px -40px;}
/* Dropdowns */
div#wrapper div.header div.navigation ul#nav li ul { position: absolute; left: -999em; padding-top: 10px; z-index:11 !important;}
div#wrapper div.header div.navigation ul#nav li ul li { background: #444; filter:alpha(opacity=75); opacity: 0.75; float: none; margin-left: 3px; margin-bottom: 2px; height: 25px; line-height: 25px; font-size: 11px;}
div#wrapper div.header div.navigation ul#nav li ul li a { text-decoration:none; text-indent:0; background:none; color: #fff; filter:alpha(opacity=100); opacity: 1.0; padding: 0 8px; display: block; }
div#wrapper div.header div.navigation ul#nav li ul li a:hover { text-decoration: underline; }
div#wrapper div.header div.navigation ul#nav li:hover ul {left: auto;}
div#wrapper div.header div.navigation ul#nav li:hover ul,
div#wrapper div.header div.navigation ul#nav li.sfhover ul {left: auto;}
/* Footer */
div#wrapper div.footer { height: 80px; width: 800px; position: relative; top: 10px; left: 0; overflow: hidden; }
div#wrapper div.footer div.logo { height: 36px; width: 178px; position: relative; top: 30px; left: 0; background: url(/assets/img/logo-footer.gif) left top no-repeat; }
div#wrapper div.footer div.logo h1 { height: 36px; width: 178px; text-indent: -4000px; }
div#wrapper div.footer div.logo h1 a { height: 36px; width: 178px; display: block; outline: none; }
div#wrapper div.footer div.copyright { display: none; }
div#wrapper div.footer div.audio { position: relative; top: -20px; left: 770px ;height: 20px; width: 30px; z-index: 4;}
/* Masthead :: Homepage Flash content */
div#wrapper div.masthead { height: 280px; width: 800px; background: #fff url(/assets/img/bg-masthead-home.jpg) center top no-repeat;}
/* Disciplines */
div#wrapper div.disciplines { height: 100px; width: 800px; overflow: hidden; }
div#wrapper div.discipline { height: 100px; width: 400px; float: left; }
div#wrapper div.discipline.interactive { background: url(/assets/img/discipline.interactive.gif) left top no-repeat; }
div#wrapper div.discipline.consulting { background: url(/assets/img/discipline.consulting.gif) left top no-repeat; }
div#wrapper div.discipline h2,
div#wrapper div.discipline h3 { text-indent:-4000px; }
/* Newsreel */
div#wrapper div.newsreel { height: 100px; width: 800px; overflow: visible; background: url(/assets/img/newsreel.gif) left top no-repeat; }
div#wrapper div.newsreel h1 { text-indent: -4000px; display: none; }
div#wrapper div.newsreel div.newsblock { height: 60px; overflow: visible; float: left; cursor:pointer !important; }
div#wrapper div.newsreel div.newsblock h2 { text-transform: uppercase; color: #a8a8a8; }
div#wrapper div.newsreel div.newsblock p { font-size: 10px; color: #a8a8a8; }
div#wrapper div.newsreel div.newsblock.b1 { width: 170px; position: relative; top: 40px; left: 30px; }
div#wrapper div.newsreel div.newsblock.b2 { width: 170px; position: relative; top: 40px; left: 45px; }
div#wrapper div.newsreel div.newsblock.b3 { width: 170px; position: relative; top: 40px; left: 60px; }
div#wrapper div.newsreel div.newsblock.b4 { width: 170px; position: relative; top: 40px; left: 75px; }
div#wrapper div.newsreel div.newsblock.socialMedia { width: 170px; position: relative; top: 40px; left: 75px; }
div#wrapper div.newsreel div.newsblock.socialMedia a { height: 40px; width: 40px; display: block; float: left; text-indent: -4000px; }
div#wrapper div.newsreel div.newsblock.socialMedia a.facebook { background: url(/assets/img/follow-facebook.gif) 0 0 no-repeat; }
div#wrapper div.newsreel div.newsblock.socialMedia a.twitter { background: url(/assets/img/follow-twitter.gif) 0 0 no-repeat; }
/* Content */
div#wrapper div.content { height: 484px; width: 800px; overflow: hidden; }
/* Basic Content */
div#wrapper div.content.basic { }
div#wrapper div.content.basic h1 { font-size: 1.4em; margin-top: 1.4em; }
div#wrapper div.content.basic p { font-size: 1.1em; margin: 1.4em 0;}
div#wrapper div.content.basic ul { margin-left: 1em; }
div#wrapper div.content.basic ul li { font-size: 11px; margin: 0.7em 0; }
/* Gallery Pages */
div#wrapper div.content div#viewer { position:relative; }
div#wrapper div.content div#viewer div { position:absolute; top:0; left:0; z-index:8; opacity:0.0; background-color: #FFF; }
div#wrapper div.content div#viewer div.active { z-index:10; opacity:1.0; }
div#wrapper div.content div#viewer div.last-active { z-index:9; }
div#wrapper div.content div.viewer { height: 484px; width: 700px; float: left; }
div#wrapper div.content div.selecter { height: 484px; width: 100px; float: right; }
div#wrapper div.content div.selecter div.thumbnails { height: 180; width: 90px; text-align: right; position:relative; top: 304px; left:10px; }
div#wrapper div.content div.selecter div.thumbnails img { height: 40px; width: 40px; margin:5px 0 0 5px; padding:0; float: left; cursor:pointer !important; border:none; filter:alpha(opacity=65); opacity: 0.65; }
div#wrapper div.content div.selecter div.thumbnails img:hover { filter:alpha(opacity=85); opacity: 0.85; }
div#wrapper div.content div.selecter div.thumbnails img.hot { filter:alpha(opacity=100); opacity: 1.0; }
/* Contact Page */
body#contact div#wrapper div.content { background: url(/assets/img/bg-contact.jpg) right top no-repeat; }
body#contact div#wrapper div.content div.contactform { width: 344px; height: 480px; padding: 40px 0 0 50px; background: url(/assets/img/bg-contact-form.jpg) left top no-repeat; }
body#contact div#wrapper div.content div.contactform.thankyou { width: 344px; height: 480px; padding: 40px 0 0 50px; background: url(/assets/img/bg-contact-thankyou.jpg) left top no-repeat; }
body#contact div#wrapper div.content div.contactform h1 { height: 65px; width: 250px; text-indent: -4000px; }
body#contact div#wrapper div.content div.contactform h2 { height: 30px; width: 250px; text-indent: -4000px; }
body#contact div#wrapper div.content div.contactform h3 { height: 25px; width: 140px; }
body#contact div#wrapper div.content div.contactform h3 a { height: 25px; width: 140px; display: block; outline: none; text-indent: -4000px; }
/* Web Hosting Temp Form */
body#web-hosting div#wrapper div.content { background: url(/assets/img/bg-hosting.jpg) right top no-repeat; }
body#web-hosting div#wrapper.services div.content { background: none; }
body#web-hosting div#wrapper div.content div.contactform { width: 344px; height: 480px; padding: 40px 0 0 50px; background: url(/assets/img/bg-hosting-form.jpg) left top no-repeat; }
body#web-hosting div#wrapper div.content div.contactform.thankyou { width: 344px; height: 480px; padding: 40px 0 0 50px; background: url(/assets/img/bg-contact-thankyou.jpg) left top no-repeat; }
body#web-hosting div#wrapper div.content div.contactform h1 { height: 65px; width: 250px; text-indent: -4000px; }
body#web-hosting div#wrapper div.content div.contactform h2 { height: 30px; width: 250px; text-indent: -4000px; }
body#web-hosting div#wrapper div.content div.contactform h3 { height: 25px; width: 140px; }
body#web-hosting div#wrapper div.content div.contactform h3 a { height: 25px; width: 140px; display: block; outline: none; text-indent: -4000px; }
fieldset p { height:26px; }
fieldset p input,
fieldset p textarea { font-size: 1em; font-family: arial, helvetica, sans-serif; color: #ffffff; border:none; background:none; overflow: hidden;}
div#wrapper div.content div.contactform form fieldset.collect { height: 180px; width: 245px; position: relative; top: 75px; left: 5px; }
div#wrapper div.content div.contactform form fieldset.collect p.txtBox input { height: 19px; width: 248px;}
div#wrapper div.content div.contactform form fieldset.collect p.txtArea textarea { height: 62px; width: 245px; padding: 5px 0; }
div#wrapper div.content div.contactform form fieldset.submit { height: 30px; width: 75px; position: relative; top: 95px; left: 178px;}
div#wrapper div.content div.contactform form fieldset.submit input { height:30px; width: 75px; }