/* @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,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}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0} /*--------------------------------- 2. GENERAL SELECTORS ---------------------------------*/ body {background:#0b1f1b;font:1em Helvetica, Arial, Sans-serif;padding:10px 0;text-align:center;} a {color:#007d9a;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-2.jpg) repeat-x left -135px;} body#home #wrap-2 {background:url(../_img/bg_wrap-2.jpg) repeat-x top left;} body#home #wrap-3 {background:url(../_img/bg_wrap-3.gif) no-repeat right 76px;} #container {margin:0 auto;padding:0;text-align:left;width:970px;} body#home #container {padding:0 0 15px 0;} /*- HEADER -*/ #header {color:#6fb9a3;height:35px;padding:35px 0;position:relative;z-index:0;} body#home #header {background:url(../_img/bg_header.jpg) no-repeat bottom center;height:170px;} /* logo */ #header h1 {height:35px;float:left;margin:0;width:465px;} body#home #header h1 {margin:0 0 25px 0;} #header h1 a {background:url(../_img/logo.gif) no-repeat top left;display:block;float:left;height:29px;text-indent:-5000px;width:220px;} #header h1 a:hover {background-position:bottom left;} #header h1 em {display:block;font-size:12px;font-style:normal;font-weight:normal;margin:18px 0 0 245px;text-transform:uppercase;white-space:nowrap;} /* nav */ #header ul {float:right;} #header ul li {float:left;margin:0 0 0 3px;} #header ul ul {display:none;} #header ul li a {background:url(../_img/nav.png) no-repeat bottom left;display:block;height:29px;float:left;text-indent:-5000px;width:50px;} #header ul li#nav_home a {background-position:0 bottom;width:56px;} #header ul li#nav_home a:hover {background-position:0 top;} #header ul li#nav_home.current a {background-position:0 center;} #header ul li#nav_products a {background-position:-56px bottom;width:79px;} #header ul li#nav_products a:hover {background-position:-56px top;} #header ul li#nav_products.current a {background-position:-56px center;} #header ul li#nav_services a {background-position:-135px bottom;width:70px;} #header ul li#nav_services a:hover {background-position:-135px top;} #header ul li#nav_services.current a {background-position:-135px center;} #header ul li#nav_clients a {background-position:-205px bottom;width:62px;} #header ul li#nav_clients a:hover {background-position:-205px top;} #header ul li#nav_clients.current a {background-position:-205px center;} #header ul li#nav_company a {background-position:-267px bottom;width:73px;} #header ul li#nav_company a:hover {background-position:-267px top;} #header ul li#nav_company.current a {background-position:-267px center;} /* tag */ #header h2 {background:url(../_img/tagline.png) no-repeat;clear:left;display:none;float:left;font-size:1.2em;font-weight:normal;height:110px;text-indent:-5000px;width:485px;} body#home #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 {display:none;} #header p a {background:url(../_img/button_reseller.jpg) no-repeat top left;display:block;height:88px;text-indent:-5000px;width:275px;} #header p a:hover {background-position:bottom left;} /*- CONTENT -*/ #content {float:left;font-size:.85em;line-height:1.4;width:660px;} /* question */ #content #question {background:#0b1f1b;color:#7dab9c;font-size:.95em;padding:25px 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:#071512;} #content #products h3, #content #recent-projects h3 {border-top:#34aec3 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:#34aec3;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:265px;} #content #products ul li#product-2 {background-position:-308px -25px;height:265px;} #content #products ul li#product-3 {background-position:12px -320px;} #content #products ul li#product-4 {background:none;} #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;} /* recent projects */ #content #recent-projects {background:#1e443b 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:#285046;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:#285046 4px solid;height:88px;margin:0 5px;width:88px;} #content #recent-projects #slider ul li a:hover img {border-color:#4ba78d;} /* content header */ #content #content-header {background:#0b1f1b;height:96px;} #content #content-header h1 {color:#2cbfd9;font-size:1.7em;font-weight:normal;margin:0;padding:20px 20px 0 20px;} #content #content-header #breadcrumbs {color:#d1d2d4;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 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:.9em;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;} /*- 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:#238298 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:#58afc0 url(../_img/bg_section-list-hover.gif) no-repeat 267px 4px;color:#FFF;} #sidebar #subnav_ul li.current li a {background:none;color:#bbe1e7;} #sidebar #subnav_ul>li.current li ul {background:#238298;padding:0;} #sidebar #subnav_ul>li.current li ul li a, #sidebar #subnav_ul>li.current li.current ul li a {background:#238298;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:.8em;list-style:none;margin:5px 0;padding:0;} #sidebar .product-list li {margin:5px 0;} #sidebar .product-list li a {background:#dae3d6 url(../_img/bg_product-list.png) no-repeat bottom left;color:#5e9c7c;cursor:pointer;display:block;padding:9px 10px;} #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:normal;} /* featured project */ #sidebar #featured-project {background:#020505;color:#5f726c;padding:0 0 25px 0;} #sidebar #featured-project h3 {border-top:#5eab93 5px solid;color:#FFF;font-size:11px;font-weight:normal;margin:0 0 25px 0;text-transform:uppercase;} #sidebar #featured-project h3 span {background:#5eab93;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 {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;} /*--------------------------------- 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 */ /* monkForm */ .monkForm legend{ display: none; } .monkForm .radio legend{ display: block; } .monkForm label{ color: #333333; font-size: 12px; font-weight: bold; } .monkForm div.required label:after{ content: " (Required)"; color: #0A99AE; font-style: italic; font-size: 11px; } .monkForm .text input, .monkForm .select select, .monkForm .textarea textarea{ width: 350px; padding: 5px; border: 1px solid #c3c3c3; border-top-color: #7c7c7c; border-bottom-color: #dddddd; color: #111111; font-size: 14px; font-weight: normal; font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; } .monkForm .text input#text_380{ width: 450px; } .monkForm .select select{ width: 362px; } .monkForm .textarea textarea{ width: 450px; height: 175px; font-size: 12px; line-height: 1.5; } .monkForm p#formsubmit input{ padding: 5px 10px; background: #061210; border: 0; color: #2CBFD9; font-size: 16px; font-weight: normal; font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; text-transform: uppercase; } .monkForm p#formsubmit input:hover{ background: #000000; color: #fff; } #content #text .monkForm p.errorSummary{ color: #0A99AE; } #content #text .monkForm p.error{ margin: 1.5em 0 0; color: #0A99AE; } .monkForm .text input:hover, .monkForm .text input:focus, .monkForm .select select:hover, .monkForm .select select:focus, .monkForm .textarea textarea:hover, .monkForm .textarea textarea:focus{ border: 1px solid #7c7c7c; } /* = Tables --------------------------------------------------------------------- */ #text table, #text tbody, #text tr{ border: none; } #text table{ margin: 20px; } #text table td{ vertical-align: middle; border: 1px solid #ccc; padding: 7px; } #text table tr.even{ background: #EEF7F9; }