/* ----------------------------
HTML Elements
-----------------------------*/
body { text-align:center; color: #444; font-family: Arial, Helvetica, Trebuchet MS; font-size: 12px; line-height: 1.2em;
background: #eee url(/public/agilehead.com/styles/images/body-bg.png) repeat-x; padding:0; margin: 0 }
p { margin:0px; padding:4px; color: #333; }
h1, h2, h3, h4, h5, h6 { font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helvetica; margin:0; }
h1 { font-size: 20px; padding: 6px 0px 12px 0px; }
h2 { font-size: 18px; font-weight: normal; padding: 8px 0px 8px 0px; }
h3 { font-size: 16px; font-weight: normal; padding: 2px 0px 6px 0px; }
h4 { font-size: 12px; padding: 2px 0px 4px 0px; }
h5 { font-size: 13px; padding: 2px 0px 4px 0px; font-weight: normal }
a img { border:none 0px; }
a, a:visited { color:#057 }
em { font-weight: bold }
/* -------------------
Common Classes
----------------------*/
.linkLike { cursor:pointer; text-decoration:underline; }
.button { cursor: pointer; }
.center { text-align: center }
div.small, ul.small, li.small, p.small, span.small { font-size: 11px; color:Gray }
.talllines { line-height: 1.7em }
p.iconic { background-repeat: no-repeat; padding-left: 32px; height:24px }
.icon-block { width: 200px; height: 200px; background-repeat:no-repeat }
.quote { font-family: Cambria, Georgia, Times New Roman; }
.standout { font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helvetica; }
/* ----- Floating Text -----*/
div.floatingtext { margin:0; padding-bottom:12px; background-repeat:no-repeat; min-height:220px; line-height: 1.4em }
.floatingtext .textFrame { padding:12px; background: url(/public/agilehead.com/styles/images/floatingtext-bg.png) repeat-x ;
border-left:1px none #ddd; width: 360px; }
.floatingtext p { font-size:13px }
.floatingtext.right { background-position: 0px 12px; }
.floatingtext.right .textFrame { margin-left: 128px; float: left; }
.floatingtext.left { background-position: 392px 12px; }
.floatingtext.left .textFrame { margin-left: 0px; float: left; }
/* --- Quotes --- */
blockquote.quote { display: block; padding: 0 0 0 12px; width: 420px; margin: 8px 0 2px 40px;
float: left; font-size: 18px; line-height: 1.1em; }
blockquote.quote:before, blockquote:after { color: #999; display: block; font-size: 64px; width: 50px; }
blockquote.quote:before { content: open-quote; height: 0; margin-left: -0.55em; }
blockquote.quote:after { content: close-quote; height: 50px; margin-top: 0px; margin-left: 420px }
blockquote.quote.small { margin: 0 0 0 24px; font-size: 14px; width: 300px; }
blockquote.quote.small:before, blockquote.small:after { font-size: 40px }
blockquote.quote.small:after { content: close-quote; height: 24px; margin-top: 0px; margin-left: 308px; }
blockquote.quote .by { float: right; margin-right: 8px; font-size: 16px; font-style:italic }
blockquote.quote.first { margin-top: 20px }
blockquote.quote.small.first { margin-top: 12px }
/* Frame is the top level container */
#frame { width: 960px; margin: 0 auto 0 auto; background-color: #fff; border: solid 1px #eee }
/* ---------- Header ---------- */
.header { text-align:left; width:960px; height:80px; margin:0px auto 0px auto; background: #fff url(/public/agilehead.com/styles/images/header-bg.png) repeat-x; }
.header ul { height: 64px; position: absolute; margin-left: 0px; padding-left: 36px }
.header ul li { float: left; list-style: none; padding: 16px 24px 0px 0px; text-transform:lowercase; font-size: 20px; font-weight: lighter;
font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helvetica; margin:0; vertical-align:top }
.header ul li.agilehead { padding-top:0px }
.header ul li.agilehead a { color: #790 }
.header ul li.services a { color: #f30 }
.header ul li.products a { color: #090 }
.header ul li.blog a { color: #06c }
.header ul li.about a { color: #660 }
.header .hire { float: right; display:block; margin-top: 12px }
/* ---------- Content ---------- */
.content { text-align:left; margin:0px; padding-left: 32px; }
/* ---- with a sidebar ---- */
.content .contentArea { width: 660px; float: left }
.content .sidebar { float: left; padding: 40px 0 0 20px; width:220px; }
.content .sidebar .menu { background:url(/public/agilehead.com/styles/images/sidemenu-bg.png) no-repeat scroll 0 0 transparent; border-bottom:1px solid #CCCCCC; width:200px; }
.content .sidebar .menu ul { margin:0; padding:0 1px; }
.content .sidebar .menu ul li { list-style-type:none; margin:0; padding:0; }
.content .sidebar .menu ul li a { border-top:1px solid #DDDDDD; color:#666666; display:block; height:28px; margin:0;
padding:12px 0 0 40px; text-decoration:none; }
.content .sidebar .menu ul li a:hover { background-color:#FAFAFA; color:#0066CC; }
.content .sidebar .menu ul li a.selected { background:url("/public/agilehead.com/styles/images/selected-menuitem-bg.png") no-repeat scroll 0 0 #FFFFFF; }
.content .sidebar .menu h2 { font-size:12px; height:17px; padding-left:12px; padding-top: 12px }
.content .sidebar .menu .bottom { }
/* --- Massive Header --- */
.content.bigHeader .headingDesc { color: #eee; font-family: Lucida Sans Unicode, Lucida Grande, Arial, Helvetica;
margin:0; padding: 0; font-weight: normal; font-size: 24px }
.content.bigHeader h1 { font-size: 32px; color: #eee; line-height: 1.3em; font-weight: normal; padding-bottom:56px; }
.content.bigHeader { padding-top: 32px; background: #fff url(/public/agilehead.com/styles/images/content-bg.png) no-repeat }
.content.bigHeader .otherSection { clear: both; padding-top: 12px }
.content.bigHeader .otherSection h2 { padding: 12px 12px 12px 32px; margin: 0 0 12px -32px; background-color: #ddd; clear: both}
/* ----------- Footer ---------- */
.footer { clear:both; text-align:center; font-size: 11px; margin-top: 32px; padding: 12px 0 12px 0;
background-color: #eee }
.footer .content { padding:12px 0px 12px 0px; color: #aaa; background: #fff; }
.footer a, .footer a:hover, .footer a:visited { color: #666 }
/* ----------- Page Menu (The side menu displayed within Page Contents) ----------- */
ul.contentIndex { width: 156px; float: left; margin: 0px; padding: 0px 0px 0px 12px; border-top: dotted 1px #ccc }
ul.contentIndex li { list-style:none; width: 140px; padding: 4px; margin-top: 6px }
ul.contentIndex li a { text-decoration: none; }
ul.contentIndex li.selected { list-style:none; color: #fff; width: 140px; font-weight: bold; background-color: #ff9 }
/* ----------- SlideShow ------------ */
/* http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/ */
#slideshow #slidesContainer { position:absolute; margin:24px 24px 24px 104px; width:600px; height:400px; overflow:auto;
/* allow scrollbar */ position:relative; border: solid 1px #ccc; float:left }
#slideshow #slidesContainer .slide { margin:0 auto; width:700px; /* reduce by 20 pixels to avoid horizontal scroll */
height:400px; float: left; }
#slideshow .control { position:absolute; display:block; width:50px; height:72px; text-indent:-10000px; margin-top: 100px; float: left; cursor: pointer; }
#slideshow #leftControl { margin-left: 48px; background:transparent url(/public/agilehead.com/images/slideshow/prev.png) no-repeat 0 0; }
#slideshow #rightControl { margin-left: 712px; background:transparent url(/public/agilehead.com/images/slideshow/next.png) no-repeat 0 0; }
/* ----------- FrontPage ----------- */
.frontPage .billboard { background: #fff url(/public/agilehead.com/Styles/images/frontPage/billboard-bg.png) repeat-x;
margin-left: -32px; padding: 20px 0 0 32px; }
.frontPage .video { float: left; margin-left: -12px; padding-bottom: 24px; }
.frontPage .struck { float:left; padding-left: 24px; width: 375px; font-size: 22px; line-height: 1.2em; }
.frontPage .struck img { position: relative; left: 0px; top:-48px }
.frontPage .slogan { float: left; padding-left: 24px; width: 375px; margin-top: -32px; height: 100px; font-size: 22px; line-height: 1.2em; }
.frontPage .measurable { color: #c00; font-size:30px; font-weight: bold; font-style: italic; }
/* Area where we define 'measurable competency */
.frontPage .billboard .para { float:left; width: 375px; margin-top:-20px; padding-left: 24px; padding-bottom: 32px }
.frontPage .billboard .para .heading { padding:0; margin: 0 0 6px 0; font-weight: bold; color: #c00; }
.frontPage .billboard .para .text { padding:0 0 0 8px; margin: 0 }
.frontPage .billboard .para li { padding: 4px; }
.frontPage .billboard .para.last { padding-bottom: 8px }
.frontPage .showcase { clear: both; margin: 12px 0 0 -32px; height:332px; padding-left:12px; background-color: #666; }
.frontPage .showcase h2 { background-color:#ccc; margin-left: -12px; text-transform: uppercase;
padding-left: 24px; letter-spacing: 4px; color: #666; font-size: 14px; font-weight: lighter }
.frontPage .showcase .items { height: 290px; padding-top: 8px; }
.frontPage .showcase .item { float: left; height: 262px; margin-bottom: 20px; width: 280px; padding: 8px 12px 12px 16px }
.frontPage .showcase .item.JobHunt { border-left: 2px dotted #666; }
.frontPage .showcase .item.Taskometer { border-left: 2px dotted #666; }
.frontPage .showcase .item h1 { font-size: 26px; font-weight: normal; color: #fff; border-bottom: 4px solid #ccc; }
.frontPage .showcase .item.AgileFx h1{ width: 140px }
.frontPage .showcase .item.JobHunt h1 { width: 200px }
.frontPage .showcase .item.Taskometer h1 { width: 210px }
.frontPage .showcase .item .platform { font-size: 16px; text-transform:uppercase; font-weight: normal; color: #ccc; padding:8px 0px 12px 0px; }
.frontPage .showcase .item p { font-size: 13px; line-height: 1.2em; color: #eee; }
.frontPage .showcase .item .visitWebsite a, .frontPage .showcase .visitWebsite a:visited { font-size: 12px; text-transform: uppercase; color: #fc0 }
.frontPage .showcase .item .viewSource a, .frontPage .showcase .viewSource a:visited { font-size: 12px; text-transform: uppercase; color: #fc0 }
.frontPage .twitter { clear: both; padding: 0px 0px 12px 0px; }
.frontPage .twitter .heading { float:left; width:238px; margin-top:8px; padding: 0px 0px 0px 40px; font-size: 20px; line-height: 1.1em }
.frontPage .twitter .heading img { float: left; margin-left: -40px; padding-right: 12px; }
.frontPage .twitter .heading .follow a, .frontPage .twitter .heading .follow a:visited
{ text-transform: uppercase; font-size: 14px; font-weight: bold; color: #36daff; }
.frontPage .twitter .feeds { padding-top: 4px; margin-left: 246px; width: 500px }
.frontPage .twitter .feeds li { list-style: none; font-size: 14px; padding-left: 20px; margin-bottom: 12px;
line-height: 1.2em; border-left: 3px dotted #36daff }
.frontPage .twitter .feeds li .time { font-size: 11px; }
/* ----------- ServicesPage ----------- */
.servicesPage { }
.servicesPage .billboard { height: 224px }
.servicesPage .releaseDateSection { float:left; width: 400px; height: 240px; font-family: Cambria, Georgia, Times New Roman; }
.servicesPage .releaseDateSection .txt { font-size: 28px; font-weight: lighter; color: Red }
.servicesPage .releaseDateSection .date { font-size: 52px; font-weight: lighter; color: Red; line-height: 0.8em; }
.servicesPage .releaseDateSection .dateSuffix { font-size: 20px }
.servicesPage .releaseDateSection .desc { font-size: 24px; padding-top: 24px; line-height: 1.2em }
.servicesPage .services { margin-left: -32px; padding-left: 32px }
.servicesPage .otherSection .faq { float: left; padding-left: 12px; width: 400px }
.servicesPage .otherSection .faq p { clear: both; text-align: center; padding-bottom: 20px }
.servicesPage .floatingtext.left .faq { padding-left: 140px }
/* ----------- ProductsPage ----------- */
.productsPage h1 { padding: 24px 0 16px 0; float: left; }
.productsPage h2 { padding: 16px 0 4px 0; }
.productsPage li { padding: 4px }
.productsPage a.visitWebsite { display: block; float: left; margin: 20px 12px 12px 32px; text-align:center;
width: 72px; font-size:11px; padding: 4px; color: #930; background-color:#ffd; border: 1px solid #fc0 }
.productsPage .showcase a.visitWebsite:hover { color: #930; background-color:#ffc; border: 1px solid #fc0 }
.productsPage .showcase { background-repeat: no-repeat; background-position: 24px 0; margin-top:48px }
.productsPage .showcase .textContent { padding-top: 360px; width: 580px; }
.productsPage .showcase .col1, .productsPage .showcase .col2 { float: left; width: 280px; margin-top: 12px }
.productsPage .showcase .col1 h3, .productsPage .showcase .col2 h3 { font-weight: normal }
.productsPage .showcase .col1 li, .productsPage .showcase .col2 li { padding: 6px; padding-top: 0px }
/* ----------- HiringPage ----------- */
.hiringPage .essentialsOnly { position:absolute; margin-top: -120px; margin-left: 540px }
.hiringPage .projectTypes { width: 620px; float: left }
.hiringPage .projectType { margin-top: 12px }
.hiringPage .projectType.first { margin-top: 0px }
.hiringPage .more { padding-top: 48px; font-size: 16px; line-height: 1.2em; }
.hiringPage .more h2 { font-size: 24px; margin-top: 20px }
.hiringPage .otherSection li { padding: 4px; font-size: 14px }
.hiringPage .otherSection li p { font-size: 12px; color: Gray }
/* ----------- AboutPage ----------- */
.aboutPage .content.bigHeader { padding-top: 32px; background: #fff url(/public/agilehead.com/styles/images/aboutPage/about-bg.png) no-repeat }
.aboutPage .textContent { width: 600px; float: left }
.aboutPage .downloadPresentation { padding-left: 32px; background: #fff url(/Public/agilehead.com/Images/pdf-icon.png) no-repeat;
margin: 12px 12px 12px 40px }
.aboutPage h2 { margin: 32px 0 20px 0; }
.aboutPage .person { background-color:#fff; height: 224px; line-height: 1.4em; padding-bottom: 16px }
.aboutPage .person img { float: right; margin-right: 40px }
.aboutPage .person h3 { float: left; padding-top: 8px; margin-left:20px; width: 300px }
.aboutPage .person p { float: left; width: 360px; margin-left: 20px; }
.aboutPage .contact { float: right; width: 280px; padding-left: 20px; margin-bottom: 20px;
background: #fff; border-left: 2px dotted #ccc; }
.aboutPage .contact h2 { margin-top: 0px; font-size: 24px; padding: 12px 0 0 0 }
.aboutPage .twitter { float: right; width: 300px; height: 80px; margin-top: 12px; background: #fff url(/public/agilehead.com/styles/images/aboutPage/twitter.png) no-repeat }
.aboutPage .twitter p { padding-left: 72px; line-height: 1.3em; font-size: 14px }
.aboutPage .twitter p a { font-weight: bold; font-size: 14px; }
.aboutPage .facebook{ float: right; width: 300px; height: 80px; margin-top: 12px; background: #fff url(/public/agilehead.com/styles/images/aboutPage/facebook.png) no-repeat }
.aboutPage .facebook p { padding-left: 72px; line-height: 1.3em; font-size: 11px }
.aboutPage .facebook p a { font-weight: bold; font-size: 14px; display:block; padding-top: 6px; }