/* @override http://10.0.1.6:8888/artaquio/css/main.css */

/*
Company:	ArtAquio Studio
File:		main.css - This contains all the main styles for the website.

All the styles are separted into the following groups:
Global Browser Reset - this is handled by the reset-fonts.css file from YUI
HTML, Body - for the html and body tags
Layout - styles that define the layout of the site
Modules - styles for content modules
Common Text Styles - Styles for text
Default Headings - headings like h1, h2, etc
Default Lists - unordered and ordered lists
Nav - navigation bar
Forms - html forms
Default Links - links
Misc - anything that doesn't fit elsewhere
*/

/* @group HTML, Body */
html {
	background-color: #f8f8f8;
}
body {
	font-family: Verdana, arial, sans-serif;
}
/* @end */

/* @group Layout */
/* Head */
div#hd {
	width: 100%;
	min-width: 1070px;
	background: url(../images/bg-hd.gif) repeat-x 0 0;
	height: 200px;
	border-bottom: 1px solid #fff;
}
div#hd div.wrap {
	width: 1070px;
	margin-left: auto;
	margin-right: auto;
	padding: 1px 0;
}

/* Body */
div#bd {
	width: 100%;
	min-width: 1070px;
}
div#bd div.wrap {
	width: 1070px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* Footer */
div#ft {
	width: 100%;
	padding: 40px 0;
	background-color: #2b2c2c;
}
div#ft div.wrap {
	width: 1070px;
	margin-left: auto;
	margin-right: auto;
}
div#ft p {
	color: #9b9b9b;
	font-size: 85%;
	float: left;
	display: inline;
}
div#ft p.call {
	margin-left: 115px;
}
div#ft p.top {
	font-weight: bold;
	margin-left: 110px;
}
div#ft p.top a:link, div#ft p.top a:visited {
	color: #b52e10;
	text-decoration: none;
}
div#ft p.top a:hover {
	text-decoration: underline;
}
/* @end */

/* @group Modules */
/* Logo */
div#logo {
	width: 223px;
	height: 39px;
	background: url(../images/logo-artaquio.gif) no-repeat 0 0;
	text-indent: -9000px;
	margin: 48px 0 36px 0;
}
div#logo a {
	display: block;
	height: 100%;
}

/* Util Nav */
div.util {
	color: #fcfcfc;
	float: right;
	display: inline;
}
div.util p {
	margin: 0;
	padding: 6px 0 0 0;
}
div.util p a:link, div.util p a:visited {
	color: #fcfcfc;
	text-decoration: none;
}
div.util p a:hover {
	color: #b52e10;
}

/* Hire Me */
div.hire-me-wrap {
	position: relative;
	width: 1070px;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
}
a.hire-me {
	position: absolute;
	top: 191px;
	right: 0;
	z-index: 11;
	width: 93px;
	height: 158px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../images/img-hire-me.png) no-repeat 0 0;
}

/* Home Main */
div.home-main-outer {
	background-color: #edecec;
	padding: 20px 0 50px 0;
	margin-bottom: 30px;
}
div.home-main {
	position: relative;
}
div.home-main h1 {
	color: #373838;
	font-size: 269%;
	font-weight: normal;
	font-family: "Myriad Pro", Myriad, arial, helvetica, sans-serif;
	margin: 0 0 10px 0;
	line-height: 110%;
}
div.home-main h2 {
	color: #373838;
	font-size: 138.5%;
	font-weight: normal;
	font-family: "Myriad Pro", Myriad, arial, helvetica, sans-serif;
	margin: 0 0 10px 0;
}
div.home-main p {
	color: #373838;
	font-size: 93%;
	font-family: Verdana, arial, sans-serif;
	line-height: 160%;
}
div.home-slideshow-wrap {
	background: url(../images/bg-home-slideshow.jpg) no-repeat 0 0;
	padding: 65px 54px 64px 54px;
	width: 328px;
	height: 279px;
	float: left;
	display: inline;
}
div.home-slideshow {
	width: 328px;
	height: 279px;
	overflow: hidden;
}
div.home-text {
	width: 512px;
	margin: 0 0 0 30px;
	padding: 40px 0 0 0;
	float: left;
	display: inline;
}
div.home-text p.btns {
	margin: 0;
	padding: 30px 0 0 0;
}
div.home-text p.btns a {
	margin-right: 20px;
}
div.home-slideshow-nav {
	position: absolute;
	top: 425px;
	left: 165px;
}
div.home-slideshow-nav a {
	display: block;
	width: 17px;
	height: 17px;
	background: url(../images/btn-home-slideshow.gif) no-repeat 0 0;
	overflow: hidden;
	margin: 0 1px;
	text-indent: -9000px;
	float: left;
	display: inline;
}
div.home-slideshow-nav a:hover, div.home-slideshow-nav a.activeSlide {
	background: url(../images/btn-home-slideshow-active.gif) no-repeat 0 0;
}

/* Home Products */
div.home-products {
	padding: 0 0 10px 0;
	margin-bottom: 20px;
	background: url(../images/bg-home-cols.gif) repeat-y 50% 0;
}
div.home-products div.col {
	width: 322px;
	float: left;
	display: inline;
}
div.home-products div.col-middle {
	margin: 0 50px;
}
div.home-products h3 {
	color: #373838;
	font-size: 116%;
	font-weight: bold;
	margin: 0 0 10px 0;
}
div.home-products p {
	color: #373838;
	font-size: 85%;
	line-height: 180%;
}
div.home-products img.feature-img {
	padding: 4px;
	border: 1px solid #e0dfdf;
	background-color: #fff;
	margin-bottom: 20px;
}
div.home-products a {
	font-weight: bold;
}
div.home-products a:link, div.home-products a:visited {
	color: #a62205;
	text-decoration: none;
}
div.home-products a:hover {
	text-decoration: underline;
}
div.home-products p.btn-learn-more {
	font-weight: bold;
	text-transform: uppercase;
	margin: 0;
}
div.home-products p.btn-learn-more a {
	display: block;
	width: 114px;
	height: 31px;
	line-height: 31px;
	text-align: center;
	background: url(../images/btn-learn-more-gray.gif) no-repeat 0 0;
}
div.home-products p.btn-learn-more a:link, div.home-products p.btn-learn-more a:visited {
	color: #373737;
	text-decoration: none;
}
div.home-products p.btn-learn-more a:hover {
	text-decoration: none;
	color: #a62205;
}

/* Tagline */
div.tagline {
	margin-bottom: 20px;
}

/* Bottom Callouts */
div.bottom-callouts {
	padding: 0 0 10px 0;
	margin-bottom: 20px;
	background: url(../images/bg-home-cols.gif) repeat-y 50% 0;
}
div.bottom-callouts div.col {
	width: 322px;
	float: left;
	display: inline;
}
div.bottom-callouts div.col-middle {
	margin: 0 50px;
}
div.bottom-callouts p.first {
	padding: 35px 0 0 0;
}
div.bottom-callouts p {
	color: #373838;
	line-height: 160%;
}

/* Learn About Paola */
div.learn-about-paola img {
	margin: 0 20px 0 0;
	float: left;
	display: inline;
}

/* Page Title */
div.page-title {
	padding: 34px 0 10px 0;
	background-color: #edecec;
}
div.page-title h1 {
	font-family: "Myriad Pro", myriad, Arial, sans-serif;
	margin: 0 0 4px 0;
	font-size: 231%;
	font-weight: normal;
}
div.page-title p.subnav {
	font-size: 93%;
	margin: 0;
}
div.page-title p.subnav a:link, div.page-title p.subnav a:visited {
	color: #373838;
	text-decoration: none;
}			
div.page-title p.subnav a:hover {
	text-decoration: none;
	color: #b52e10;
}
div.page-title p.subnav a.current {
	font-weight: bold;
}
div.page-title p.subnav a.current:link, div.page-title p.subnav a.current:visited {
	color: #b52e10;
	text-decoration: none;
}
div.page-title p.subnav a.current a:hover {
	text-decoration: none;
}

/* Main */
div.main {
	padding: 30px 0;
}
div.main p.thumbnail-note {
	color: #2f3030;
	font-size: 100%;
	font-family: Georgia, times, serif;
	font-style: italic;
	padding: 20px 0;
	background: url(../images/bg-hr.gif) repeat-x 0 100%;
}

/* Samples */
div.samples a {
	margin-right: 10px;
}
div.samples img {
	padding: 3px;
	background-color: #fff;
	border: 1px solid #dbdbdb;
}
/* @end */

/* @group Common Text Styles */
div.main {
	color: #373838;
}
div.main p {
	font-size: 93%;
	line-height: 150%;
	margin-bottom: 15px;
}
/* @end */

/* @group Default Headings */
div.main h2 {
	text-transform: uppercase;
	color: #373838;
	font-size: 93%;
	margin: 0 0 15px 0;
}
/* @end */

/* @group Default Lists */
div.main li {
	font-size: 93%;
	line-height: 150%;
}
div.main li li {
	font-size: 100%;
}
/* @end */

/* @group Nav */
div#nav ul {
	margin: 0;
	padding: 0;
	background-color: #343434;
}
div#nav ul li {
	list-style: none;
	margin: 0 15px 0 0;
	padding: 0 0 5px 0;
	float: left;
	display: inline;
}
div#nav ul li.arrow {
	background: url(../images/bg-nav-arrow-gray.png) no-repeat 50% 100%;
}
div#nav ul a {
	font-weight: bold;
	display: block;
	line-height: 30px;
	padding: 0 10px;
	background-color: #5e5e60;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}
div#nav ul a:link, div#nav ul a:visited {
	color: #fcfcfc;
	text-decoration: none;
}
div#nav ul li:hover a, div#nav ul li#active a {
	background-color: #b52e10;
}
div#nav ul li.arrow:hover, div#nav ul li#active.arrow {
	background: url(../images/bg-nav-arrow-red.png) no-repeat 50% 100%;
}
div#nav ul a:hover {
	text-decoration: none;
}
/* @end */

/* @group Forms */
	
/* @end */

/* @group Default Links - link visited hover active */
a:link, a:visited {
	color: #b52e10;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/* @end */

/* @group Misc */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */