* {margin:0; padding:0}
body {background:#fff; font:normal 62.5% Verdana, Arial, Helvetica, sans-serif; color:#555}
.clear {clear:both}
.left {float:left}
.right {float:right}
a:active, a:focus {outline:0; text-decoration:none}

#header {margin-left:24em; height:8em}
#header h1 {background:url(images/logo-interline.gif) no-repeat; height:2.2em; width:13em; font:normal 3.6em Arial, Helvetica, sans-serif; text-indent:-9999em}

#container {width:96em; height:62em; margin:4em auto; background:#fff}
/*
#leftmenu {width:8em; float:left; clear:both}
#leftmenu ul {list-style:none}
#leftmenu li {margin-bottom:2em}
#leftmenu li a {color:#e32; text-decoration:none}
#leftmenu li a:hover, #leftmenu li.selected a {font-weight:bold}
*/
.submenu {float:left; width:16em; margin-left:-16em; margin-top:0.5em; background:#fff; z-index:1001}
.submenu ul {list-style:none}
.submenu li {margin-bottom:2em}
.submenu li a {color:#555; text-decoration:none}
.submenu li a:hover, .submenu li.selected a {font-weight:bold}

#submenu2 {margin-top:3.7em}

#mainmenu {float:left; z-index:1000; padding-top:0.5em; margin-right:16em}
#mainmenu ul {width:8em; list-style-type:none}
#mainmenu li {position:relative; margin-bottom:2em}
#mainmenu table {left:0; top:0px; z-index:100; position:absolute}
#mainmenu a {color:#e32; text-decoration:none; border:0; display:block; width:100%}
#mainmenu a:hover {font-weight:bold}
#mainmenu ul ul {top:0; left:8em; visibility:hidden; position:absolute; width:16em; height:16em; background:#fff}
#mainmenu ul li ul li a {color:#555; font-weight:normal}
#mainmenu ul li ul li a:hover {font-weight:bold}
#mainmenu ul li:hover ul {visibility:visible; z-index:102}
/*#mainmenu ul li.active ul {visibility:visible}*/
#mainmenu ul a:hover ul {visibility:visible}
li.active a {font-weight:bold}
.whatwedosub {_top:-3.2em; _padding-top:3.2em}

#main {float:left; overflow:hidden; width:65em}

#content, #contact, #slider1 {width:40em; min-height:35em; height:auto !important; height:35em; margin-bottom:5em; overflow:hidden; float:left}
#content p {margin:0; padding:0; line-height:2em; font-weight:normal; margin-bottom:1em}


#content a {color:#555}
#content a:hover {color:#e32}
#content li {margin-bottom:1em}

p.paddingright {width:32em}

#contact {width:48em}
#slider1 {width:64em}

#contentinside {width:40em; padding-right:2em; height:35em; overflow:auto}
.sysitem {min-height:35em; height:auto !important; height:35em}

#footer {clear:both; margin-top:2em}
#footer dt {float:left; width:16em; display:block}
#footer dt a {color:#555; text-decoration:none}
#footer dt a:hover {font-weight:bold}

#footer dd {float:left; width:16em; display:block}
#footer dd a {color:#e32; text-decoration:none}
#footer dd a:hover {font-weight:bold}


/* COMPANIES MENU */
/*
#companies {background:url(images/logos_sm.gif) top left no-repeat; display:block; width:48em; height:4em; position:relative}
#companies li {list-style:none; position:absolute; height:4em}
#companies a {display:block; width:16em; height:4em; color:#555; text-decoration:none; text-indent:-9999em}
#companies li.selected a {font-weight:bold}
#company1 {left:0}
#company2 {left:16em}
#company3 {left:32em}
#company1 a:hover, #company1.selected a {background:url(images/logos_sm.gif) no-repeat 0 -4em}
#company2 a:hover, #company2.selected a {background:url(images/logos_sm.gif) no-repeat -16em -4em}
#company3 a:hover, #company3.selected a {background:url(images/logos_sm.gif) no-repeat -32em -4em}
*/
#companies {display:block; width:48em; height:2em}
#companies li {list-style:none; float:left; height:2em}
#companies a {display:block; width:16em; height:2em; color:#555; text-decoration:none}
#companies a:hover {font-weight:bold}
#companies li.selected a {font-weight:bold}


/* OUR SYSTEM MENU */
ul#oursystem {position:relative; list-style:none; padding:0; margin:0; width:240px; height:263px; background:url(images/balls2.gif) no-repeat left top}
ul#oursystem li a {display:block; width:77px; height:77px; text-align:center; color:#ccc; text-decoration:none}
ul#oursystem li a:hover{z-index:1; color:#fff}
#menu1 {top:0; left:82px; position:absolute; text-indent:-9999px}
#menu1:hover {background:url(images/ball-red.gif) no-repeat}
#menu2 {top:47px; left:163px; position:absolute; text-indent:-9999px}
#menu2:hover {background:url(images/ball-red.gif) no-repeat}
#menu3 {top:140px; left:163px; position:absolute; text-indent:-9999px}
#menu3:hover {background:url(images/ball-red.gif) no-repeat}
#menu4 {top:187px; left:82px; position:absolute; text-indent:-9999px}
#menu4:hover {background:url(images/ball-red.gif) no-repeat}
#menu5 {top:140px; left:0; position:absolute; text-indent:-9999px}
#menu5:hover {background:url(images/ball-red.gif) no-repeat}
#menu6 {top:47px; left:0; position:absolute; text-indent:-9999px}
#menu6:hover {background:url(images/ball-red.gif) no-repeat}

/*CONTACT FORM */

#regform span {/*clear:both;*/ color:#f00; font-size:1em; font-weight:bold; display:none}
#regform p {margin:0; padding:0; float:left; width:16em; padding-bottom:1em}
#regform label	{display:block}
#regform textarea, #regform input, #regform select {padding:0; margin:0; width:14.2em; border:1px solid #999; clear:left; margin-right:1.5em; font-size:1em}
#regform textarea {margin:0; padding:0; height:6em; width:30.3em; #width:30.2em;	/* IE7 */ _width:30.2em;	/* IE6 */ overflow:auto; font-size:10px}
.state {width:9.2em; _width:7em}
.zip {width:5em}
.stateinput {width:7.2em}
.zipinput {width:5em}

textarea:focus, input[type="text"]:focus {border:1px solid #666}
#submit	{margin:0.5em 0.5em 0 0; padding:.4em; width:8em; background:#eee; color:#333; clear:left}

.required label {font-weight:bold}

.activeField label {font-weight:bold; color:#e32}
.activeField input, .activeField textarea {border:1px solid #e32}
.idle input, .idle textarea {border:1px solid #999}

.loading {display:none}

#clients a {color:#555; text-decoration:none; vertical-align:middle}
#clients a:hover {color:#e32; text-decoration:underline}

li.back2clients {list-style:none; margin-left:0; margin-top:2em}

a.creativework, a.casestudies, a.blankicon {display:inline-block; width:3.2em; height:3.2em; text-indent:-9999em}
a.creativework {background:url(images/icon-creative-work.gif) no-repeat top}
a.casestudies {background:url(images/icon-case-studies.gif) no-repeat top}
a.blankicon {background:url(images/icon-blank.gif) no-repeat}

a.creativework:hover, a.casestudies:hover { background-position:bottom}

#casestudy {width:30em; margin-top:2em; padding-right:1em; float:left}
#casestudy li {padding-left:40px;   list-style:none; overflow:hidden; margin-bottom:2em}
#casestudy li img { float:left; position:relative; left:-4em; margin-right:-3em; }

#casestudy li.problem h3 {color:#e35}
#casestudy li.solution h3 {color:#18d}
#casestudy li.result h3 {color:#939}

#casestudy li h3 {font-size:1.2em}

h2.casestudy {font-size:1.2em}

.debug {border:1px dashed #f00}


/* creative work */
#clienttopinfo { padding-bottom:3em; overflow:auto }
#clientlogo { float:left; width:16em }
#clientdesc { float:left; width:32em }
#clientwork { float:left; width:16em; list-style:disc }
#clientwork li { margin-left:2em }
#clientwork li a { color:#555; text-decoration:none }
div.showcase {/* Set it so we could calculate the offsetLeft */ position:relative; height:42em; width:48em; overflow:hidden }
ul.showcase { display:block; height:40em; /* max width here, for users without javascript */ width:265em; list-style:none }
.showcase li { display:block; float:left; padding-right:3em }
.showcase p { margin-bottom:1em }

/*case studies */
#clienttopinfo { padding-bottom:3em; overflow:auto }
#leftcol { width:11.5em; padding-right:4.5em; float:left }
#leftcol h2 { height:120px}
#leftcol li {margin-bottom:2em}
#leftcol li a {text-decoration:none; color:#555}

#clientdesc { float:left; width:32em }
#clientwork { float:left; width:16em; list-style:disc }
#clientwork li { margin-left:2em }
#clientwork li a { color:#555; text-decoration:none }
#clientshowcase { float:left; width:48em; height:38em; overflow:hidden }
#clientshowcase div { height:37em; width:80em; overflow:auto; /* margin-left:-5em*/ }
#clientshowcase div dl { float:left; margin-right:5em }
#clientshowcase div dl dt { padding-bottom:2em }

.seminar {float:right; width:17em}
.seminar p {margin-bottom:1em}
.seminar a h2 {margin:1em 0; font-size:1.8em; font-weight:normal; text-decoration:none !important; color:#555}
.seminar a:hover h2 {color:#e32}
.seminar a div.seminfo {display:none; text-decoration:none !important; color:#555}
.seminar a:hover div.seminfo {display:block}