/* -------------------------------------------------------------- 
  
   333 Media screen styles

-------------------------------------------------------------- */
/*
	font-sizes:
	.833em = 10px
	.917em = 11px
	1em = 12px *default after reset
	1.083em = 13px
	1.167em = 14px
	1.25em = 15px
	1.33em = 16px
	1.5em = 18px
	2em = 24px
*/
	
/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { background: #DA5C35; font-size: 75%; font-family: Arial, Helvetica, sans-serif; line-height: 1.5em; }
html>body { font-size: 12px; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
a { outline: none; }


/* =Layout
-------------------------------------------------------------- */

.wrapper { margin: 0 0 0 50px; width: 960px; position: relative; }
#primary { background: #fffbf5 url(../images/primary-bg.gif) repeat-x 0 0; position: relative; }
#secondary { background: #494a4c url(../images/secondary-bg.gif) repeat-x 0 0; }


/* =Typography
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-family: Georgia, serif; font-weight: normal; color: #DA5C35; font-style: italic; }

h1 { font-size: 1.7em; line-height: 1; margin-bottom: 1em; }
h2 { font-size: 1.5em; margin-bottom: 0.75em; }
h3 { font-size: 1.2em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; margin-bottom: 1.5em; }
h6 { font-size: 1em; }

p { margin: 0 0 1.5em; }

ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }

abbr, acronym { border-bottom: 1px dotted #000; }
address { margin-top: 1.5em; font-style: italic; }
del { color: #000; }

a { color: #009; text-decoration: none; }
a:hover { text-decoration: underline; }

blockquote { margin: 1.5em; }
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; } 
tt { display: block; margin: 1.5em 0; line-height: 1.5; }


/* =Branding
-------------------------------------------------------------- */

#branding { 
	float: right; 
	width: 310px;
	height: 310px;
	margin: 50px 0 30px 0;
	background: url(../images/333logo.gif) no-repeat 0 0;
}

/* =Contact
-------------------------------------------------------------- */

#contact {
	display: none;
	color: #F1B09C;
	background: #d9531d;
}
#contact .wrapper {
	padding: 35px 0;
}
#contact a {
	color: #F1B09C;
	text-decoration: none;
	border-bottom: 1px dashed #F1B09C;
}
#contact a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dashed #F1B09C;
}

#contact div.col {
	float: left;
	width: 170px;
	margin: 0 20px 0 0;
	border-left: 4px solid #ef7746;
}
#contact div.col p {
	margin: 0;
	padding-left: 24px;
}
#contact-link {
	position: absolute;
	top: 0;
	right: 50px;
	width: 130px;
	padding: 3px 21px 3px 0;
	text-align: right;
	background: url(../images/contact-tab.gif) no-repeat bottom right;
}
#contact-link a {
	padding: 3px 20px 3px 0;
	font-family: Georgia, serif;
	font-size: 14px;
	font-style: italic;
	color: #F5E0DA;
	text-decoration: none;
	background: url(../images/tablink-bg.gif) no-repeat center right;
}
#contact-link a:hover {
	color: #fff;
	text-decoration: none;
	background: url(../images/tablink-bg-on.gif) no-repeat center right;
}


/* =Content
-------------------------------------------------------------- */

#content { 
	float: left; 
	width: 600px; 
	padding: 80px 0 50px 0; 
	color: #505153; 
	font-family: georgia, serif;
}

/* home */
body.home #content  {
	padding-top: 120px;
}
#content span.fin {
	padding-right: 50px;
	background: transparent url(../images/333dots.gif) no-repeat top right;
}


/* Portfolio */
ul.thumbs {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.thumbs li {
	float: left;
	width: 180px;
	margin: 0 20px 20px 0;
	padding: 0;
}
ul.plain {
	margin-top: 25px;
}
ul.thumbs a {
	color: #505153;
	text-decoration: none;
}
ul.thumbs a:hover {
	color: #DA5C35;
}
ul.thumbs a:hover span.title { 
	color: #505153; 
	text-decoration: none; 
}
ul.thumbs a img { /* thumb images must be 149w x 91px */
	padding: 12px 14px 17px 12px;
	background: url(../images/thumb-bg.gif) no-repeat top left;
}
ul.thumbs span {
	display: block;
	line-height: 1.2em;
	padding: 0 0 0 40px;
}
ul.thumbs span.title {
	font-style: italic;
	padding: 0;
}
ul.thumbs .video { background: url(../images/icn-video.gif) no-repeat 8px 0; }
ul.thumbs .audio { background: url(../images/icn-audio.gif) no-repeat 8px 0; }
ul.thumbs .print { background: url(../images/icn-print.gif) no-repeat 8px 0; }

/* image carousel */

#carousel {
	position: relative;
	overflow: hidden;
	width: 580px; height: 116px;
	margin: 0 0 20px;
	background: #f3e4d1;
}
#carousel_frame { 
	position: relative; 
}
a#carousel_previous {
    position: absolute;
    top: 0; left: 0; 
    display: block;
    width: 22px; height: 120px;
    border-right: 1px solid #e6ceae;
    text-indent: -9999px;
    background: #e6ceae url(../images/carousel-prev.gif) no-repeat 0 0;
}
a#carousel_next {
    position: absolute;
    top: 0; right: 0; 
    display: block;
    width: 22px; height: 120px;
    border-left: 1px solid #e6ceae;
    text-indent: -9999px;
    background: #e6ceae url(../images/carousel-next.gif) no-repeat 0 0;
}
a:hover#carousel_previous, a:hover#carousel_next {
    background-position: 0 -116px;
}
#carousel_content {
	position: absolute;
	top: 0;
	margin-left: 26px;
}
#carousel_content
#carousel_content li {
	list-style: none;
	margin: 0; padding: 0;
}
#carousel_content {
	width: 9342px;
}
#carousel ul li {
	display: block;
	float: left;
	margin: 12px 3px 5px 2px; padding: 5px;
	border-right: 1px solid #cfaa7a; border-bottom: 1px solid #cfaa7a;
	background-color: #fffbf5;
}
#carousel ul li img {
	display: block;
}


/* =Navigation
-------------------------------------------------------------- */

ul#nav, ul#subnav {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul#nav li, ul#subnav li {
	float: left;
	margin: 0 20px 0 0;
	padding: 0;
	background: none;
}
ul#nav li a, ul#subnav li a {
	float: left;
	display: block;
	font-family: georgia, serif;
	font-size: 1.167em;
	font-style: italic;
	color: #959595;
	text-decoration: none;
	padding: 15px 0 0;
}
ul#nav li a:hover {
	color: #fff;
}
ul#nav li a.active {
	color: #fff;
	background: url(../images/nav-on.gif) no-repeat top center;
}
/* subnav */
ul#subnav {
	border-bottom: 1px solid #eddcc2;
	margin: 35px 0 15px 0;
}
ul#subnav li a {
	color: #5f6062;
	padding: 0 0 10px;
}
ul#subnav li a:hover {
	color: #DA5C35;
}
ul#subnav li a.active {
	color: #DA5C35;
	background: url(../images/subnav-on.gif) no-repeat bottom center;
}


/* =Quote of the day
-------------------------------------------------------------- */

#quote {
	width: 400px;
	margin: 35px 0 35px 0;
	padding: 0 0 71px 0;
	background: transparent url(../images/quote-bot.gif) no-repeat bottom left;
}
#quote blockquote {
	margin: 0;
	padding: 28px 15px 0 15px;
	background: #7a7b7d url(../images/quote-top.gif) no-repeat top left;
}
#quote blockquote p, #quote blockquote cite {
	font-family: Georgia, serif;
	margin: 0;
	font-size: 18px;
	font-style: italic;
	line-height: 1.2em;
	color: #494a4c;
}
#quote blockquote cite {
	font-size: 13px;
	padding-left: 3em;
}


/* =Footer
-------------------------------------------------------------- */

#footer { 
	background: #DA5C35 url(../images/footer-bg.gif) repeat-x top left;  
	color: #F1B09C;
	font-family: arial, verdana, sans-serif;
	font-size: .9em;
	line-height: 1.2em;
	padding-top: 15px;
	position: relative;
}

#styling-link {
	position: absolute;
	top: 13px; right: 71px;
}

#styling-link a {
	padding: 3px 20px 3px 0;
	font-family: Georgia, serif;
	font-size: 14px;
	font-style: italic;
	color: #F5E0DA;
	text-decoration: none;
	background: url(../images/tablink-grey.gif) no-repeat center right;
}
#styling-link a:hover {
	color: #fff;
	text-decoration: none;
	background: url(../images/tablink-grey-on.gif) no-repeat center right;
}

/* Tables
-------------------------------------------------------------- */

table { margin-bottom: 1.4em; }
th { border-bottom: 2px solid #eddcc2; font-weight: bold; }
td { border-bottom: 1px solid #eddcc2; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #ffc; }

table.styling-rates { width: 80%; border-top: 1px solid #eddcc2; }


/* =Misc
-------------------------------------------------------------- */

.hide { display: none; }
.highlight { background: #ffc; }

.quiet { font-size: .9em; color: #a19e99; }

/* Clearing floats without extra markup  */
.wrapper, ul#nav, ul#subnav { display: inline-block; }
.wrapper:after, ul#nav:after, ul#subnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .wrapper, * html ul#nav, * html ul#subnav { height: 1%; }
.wrapper, ul#nav, ul#subnav { display: block; }