/* @override http://www.monkdevelopment.com/_css/master.css */ /* ************************************************* Monk Development Author: Kyle Sollenberger, hello@iamkyle.com Updated: April 14, 2008 Notes: None Table of Contents: 1. CSS Reset 2. General selectors 3. Layout 4. Classes 5. Hacks ************************************************* */ /*--------------------------------- 1. 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,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{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}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through} /*--------------------------------- 2. GENERAL SELECTORS ---------------------------------*/ body {background:#183b59;font:1em Helvetica, Arial, Sans-serif;padding:0;text-align:center;} a {color:#007d9a;font-weight:bold;text-decoration:none;} a:hover {} hr {display:none;} /*--------------------------------- 3. LAYOUT ---------------------------------*/ #wrap-1 {background:#f5f8f4 url(../img/bg_wrap-1.png) repeat-x bottom left;} #wrap-2 {background:url(../img/bg_wrap-2c.jpg) repeat-x left 0px;} body#home #wrap-2 {background:url(../img/bg_wrap-2b.jpg) repeat-x top left;} body#page #wrap-2 {background:url(../img/bg_wrap-2c.jpg) repeat-x top left;} #container {margin:0 auto;padding:0;text-align:left;width:970px;} body#home #container {padding:0 0 15px 0;} body#page #container {padding:0 0 15px 0;} /*- HEADER -*/ #header {color:#6fb9a3;position:relative;z-index:0;} body#home #header {height:35px;padding:35px 0;background:url(../img/bg_header3.jpg) no-repeat bottom center;height:170px;} body#page #header {height:45px;padding:35px 0 0 0;background:url(../img/bg_header4.jpg) no-repeat top center;height:105px;} /* logo */ #header h1 {height:35px;float:left;margin:0;width:465px; } body#home #header h1 {margin:0 0 40px 0;} #header h1 a {background:url(../img/logo.jpg) no-repeat top left;border:1px solid #6fb9a3;display:block;float:left;height:67px;text-indent:-5000px;width:220px;} #header h1 a:hover {border:1px solid white} #header h1 em {display:block;color:#fff;font-size:12px;font-style:italic;font-weight:bold;margin:24px 0 0 245px;text-transform:uppercase;white-space:nowrap;} body#page #header h1 {margin:0 0 40px 0;} /* nav */ #header #nav {float:right;} /* #header #nav #glass {background:transparent url("img/bg-glass.png") no-repeat left top; font-family:Georgia, "Times New Roman", Times, serif; height:350px; border-left: 1px solid #49789c; border-bottom:1px solid #122945; border-right:1px solid #417095; } */ /* tag */ #header h2 {background:url(../img/agline.png) no-repeat;padding-top:18px;clear:left;display:none;float:left;font-size:1.1em;font-weight:normal;height:110px;text-indent:0px;width:585px;} body#home #header h2 {display:block;} body#page #header h2 {display:block;} /* action */ #header p {clear:right;display:none;position:absolute;right:25px;top:105px;width:275px;} body#home #header p {display:block;} #header p strong { } #header p a {height:88px;text-indent:0px;width:275px;} #header p a:hover {color:#a8d6c8; } body#page #header p {display:block;} /*- CONTENT -*/ #content {float:left;font-size:.85em;line-height:1.4;width:660px;} /* question */ #content #question {background:#0c1e2a;color:#7dab9c;font-size:.95em;font-weight:bold;padding:19px 15px;} #content #question h4 {color:#2cbfd9;font-size:1.2em;font-weight:normal;} #content #question a.more-link {background:url(../img/button_learn-more.gif) no-repeat;display:block;float:right;height:26px;margin:5px 0 0 0;text-indent:-5000px;width:92px;} #content #question a.more-link:hover {background-position:bottom left;} /* products */ #content #products {background:#07141c;} #content #products h3, #content #recent-projects h3 {border-top:#2777b8 5px solid;color:#FFF;font-size:11px;font-weight:normal;margin:0;text-transform:uppercase;} #content #products h3 span, #content #recent-projects h3 span {background:#2777b8;color:#FFF;line-height:20px;padding:5px 15px 5px 15px !important;} #content #products ul {font-size:.95em;list-style:none;padding:10px;} #content #products ul li {background:url(../img/bg_products.jpg) no-repeat;color:#829790;float:left;padding:15px;width:290px;} #content #products ul li#product-1 {background-position:12px -25px;height:165px;} #content #products ul li#product-2 {background-position:-308px -25px;height:165px;} #content #products ul li#product-3 {background-position:12px -320px;} #content #products ul li#product-4 {background-position:14px -320px;} #content #products ul li img {background:#FFF;border:#dee7da 5px solid;height:75px;margin:0 0 3px 0;width:280px;} #content #products ul li h4 {margin:0 0 3px 0;} #content #products ul li h4 a {color:#339eae;font-size:1.25em;font-weight:normal;} #content #products ul li h4 a:hover {color:#FFF;} #content #products ul li.featured h4 a {color:#FFF;font-size:1.6em;} #content #products ul li.featured h4 a:hover {border-bottom:#165962 3px solid;} #content #products ul li p.links {margin:15px 0 0 0;float:right;} #content #products ul li p.links a {color:#829790;font-size:1em;display:block;float:left;height:22px;margin:0 0 0 5px;padding:4px 0 0 0;text-align:center;} #content #products ul li p.links a:hover {color:#FFF;} #content #products ul li p.links a.more-link {background:#163f41 url(../img/bg_button.gif) no-repeat top right;color:#dee7da;text-align:center;width:74px;} #content #products ul li p.links a.more-link:hover {background-color:#2d7d88;background-position:bottom right;} #content #products ul li.featured p.links a.more-link {background-color:#2d7d88;background-position:top left;color:#FFF;} #content #products ul li.featured p.links a.more-link:hover {background-color:#34afc4;background-position:bottom left;} p.links {margin:15px 0 0 0;float:right;} p.links a {color:#829790;font-size:1em;display:block;float:left;height:22px;margin:0 0 0 5px;padding:4px 0 0 0;text-align:center;} p.links a:hover {color:#FFF;} p.links a.more-link {background:#163f41 url(../img/bg_button.gif) no-repeat top right;color:#dee7da;text-align:center;width:74px;} p.links a.more-link:hover {background-color:#2d7d88;background-position:bottom right;} p.links a.more-link {background-color:#2d7d88;background-position:top left;color:#FFF;} p.links a.more-link:hover {background-color:#34afc4;background-position:bottom left;} ul#home-header{list-style: none; float: left; padding: 10px 9px;} /* recent projects */ #content #recent-projects {background:#184060 url(../img/bg_recent-projects.gif) no-repeat bottom left;} #content #recent-projects * {list-style:none;margin:0;padding:0;} #content #recent-projects #slider {height:100px;padding:15px 15px 30px 15px;position:relative;text-align:center;width:630px;z-index:1;} #content #recent-projects #slider p.loading {color:#184060;font-weight:bold;padding:42px;text-align:center;} #content #recent-projects #slider a.previous, #content #recent-projects #slider a.next {background:#15362e url(../img/bg_arrows.gif) no-repeat top left;display:block;height:32px;position:absolute;text-indent:-5000px;width:31px;} #content #recent-projects #slider a.previous {left:20px;top:45px;} #content #recent-projects #slider a.next {background-position:top right;right:20px;top:45px;} #content #recent-projects #slider a.previous:hover, #content #recent-projects #slider a.next:hover {background-color:#076e7e;background-position-y:bottom;} #content #recent-projects #slider.csw div.panel {display:none;} #content #recent-projects #slider div.panel {margin:0 auto;position:relative;overflow:hidden;width:530px;z-index:3;} #content #recent-projects #slider div.panel ul {position:relative;left:0;top:0;z-index:2;} #content #recent-projects #slider ul li {float:left;} #content #recent-projects #slider ul li a img {background:#15362e;border:#0c1e2a 4px solid;height:88px;margin:0 5px;width:88px;} #content #recent-projects #slider ul li a:hover img {border-color:#287cc1;} /* content header */ #content #content-header {background:#0c1e2a;height:96px;} #content #content-header h1 {color:#56bdb3;font-size:1.7em;font-weight:normal;text-transform:uppercase;margin:0;padding:20px 20px 0 20px;} #content #content-header #breadcrumbs {color:#56bdb3;margin:0 0 0 20px;} #content #content-header #breadcrumbs a:hover {color:#FFF;} /* text */ #content #text {background:#FFF;color:#13474d;line-height:1.4;padding:20px;} #content #text p.preamble {color:#0a99ae;font-size:1.5em;line-height:1.3;margin:0 0 15px 0;} #content #text p.preamble2 {color:#0a99ae;font-size:1.2em;line-height:1.1;margin:0 0 10px 0;} #content #text h2 {color:#111111;font-size:1.35em;font-weight:normal;} #content #text h3 {color:#238298;font-size: 1.2em;font-weight:bold;} #content #text h4 {color:#111111;font-size: 1.1em;font-weight:bold;} #content #text h5 {font-size:1em;} #content #text h5 {color:#999;font-size:1em;} #content #text p, #content #text ul, #content #text ol {margin-bottom:1em;color:#333;font-size:1.1em;line-height:1.5;} #content #text ul, #content #text ol {margin-left:3em;} #content #text ol{list-style: decimal;} #content #text ul li{ margin-bottom: 1em; background: url(/_img/bg_content_ul_li.gif) no-repeat left .5em; padding-left: 12px;} #content #text ol li{margin-bottom: 1em;} #content #text a {color:#4ba78d;} #content #text a:hover {color:#238298;text-decoration:underline;} #content #text .pullquote {border-left:#f5f5ed 3px solid;color:#0a99ae;float:right;font-size:1.3em;font-weight:bold;margin:0 0 10px 10px;padding:5px 0 5px 20px;width:200px;} #content #text .pullquote p {color:#3da2b6;font-size:14pt;} #content #text .pullquote2 {border-left:#f5f5ed 3px solid;color:#0a99ae;float:right;font-size:0.9em;font-weight:bold;margin:0 0 10px 10px;padding:5px 0 5px 20px;width:250px;} #content #text .pullquote2 p {color:#3da2b6;font-size:8pt;} /*- info list */ #content #text .info-list {font-size:1em;list-style:none;margin:0;padding:10px 0;} #content #text .info-list h3 {border-bottom:#dbe4d7 3px solid;color:#55c6da;font-size:1.6em;font-weight:normal;margin:0;padding:5px 0;} #content #text .info-list h3 span {color:#b4b4b4;font-size:.7em;} #content #text .info-list li{background: none; padding: 0;} #content #text .info-list li ul {margin:0;padding:0;} #content #text .info-list li li {background:url(../img/bg_dotted-line.gif) repeat-x top left;padding:10px 0;} #content #text .info-list li li:first-child {background:none;} #content #text .info-list li li h4 {font-size:1.3em;margin:0;} #content #text .info-list li li h4 a {color:#13474d;padding:0 25px 0 0;} #content #text .info-list li li h4 a:hover {background:url(../img/arrow.gif) no-repeat center right;} #content #text .info-list li li p {font-size:1.1em;} #content #text .info-list li li p.meta {color:#7d7d7d;font-size:1em;margin:0 0 8px 0;} #content #text .info-list li li img {float:right;margin:0 15px 15px 25px;} #content #text .info-list li li.launch {padding:1px 0 0 0;} #content #text .info-list li li.launch a {background: url(../img/button_launch1.gif) no-repeat center right;display:block;font-size:1.1em;padding:9px 10px 10px 10px;} #content #text .info-list li li.launch a:hover {background:#fffeea url(../img/button_launch.gif) no-repeat center right;} /*- SIDEBAR -*/ #sidebar {float:right;line-height:1.4;margin:0 0 15px 0;position:relative;width:300px;z-index:10;} body#home #sidebar {margin:-26px 0 0 0;} /* section list */ #sidebar .section-list {background: url(../img/bg_section-list.gif) no-repeat bottom left;font-size:.9em;margin:10px 0 0 0;padding:0 0 20px 0;} #sidebar .section-list h3 {background:#56bdb3 url(../img/bg_section-list-title.gif) no-repeat top left;color:#FFF;font-size:1em;font-weight:normal;padding:15px;text-transform:uppercase;} #sidebar .section-list h3 * {display:none;} #sidebar .section-list h3 *:first-child {display:block;} #sidebar .section-list h3 a {color:#FFF;} #sidebar .section-list ul {padding:5px;} #sidebar .section-list ul li {float:left;width:100%;} #sidebar .section-list ul ul {padding:0;} #sidebar .section-list ul a {border-bottom:#a8d3da 1px dotted;color:#bbe1e7;font-size:.93em;display:block;padding:5px 10px;} #sidebar .section-list ul a:hover {background:#58afc0 url(../img/bg_section-list-hover.gif) no-repeat 267px 5px;color:#FFF;} /* sub nav */ #sidebar #subnav_ul>li, #sidebar #subnav_ul>li.current>a:first-child, #sidebar #subnav_ul>li.current li ul {display:none;} #sidebar #subnav_ul>li.current, #sidebar #subnav_ul>li.current li.current ul {display:block;} #sidebar #subnav_ul>li.current li a, #sidebar #subnav_ul li.current li.current a, #sidebar #subnav_ul li.current li a:hover {background:#56bdb3 url(../img/bg_section-list-hover.gif) no-repeat 267px 6px;color:#FFF;} #sidebar #subnav_ul li.current li a {background:none;color:#bbe1e7;} #sidebar #subnav_ul>li.current li ul {background:#56bdb3;padding:0;} #sidebar #subnav_ul>li.current li ul li a, #sidebar #subnav_ul>li.current li.current ul li a {background:#56bdb3;border-color:#1f7488;color:#bbe1e7;font-size:.93em;} #sidebar #subnav_ul>li.current li ul li a:hover, #sidebar #subnav_ul>li.current li ul li.current a {background:none;color:#FFF;} /* section */ #sidebar .section {margin:10px 0 0 0;} /* product list */ #sidebar .product-list {font-size:.75em;list-style:none;margin:5px 0;padding:0;} #sidebar .product-list li {margin:5px 0;} #sidebar .product-list li a {background:#5eab93 url(../img/bg_product-list.png) no-repeat bottom left;color:#ffffff;cursor:pointer;display:block;text-align:right;padding:9px 40px;} #sidebar .product-list li a:hover {background-color:#c2e3cb;background-position:0 -135px;} #sidebar .product-list li.imglink a:hover {background-position:0 -14px;} #sidebar .product-list li a img {border:#cfd8dc 1px solid;display:none;margin:0 0 5px 0;width:279px;} #sidebar .product-list li a strong,#sidebar .product-list li a b {color:#000;font-weight:bold;margin-right:10px;} /* featured project */ #sidebar #featured-project {background:#020505;color:#5f726c;padding:0 0 25px 0;} #sidebar #featured-project h3 {border-top:#56bdb3 5px solid;color:#FFF;font-size:11px;font-weight:normal;margin:0 0 25px 0;text-transform:uppercase;} #sidebar #featured-project h3 span {background:#56bdb3;color:#FFF;line-height:20px;padding:5px 15px 5px 15px !important;} #sidebar #featured-project img {background:#122626;border:#4ba78d 2px solid;float:left;height:95px;margin:0 0 0 15px;width:95px;} #sidebar #featured-project h4 {font-size:.8em;margin:0 15px 3px 130px;} #sidebar #featured-project h4 a {color:#e3fef6;} #sidebar #featured-project p {font-size:.8em;margin:3px 15px 3px 130px;} #sidebar #featured-project p.launch {font-size:.76em;margin:15px 15px 0 130px;} #sidebar #featured-project p.launch a:hover {color:#FFF;} /* design partners */ #sidebar #design-partners {margin:0;} #sidebar #design-partners h3 {background:#238298;} #sidebar #design-partners p {color:#a8d3da;padding:10px 15px 0 15px;} #sidebar #design-partners p a {color:#FFF;} /* testimonial */ #sidebar blockquote {padding:10px 0;text-align:right;} #sidebar blockquote p.first {background: url(../img/bg_blockquote-p.gif) no-repeat;color:#FFF;font-size:.95em;padding:20px 20px 15px 20px;text-align:center;} #sidebar blockquote cite {background:url(../img/bg_blockquote-cite.gif) no-repeat top left;color:#252525;display:block;font-size:.8em;font-style:normal;line-height:1.2;padding:20px 0 0 0;} #sidebar blockquote cite span {color:#689284;display:block;font-size:9pt;font-style:italic;} /* footer */ /*- FOOTER -*/ #footer {color:#4d6b62;font-size:.8em;margin:0 auto;padding:15px 0;width:970px;} #footer a {color:#33afc3;} #footer a:hover {color:#FFF;} #footer .copyright {float:left;} #footer .plug {float:right;} a.top-lnk{ background:url(../img/to-top.gif) no-repeat 0 0; width:7px; height:6px; float:right; text-indent:-9999px; overflow:hidden; font-size:1px; } /*--------------------------------- 4. CLASSES ---------------------------------*/ .skip {display:none;} /*--------------------------------- 5. HACKS ---------------------------------*/ .clear:after, #header:after,#header ul:after, #content-wrap:after,.info-list li:after, .section-list ul:after, #products ul:after,#slider ul:after,#featured-project:after, #footer:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clear, #header,#header ul, #content-wrap, #products ul,.info-list li,.section-list ul, #slider ul, #featured-project, #footer {display:inline-block;} /* Hide from IE Mac \*/ .clear, #header,#header ul, #content-wrap, #products ul,.info-list li,.section-list ul, #slider ul, #featured-project, #footer {display:block;} /* End hide from IE Mac */ a[rel ~='external'] { padding-right: 18px; background: transparent url(../img/icon_external.gif) no-repeat center right; } a[rel ~='vcard'] { padding-right: 20px; background: transparent url(../img/vcard.png) no-repeat center right; } a[href ^="mailto:"] { padding-right: 18px; background: transparent url(../img/icon_mailto.gif) no-repeat center right; } a[rel='pdf'] { padding-right: 18px; background: transparent url(../img/icon_pdf.gif) no-repeat center right; } span[rel='pdf'] { padding-right: 18px; background: transparent url(../img/icon_pdf.gif) no-repeat center right; } #navlist li { display: inline; list-style-type: none; padding-right: 20px; } #test1 { position:absolute; top:70px; right:0; border: 2px solid #6fb9a3; background:#ffffff; width: 380px; height: 120px; } .quickLinks {padding-top:1px;padding-right:10px;text-align:right;} .quickLinks a {display:block;float:right;width:29px;height:23px;margin-left:0;background-image:url("../img/quicklinks.png");background-repeat:no-repeat;} .quickLinks a.contact {background-position: 0 -30px;} .quickLinks a.contact:hover,.quickLinks a.contact:focus {background-position: 0 -0px;} .quickLinks a.sitemap {background-position: -30px -30px;} .quickLinks a.sitemap:hover,.quickLinks a.sitemap:focus {background-position: -30px 0;}