/*---------------------------------------- TABLE OF CONTENTS CSS Reset / HTML Elements Wrapper Header Nav Content Column-Left Column-Right Footer Position / Clear / Floats Featured Content Slider Other Pages: About | services | Web | Illustrations | Logos | Print | Portfolio | Clients | Contact /*---------------------------------------- DEFAULT COLORS Purple: #5668a3 /* ================ @ CSS Reset / HTML Elements ================ */ body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td { border:0; margin:0; outline:none; padding:0; } ul, ol { list-style:none; } body { color:#333; font-family: Arial, Helvetica, sans-serif; font-size:13px; font-style:normal; } p, li { line-height:20px; } blockquote { margin-left:30px; } body { background: url(../images/bg.png) repeat-x; } hr { display: none; border: 0; margin: 0; } h2 { color:#568959; font-family:Georgia, Times New Roman, Times, serif; font-size:20px; font-weight:bold; margin-bottom:15px; text-shadow: 1px 1px 1px #FFF, 3px 3px 3px #dae3ff; } .blue { color:#5668a3; font-size:11px; } a { color:#576aa7; text-decoration:none; } a:hover { color:#333; text-decoration:underline; } /* ================ @ Position / Clear / Floats / Hacks ================ */ .left { float:left; margin:0 40px 50px 0; } .right { float:right; margin:0 0 50px 40px; } .clear { clear:both; margin:0; padding:0; display:block; height:1px; } .bottom { padding-bottom:15px; } .middle { margin: 0 auto; display:block; } /* ================ @ Wrapper ================ */ #background { background: url(../images/bg.png) repeat-x; display:block; position:relative; } #wrapper { width:960px; margin:0 auto; display:block; } /* ================ @ Header ================ */ #header { height:130px; display:block; width:960px; } /* Logo */ #logo { width: 250px; height: 137px; display: block; margin-top: 20px; float: left; } #logo-link { width: 250px; height: 137px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; display: block; } /* Ask Expert */ #ask { width: 205px; height: 90px; display: block; float: right; padding-top:35px; } #ask-link { width: 205px; height: 90px; background: url(../images/ask-expert.png) no-repeat; text-indent: -9999px; display: block; } /* ================ @ Navigation ================ */ #nav { width: 960px; height: 39px; padding: 0; text-indent: -9999px; overflow: hidden; margin-top:20px; } #nav li { margin: 0; padding: 0; list-style: none; float:left; } #nav li, #nav a { height: 39px; display: block; cursor:pointer; display:block; } /* Link-State */ #home, #home a { left: 0px; width: 135px; background: url(../images/nav.jpg) 0 0 no-repeat; } #office, #office a { left: 135px; width: 215px; background: url(../images/nav.jpg) -135px 0 no-repeat; } #industrial, #industrial a { left: 350px; width: 244px; background: url(../images/nav.jpg) -350px 0 no-repeat; } #consulting, #consulting a { left: 594px; width: 227px; background: url(../images/nav.jpg) -594px 0 no-repeat; } #backgrounds, #backgrounds a { left: 821px; width: 139px; background: url(../images/nav.jpg) -821px 0 no-repeat; } /* Hover-State */ #home a:hover { background: url(../images/nav.jpg) 0 -39px no-repeat; } #office a:hover { background: url(../images/nav.jpg) -135px -39px no-repeat; } #industrial a:hover { background: url(../images/nav.jpg) -350px -39px no-repeat; } #consulting a:hover { background: url(../images/nav.jpg) -594px -39px no-repeat; } #backgrounds a:hover { background: url(../images/nav.jpg) -821px -39px no-repeat; } /* On-State */ #on-home { left: 0px; width: 135px; background: url(../images/nav.jpg) 0 -39px no-repeat; } #on-office { left: 135px; width: 215px; background: url(../images/nav.jpg) -135px -39px no-repeat; } #on-industrial { left: 350px; width: 244px; background: url(../images/nav.jpg) -350px -39px no-repeat; } #on-consulting { left: 594px; width: 227px; background: url(../images/nav.jpg) -594px -39px no-repeat; } #on-backgrounds { left: 821px; width: 139px; background: url(../images/nav.jpg) -821px -39px no-repeat; } /* ================ @ Banner ================ */ #banner { width: 960px; height: 162px; display:block; margin-top:15px; margin-bottom:40px; } #banner-fade li { list-style-type:none; margin:0; padding:0; display:block; width:960px; height:162px; } #banner-office { width: 960px; height: 162px; display:block; margin-top:15px; margin-bottom:40px; text-indent:-9999px; background:url(../images/banner-office.jpg) no-repeat; } #banner-industrial { width: 960px; height: 162px; display:block; margin-top:15px; margin-bottom:40px; text-indent:-9999px; background:url(../images/banner-industrial.jpg) no-repeat; } #banner-consulting { width: 960px; height: 162px; display:block; margin-top:15px; margin-bottom:40px; text-indent:-9999px; background:url(../images/banner-consulting.jpg) no-repeat; } /* ================ @ Main Content ================ */ #main { width: 640px; display:block; float:left; padding:0 60px 0 10px; } #main p { margin-bottom:25px } .border { margin-bottom:25px; padding-bottom:25px; border-bottom:dashed 1px #c9cfe9; } /* ================ @ Sidebar ================ */ #sidebar { width: 200px; display:block; float:right; padding:0 10px 0 40px; background:url(../images/bg-sidebar.jpg) left top no-repeat; } .title { margin-bottom:25px } .twitter { display:block; text-indent:-9999px; width:157px; height:47px; margin-bottom:60px; } .twitter a { display:block; width:157px; height:47px; background:url(../images/twitter.png) left top no-repeat; } .twitter a:hover { display:block; width:157px; height:47px; background:url(../images/twitter.png) left bottom no-repeat; } /* ================ @ top ================ */ #top-wrapper { height: 40px; width:960px; display:block; background:url(../images/bg-footer.png) repeat-x; margin:35px auto 0 auto; } #top { height:41px; width:150px; float:right; display:block; margin-right:60px; } #top-link { background:url(../images/back-top.png) no-repeat; height:41px; width:150px; display:block; text-indent:-9999px; } /* ================ @ Footer ================ */ #footer { width:900px; display:block; margin:0 auto; border-top:solid 1px #FFF; padding:30px; background-color:#f1f3f9; font-size:12px; color:#576aa7; } #copyright { display:block; float:right; text-align:right; } /* ================ @ News Ticker ================ */ .newsticker-jcarousellite { width:200px; } .newsticker-jcarousellite ul li { list-style:none; display:block; height:280px; } .hr { height:15px; border-bottom:dashed 1px #c9cfe9; display:block; margin-bottom:15px; } .note { color:#787878; font-size:11px; margin-bottom:10px; } /* ================ @ Panel ================ */ #panel { margin: 0 auto; background-color:#576aa7; } #panel-inside { margin: 0 auto; width:960px; padding:10px 0; } #panel h3 { color:#fff9e3; font-family:Georgia, Times New Roman, Times, serif; font-size:16px; text-transform:uppercase; font-weight:bold; margin: 0 0 15px 0; text-shadow: 1px 1px 1px #2a324f; } #panel p { color:#FFF; margin-bottom:20px; } .inputForm { background:url(../images/bg-form.gif) repeat-x #FFF; display:block; width:255px; border: 1px solid #BEBEBE; font: 12px Arial, Helvetica, sans-serif; color: #666; padding: 10px; } .row { display:block; height:40px; width:600px; margin-bottom:10px; } .row-left { float:left; } .row-right { float:right; } #comments { width:290px; display:block; height:70px; } #submit { margin-top:10px; float:left; display:block; } #row-wrap { width:600px; float:left; display:block; margin-right: 40px; }