/*
Stone Construction Services Style Sheet
Author: Michael Marcialis
Website: http://www.redhandeddesign.com
*/

/* ============================================================================
UNIVERSAL RESET
=============================================================================== */
/* v1.0 | 20080212 */

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: '';
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ============================================================================
LAYOUT STYLES
=============================================================================== */
body {
font:normal 62.5% Georgia, "Palatino Linotype", Palatino, "Book Antiqua", Times, serif;
background:#7f7f7f url(/images/background_main.gif) repeat left top;
min-width:950px;
text-align:center;
}

#header,
#content,
#mainContentWrapper,
#footerWrapper {
width:100%;
}

#header {
/*Removed due to double loading of images as jQuery loads*/
/*background:#040404 url(/images/background_intro.jpg) no-repeat center top;*/
background-color:#040404;
padding-top:2.5em;
overflow:hidden;
}

.theme1 #header {
background:#040404 url(/images/background_intro.jpg) no-repeat center top;
}

.theme2 #header {
background:#040404 url(/images/background_intro2.jpg) no-repeat center top;
}

.theme3 #header {
background:#040404 url(/images/background_intro3.jpg) no-repeat center top;
}

#content {
background:#cecece url(/images/background_content.jpg) repeat-x left top;
font-size:1.4em;
color:#767676;
padding-bottom:6em;
}

#mainContentWrapper {
background:transparent url(/images/background_shadow.jpg) no-repeat center top;
}

#footerWrapper {
background:transparent url(images/background_footer.jpg) no-repeat center top;
margin-top:-49px;
padding-bottom:4em;
}

#navigation,
#introduction,
#mainContent,
#subContent,
#footer {
width:950px;
text-align:left;
margin:0 auto;
}

#introduction {
position:relative;
overflow:hidden;
}

#navigation {
background:rgb(67, 67, 67);
background:rgba(67, 67, 67, 0.5);
overflow:hidden;
padding:8px 0;
font-size:1.1em;
color:#767676;
}

#introText {
width:430px;
float:right;
margin:6em 20px 15em 0;
display:inline;
}

#mainContent {
position:relative;
top:-40px;
background:transparent url(/images/background_columns.gif) repeat-y center top;
}

#mainContent:after,
#servicesGroup:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

#subContent {
overflow:hidden;
}

#details,
#license {
width:630px;
float:left;
}

#portfolio,
#follow {
width:310px;
float:right;
}

#details,
#portfolio {
background-color:#fff;
}

.ui-tabs #servicesGroup {
color:#5e653f;
background:transparent url(/images/background_services.jpg) no-repeat left top;
}

#servicesGroup .services {
float:left;
width:130px;
margin-right:30px;
}

#servicesGroup .last {
margin:0;
width:110px;
}

.ui-tabs #feedbackGroup {
color:#415b67;
background:transparent url(/images/background_feedback.jpg) no-repeat left top;
}

.ui-tabs #contactGroup {
color:#675841;
background:transparent url(/images/background_contact.jpg) no-repeat left top;
}

#portfolio {
color:#653f3f;
}

#footer {
background-color:#415b67;
color:#fff;
font-size:1.1em;
overflow:hidden;
padding:3.2em 0;
}

/* ============================================================================
HEADER STYLES
=============================================================================== */
h1 {
float:left;
margin-left:20px;
display:inline;
width:135px;
height:58px;
}

h2 {
color:#fff;
font:normal 3em Helvetica, "Arial Narrow", Arial, sans-serif;
font-stretch:condensed;
text-transform:uppercase;
position:relative;
}

h2 em {
position:absolute;
left:-180px;
top:-.205em;
text-align:center;
font-style:normal;
width:160px;
display:block;
padding:.2em 0;
background:rgb(67, 67, 67);
background:rgba(67, 67, 67, 0.5);
color:rgba(255, 255, 255, 0.50);
}

h3 {
font:2.14em Helvetica, "Arial Narrow", Arial, sans-serif;
font-stretch:condensed;
text-transform:uppercase;
}

#portfolio h3 {
position:relative;
margin-top:-66px;
width:160px;
height:79px;
text-indent:-9999em;
background:#653f3f url(/images/tab_work.gif) no-repeat left bottom;
}

#subContent h3 {
margin-bottom:1.05em;
}

#follow h3 {
margin-bottom:.4em;
}

h4 {
font-size:.86em;
font-style:italic;
font-weight:normal;
margin-bottom:1em;
}

/* ============================================================================
LIST STYLES
=============================================================================== */
#navigation ul {
float:right;
margin:.2em 20px .2em 0;
display:inline;
}

#navigation li {
padding-left:18px;
margin:.2em 0;
}

#navigation .fn {
position:absolute;
left:-999em;
}

#navigation .tel {
background:transparent url(/images/icon_phone.gif) no-repeat left center;
}

#navigation .email {
background:transparent url(/images/icon_mail.gif) no-repeat left center;
}

#navigation #jump {
background:transparent url(/images/icon_jump.gif) no-repeat left center;
}

#content ul {
margin-bottom:1.75em;
}

#servicesGroup ul {
margin:0;
}

#content li {
padding-left:22px;
line-height:1.6em;
font-size:.86em;
}

#servicesGroup li {
background:transparent url(/images/bullet.gif) no-repeat left .5em;
padding-left:15px;
}

#portfolio li {
background:transparent url(/images/icon_flickr.gif) no-repeat left .1em;
}

li#twitter {
background:transparent url(/images/icon_twitter.gif) no-repeat left .25em;
}

li#facebook{
background:transparent url(/images/icon_facebook.gif) no-repeat left .25em;
}

li#resume {
background:transparent url(/images/icon_pdf.gif) no-repeat left .25em;
}

#footer ul {
float:right;
}

#footer li {
float:left;
margin-left:5px;
display:inline;
}

/* ============================================================================
TYPOGRAPHY STYLES
=============================================================================== */
strong {
font-weight:bold;
}

em {
font-style:italic;
}

#introText p {
color:#fff;
font-size:1.6em;
margin:1.3em 0;
line-height:1.4em;
}

#introText h2+p {
font-size:1.8em;
font-style:italic;
line-height:1.5em;
}

#subContent p,
#footer p,
#subContent ul,
#portfolio ul,
#footer ul,
#subContent h3 {
padding:0 20px;
}

#content p {
line-height:1.35em;
margin-bottom:1.75em;
}

blockquote {
position:relative;
overflow:hidden;
}

#feedbackGroup p {
width:330px;
float:right;
}

#feedbackGroup cite {
display:block;
width:80px;
float:left;
padding-top:.2em;
font:bold .79em Arial, Helvetica, sans-serif;
}

#feedbackGroup small {
font-style:italic;
font-weight:normal;
display:block;
}

#content #follow blockquote p,
#content #follow blockquote ul {
color:#fff;
margin:0;
}

#content blockquote li {
padding:0;
font-size:1em;
line-height:1.35em;
}

#follow blockquote {
background:#8a8a8a url(/images/twitter_bird.gif) no-repeat center bottom;
padding:1.4em 0 5.6em 0;
margin-bottom:1em;
}

#footer p {
line-height:1.4em;
}

/* ============================================================================
IMAGE STYLES
=============================================================================== */
#introduction img {
position:absolute;
bottom:-1.5em;
left:0;
}

#portfolio img {
width:72px;
height:72px;
padding:3px;
background-color:#fff;
border:1px solid #d0c5c5;
}

#portfolio a:hover img {
border-color:#653f3f;
}

.flickr_badge_image {
padding:0 15px 13px 0;
float:left;
background:transparent url(/images/image_shadow.jpg) no-repeat right bottom;
}

#gallery {
padding:1.43em 0 0 20px;
overflow:hidden;
margin-bottom:.2em;
}

/* ============================================================================
LINK STYLES
=============================================================================== */
a:link,
a:visited {
color:#2080c3;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

#navigation a:link,
#navigation a:visited {
color:#767676;
}

#navigation a:hover {
color:#fff;
text-decoration:none;
}

h1 a:link,
h1 a:visited {
width:135px;
height:58px;
display:block;
text-indent:-9999em;
background:transparent url(/images/logo.png) no-repeat left top;
}

h1 a:hover {
background-position:left bottom;
cursor:pointer;
}

#footer a:link,
#footer a:visited {
color:#7ebad3;
}

#footer ul a:link,
#footer ul a:visited {
font:1.35em Helvetica, "Arial Narrow", Arial, sans-serif;
font-stretch:condensed;
text-transform:uppercase;
color:#fff;
float:left;
position:relative;
}

#footer ul a:hover {
text-decoration:none;
}

/* ============================================================================
RULE STYLES
=============================================================================== */
hr {
display:none;
}

/* ============================================================================
FORM STYLES
=============================================================================== */
#contactGroup p {
margin-bottom:1em;
}

#contactGroup legend {
padding-bottom:1em; /*Safari doesn't like margins*/
}

#contactGroup label,
#contactGroup .error {
display:block;
font:bold .79em Arial, Helvetica, sans-serif;
margin-bottom:.3em;
text-transform:uppercase;
}

#contactGroup .error {
color:red;
text-transform:none;
font-weight:normal;
}

#contactGroup input,
#contactGroup textarea {
font:normal 1.25em Arial, Helvetica, sans-serif;
padding:.1em 3px;
border:1px solid #c2a374;
background-color:#f5eee4;
color:#c2a374;
}

#contactGroup input:focus,
#contactGroup textarea:focus {
border:1px solid #675841;
background-color:#fff;
color:#675841;
}

#contactGroup input {
width:50%;
}

#contactGroup textarea {
width:75%;
height:4em;
}

#contactGroup button {
border:none;
background-color:#675841;
color:#fff;
font:1.07em Helvetica, "Arial Narrow", Arial, sans-serif;
font-stretch:condensed;
text-transform:uppercase;
padding:.4em 10px;
}

#contactGroup button:hover {
cursor:pointer;
background-color:#4b402f;
}

/* ============================================================================
TABLE STYLES
=============================================================================== */

/* ============================================================================
JQUERY EFFECTS STYLES
=============================================================================== */

/*UI Tabs*/

.ui-tabs {
position:relative;
}

.ui-tabs .ui-tabs-nav {
display:block;
position:relative;
margin:-66px 0 0 0 !important;
}

.ui-tabs .ui-tabs-nav li {
position: relative;
float: left;
border-bottom-width: 0 !important;
padding:0 !important;
}

.ui-tabs .ui-tabs-nav li a {
float: left;
display:block;
width:160px;
height:79px;
text-indent:-9999em;
}

#servicesTab a {
background:#727b4d url(/images/tab_services.gif) no-repeat left bottom;
}

#feedbackTab a {
background:#4f6f7d url(/images/tab_feedback.gif) no-repeat left bottom;
}

#contactTab a {
background:#7d6b4f url(/images/tab_contact.gif) no-repeat left bottom;
}

.ui-tabs .ui-tabs-nav li a:hover {
background-position:right top !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
border-bottom-width: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: default;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a:link,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a:visited,
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a:hover {
background-position:left top !important;
}

.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer;
}

/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */

.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
background: none;
clear:both;
padding:1.1em 20px 2.14em 180px;
}

.ui-tabs .ui-tabs-hide {
display: none !important;
}