@import 'reset.css';

/*

==================================================
               tonydewan.com v 3.0
__________________________________________________

*/

/*-------   Globals  --------*/

body {
	background: #f3f3f3 url('images/bg.jpg') top left repeat-x;
	font: 1.0em/1.2 Baskerville, "Baskerville Old Face", "Times New Roman", Times, serif;
	color: #000;}

#container {
	margin: 0 auto;
	background: #fff;}

a{
	color: #51576f;}

a:hover {
	color: #5785BF;}


#content p{
	font-size: 0.875em;
	line-height: 1.7;
	margin-bottom: 1em;}


abbr, acronym{
	border-bottom: 1px dotted;
	cursor: help;}

em{
	font-style:italic;}

sup{
	vertical-align: top;}

strong{
	font-weight: bold;}

ul.list{
	margin: 0 0 1em 0;}

ol.list{
	margin: 0 0 0 1em;
	padding: 0 0 0 1em;
	list-style-type: decimal;}

ol.list li{
	margin: 0 0 1em 0;}

/*-----------------  
  >> Header  
-------------------*/

#header{
	width: 60em;
	margin: 0 auto;}

h1 {
	background: #51576f;
	float: left;
	font-size: 1.5em;
	font-family: "DIN", Helvetica, Arial, sans-serif;
	
	box-shadow: 2px 2px 10px #ddd;
	-moz-box-shadow: 2px 2px 10px #ddd;
	-webkit-box-shadow: 2px 2px 10px #ddd;}

h1 > a{
	display: block;
	color: #fff;
	text-decoration: none;
	margin: 1em 0.75em 0.15em 0.75em;}

h1 a:hover{
	color: #a4a9bc;}

#header{}


/*-----------------  
  >> Header >> Nav  
-------------------*/

#nav{
	float: right;
	width: 25em;
	margin: 2em 0 0;}

#nav li a{
	display: block;
	float: left;
	text-indent: -999em;
	width: 100px;}

/*--- about actions ---*/

ul#nav li.about a{
	background: transparent url('images/nav.gif') 6px -91px no-repeat;}

ul#nav li.about a:hover, ul#nav li.about.active a:hover{
	background: transparent url('images/nav.gif') 6px -34px no-repeat;	}

ul#nav li.about.active a{
	background: transparent url('images/nav.gif') 6px -160px no-repeat;	}


/*--- work actions ---*/

ul#nav li.work a{
	background: transparent url('images/nav.gif') -110px -91px no-repeat;}

ul#nav li.work a:hover, ul#nav li.work.active a:hover{
	background: transparent url('images/nav.gif') -110px -34px no-repeat;	}

ul#nav li.work.active a{
	background: transparent url('images/nav.gif') -110px -160px no-repeat;	}



/*--- contact button actions ---*/

ul#nav li.contact a{
	background: transparent url('images/nav.gif') -228px -91px no-repeat;}

ul#nav li.contact a:hover, ul#nav li.contact.active a:hover{
	background: transparent url('images/nav.gif') -228px -34px no-repeat;	}

ul#nav li.contact.active a{
	background: transparent url('images/nav.gif') -228px -160px no-repeat;	}


/*--- articles button actions ---*/

ul#nav li.articles a{
	background: transparent url('images/nav.gif') -340px -91px no-repeat;}

ul#nav li.articles a:hover, ul#nav li.articles.active a:hover{
	background: transparent url('images/nav.gif') -340px -34px no-repeat;	}

ul#nav li.articles.active a{
	background: transparent url('images/nav.gif') -340px -160px no-repeat;	}



/*-----------------  
  >> content  
-------------------*/


#content{
	clear: both;
	width: 52.5em;
	margin: 0 auto;
	overflow: auto;}

p#intro{
	margin: 4em 0;
	color: #585757;
	line-height: 1.5;
	font-size: 1em;}

p#intro span{
	display: block;
	font-size: 1.8125em;
	line-height: 1.5;
	color: #171717;}

h3{
	border-bottom: 1px solid #8a8888;
	color: #51576f;
	font: bold 1em/1.5 "DIN", Helvetica, Aria, sans-serif;
	text-transform: uppercase;
	margin-bottom: 0.25em;}


span.workrole{
	color: #ec6400;
	font-size: 1.125em;
	font-style: italic;
	float: left;}

span.workdate{
	text-transform: uppercase;
	font-size: 0.6875em;
	line-height: 1.75;
	float: right;
	color: #000;}

#content .list{
	font-size:0.875em;}

/*-----------------  
  home >> content  
-------------------*/

#home .cta{
	float: left;
	width: 24.5625em;
	margin-right: 3.35em;}

#home #cta2{
	margin: 0;}

#home .cta h4{
	font-size: 1.25em;
	line-height: 1.5;
	float: left;}

#home .cta .workrole{
	float: right;
	text-align: right;}

#home .cta .workdate{
	line-height: 3;}

#recentArticles li a{
	display: block;
	font-size: 1.125em;
	color: #252525;
	text-decoration: none;
	border-bottom: 1px solid #ddd;
	padding: 0.5em 0;}

#recentArticles li a:hover{
	opacity: 0.7;}

#recentArticles li a span{
	display: block;
	font-size: 0.675em;
	font-style: italic;}

#recentArticles li:last-child a{
	border: none;}

#home h3{
	color: #8a8888;
	font-size: 0.75em;}

/*-----------------  
  work >> content  
-------------------*/

#work #content{
	width: 100%;
	margin: 0;}

#work p#intro{
	width: 52.5em;
	margin: 3em auto;}

#work #pieces, #work #piece{
	background: #f3f3f3 url('images/btm.shadow.jpg') top center no-repeat;}

#work #pieces .piece, #work #piece .piece{
	width: 60em;
	margin: 0 auto;
	padding: 2em 0;
	clear: both;}

#work #footer{
	background-image: none;
	margin: 0 0 2em 0;
	padding: 3em 0 0;}

#work h4{
	font-size: 1.5625em;}

#work .desc{
	clear: both;
	overflow: auto;}

#work p.summary{
	font-size:0.875em;
	padding: 1em;
	width: 55em;
	float: left;}

a.more{
	width: 10em;
	height: 4em;
	line-height: 4em;
	display: block;
	float: right;
	text-decoration: none;
	text-transform: uppercase;}

div.img{
	width: 961px;
	height: 314px;
	clear: both;}

div.img span{
	display: block;
	width: 961px;
	height: 314px;
	position: absolute;
	background: transparent url('images/work.main.frame.gif') top left no-repeat;
	z-index: 20;}

div.img img{
	position: absolute;
	z-index: 10;
	margin: 15px;}

/*----------------------------------
  work >> work detail >> content  
------------------------------------*/

dl.facts{
	margin: 2em 0.25em 0.25em 0.25em;
	width: 24em;
	float: right;}

dl.facts dt{
	float: left;
	width: 6em;
	font-family: "DIN", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	text-align: right;
	padding: 0.75em 1.5em 1.5em 0;
	clear: both;
	font-size: 0.875em;}

dl.facts dt span{
	display: block;
	font-size: 0.6875em;
	font-weight: normal;
	text-transform: none;}

dl.facts dd{
	padding: 0.5em 1.5em 1.5em 0;
	border-bottom: 1px solid #8A8888;}

dl.facts dd:last-child{
	border-bottom: none;}

dl.facts dd ul li{
	float: left;
	padding: 0 0.1em;}

div.detail{}

div.summary{
	margin: 2em 26em 0 0;
	background: #fbfbfb;}

#content div.summary p{
	font-size: 1.2em;
	font-style: italic;
	padding: 1em;}

div.detail{
	width: 33em;
	float: left;
	margin: 2em 1em 0 0;}

div.media{
	float: right;
	width: 25em;
	margin: 2em 0 0 0;}

#work #piece .piece{}

div.clear{
	clear: both;}

#content div.media p.caption{
	font-size: 0.75em;
	color: #333;
	margin: 0 0 2em 0;}

/*-----------------  
  about >> content  
-------------------*/

#about #primary, #about #secondary{
	width: 24.5625em;
	float: left;}

#about #primary{
margin-right: 3.35em;}

#about h3{
	margin-top: 2em;}

#about p{
	clear: both;}

dl#skills{
	overflow: auto;
	padding-bottom: 0.1em;}

dl#skills dt{
	float: left;
	width: 6em;
	height: 2em;
	font-family: "DIN", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	text-align: right;
	padding: 0.2em 1.5em 2em 0.25em;
	clear: both;
	font-size: 0.875em;}

dl#skills dt span{
	display: block;
	font-size: 0.6875em;
	font-weight: normal;
	text-transform: none;}

dl#skills dd{
	width: 24em;}

dl#skills dd ul li{
	float: left;
	padding: 0 0.1em;}

#about #status{
	background: #f3f3f3;
	overflow: auto;
	padding: 0.5em;
	margin: 1em 0 0 0;}

#about #status div span{
	float: left;
	width: 21.5em;
	margin: 1em 0;
	clear: none;
	text-align: center;}

#about #status div .quote{
	font-size: 2em;
	width: 0.5em;
	margin: 0;}

#about div.geo{
	font-size: 0.875em;
	line-height: 1.5;}

#about #location img{
	border: 1px solid #848484;}

#about #links{
	background: #f3f3f3;
	overflow: auto;}

#about #links .link{
	clear: both;
	padding: 0.75em 0.5em;}

#about #links .link img{
	float: left;
	width: 100px;
	height: 75px;
	padding: 0 0.5em 0.5em 0;}

#about #links .link .saved, #about #links .link .tags{
	display: block;
	font-size: 0.875em;
	font-style: italic;}
	
#about #links .link .tag{
	background: #ddd;}

#about #links .link a{
	color: #000;
	text-decoration: none;}

#about #links .link a:hover{
	opacity: 0.5;}

#about #links .link .rating{
	text-indent: -999em;
	display: block;
	float: left;
	width: 73px;
	height: 11px;
	background: transparent url('images/ratings.gif') 0 -55px no-repeat;}

#about #links .link .rating_5{background-position: 0 0px; }
#about #links .link .rating_4{background-position: 0 -11px; }
#about #links .link .rating_3{background-position: 0 -22px; }
#about #links .link .rating_2{background-position: 0 -33px; }
#about #links .link .rating_1{background-position: 0 -44px; }

#about #photos{
	background: #f3f3f3;
	padding: 0.5em 1em;}

#about #photos a{
	margin: 0 1em 0 0;}

#about #photos a:hover{
	opacity: 0.7;}

#about span.source{
	font: 0.75em/1.75 "Helvetica Neue", Helvetica, Arial, sans-serif;
	display: block;
	text-align: right;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 4em 0;}

#about span.source a{
	text-decoration: none;}

/*------------------------- 
  articles >> content  
--------------------------*/

#articlesList{
	float: left;
	width: 25em;}

#articles h3{
	color:#8A8888;
	font-size:0.75em;}


#articles .article{
	padding: 1em 0;
	margin: 0 2.25em 0 0;
	width: 25em;
	float: left;}


#articlesList .article{
	border-bottom: 1px solid #AAA;
	margin-bottom: 1em;
	padding-bottom: 2em;}

#articlesList .article:last-child{
	border: none;}

#articles #categories, #articles #dates{
	float: left;
	width: 12.5em;
	margin: 0 0 0 1.25em;}

#articles #categories li a, #articles #dates li a{
	text-decoration: none;
	font-size: 0.9em;
	line-height: 1.6;
	margin: 0 1em;
	display: block;
	clear: both;
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #fff;
	overflow: auto;
	cursor: pointer;
	cursor: hand;}

#articles #categories li a:hover, #articles #dates li a:hover, #articles #categories li.active a, #articles #dates li.active a{
	color: #5795D6;
	border-top: 1px dotted #8A8888;
	border-bottom: 1px dotted #8A8888;}

#articles #categories li a span, #articles #dates li a span{
	float: left;}

#articles #categories li a span:last-child, #articles #dates li a span:last-child{
	float: right;
	color: #8A8888;}

#articles .article h4 a{
	font-size: 1.6em;
	color: #51576F;
	text-decoration: none;}

#articles .article h4 a:hover{
	color: #EC6400;}

#articles .article p.desc{
	margin-bottom: 0;}

#articles #articlesList .article img{
	border: 1px solid #AAA;}

#articles .article .postdata{
	font-size: 0.8em;
	color: #EC6400;}

#articles .article .postdata span{
	float: right;}

#articles .article .postdata span.date{
	float: left;}

#articles .article .postdata a{
	color: #EC6400;}


.article #intro{
	color:#585757;
	font-size:1em;
	line-height:1.5;
	margin:4em 0 2em 0;}

.article #intro span{
	color:#171717;
	display:block;
	font-size:1.8125em;
	line-height:1.5;}

span.postdate{
	display: block;
	margin: 1em 0 0;
	padding: 0.25em;
	font-size: 0.8em;
	color: #EC6400;}

#articles div.summary{
	margin: 0;
	background: #f3f3f3;}

#articles div.summary p{
	font-size: 0.9em;
	margin: 0;}

#comments dd img{
	float: right;}

#comments dt{
	float: left;}

#comments dd{
	clear: both;}


/*------------------------- 
  contact >> content  
--------------------------*/

#contact #primary{
	width: 19.5625em;
	margin: 0 3.35em 2em 0;
	float: left;}

#contact #primary p{
	margin-bottom: 0;}

#contact h3{
	margin-top: 3em;}

#contact h3:first-child{
	margin-top: 0;}

#contact #primary ul li{
	padding: 0.15em 0.5em;}

#contact #secondary{
	width: 29.5625em;
	float: left;}

label span.error{
	text-align: right;
	color: #EC6400;}

a.badge{
	padding-left: 20px;}

a.twitter{background: transparent url('images/badge.twitter.gif') left center no-repeat;}
a.facebook{background: transparent url('images/badge.facebook.gif') left center no-repeat;}
a.linkedin{background: transparent url('images/badge.linkedin.gif') left center no-repeat;}
a.magnolia{background: transparent url('images/badge.magnolia.gif') left center no-repeat;}
a.flickr{background: transparent url('images/badge.flickr.gif') left center no-repeat;}
a.delicious{background: transparent url('images/badge.delicious.gif') left center no-repeat;}


/*------------------------ 
 contact >> vcard
------------------------*/

.vcard {
	background: #f6faec url("images/icon.mf2.gif") 220px 65px no-repeat;
	overflow: auto;
	font-size: 1.0em;
	padding: 0.5em;}

.vcard .hcard{
	background: white url("images/icon.mf.gif") 0 0 no-repeat;
	font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0 0 0 20px;
	font-size: 0.75em;}


.vcard .photo{
	width: 75px;
	padding: 0.25em;
	float: left;}

.vcard .email{
	display: none;}

/*------------------------ 
 contact >> form
------------------------*/

#contact form{
	margin-top: 1.0em;}

legend{
	display: none;}

label{
	display: block;
	font-size: 0.9em;
	text-transform: uppercase;}

label span{
	font-size: 0.9em;
	font-style: italic;
	color: #aaa;
	text-transform: none;}

fieldset input, fieldset textarea{
	font: 0.875em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 98%;
	border: 1px solid #ccc;
	margin-bottom: 1.25em;}

fieldset input{
	height: 1.7em;}

fieldset input:focus, fieldset textarea:focus{
	border: 1px solid #EC6400;}


/*-----------------  
  >> Footer 
-------------------*/


#footer{
	background: #f3f3f3 url('images/btm.shadow.jpg') top center no-repeat;
	color: #252525;
	padding: 1em 0 0;
	margin: 2em 0 2em 0;
	font-family: "Hevetica Neue", Helvetica, Arial, sans-serif;}

#footer a{
	color: #252525;
	text-decoration: none;
	text-transform: uppercase;}

#footer a:hover{
	color: #ec6400;}

#footercont{
	width: 60em;
	margin: 0 auto;}

p.copy, ul#footerNav, #footer a.rss{
	font-size: 0.6875em;}

p.copy, ul#footerNav{
	float: left;
	margin-right: 0.5em;}

#footer p.copy a{
	text-transform: none;}

ul#footerNav li{
	display: inline;
	margin: 0 0.25em 0 0;
	padding: 0 0 0 0.5em;
	border-left: 1px #252525 solid;}


#footer a.rss{
	float: right;}

a.rss img{
	margin:0 0.2em -0.2em 0;}



/*-----------------  
 Aural Styling  
-------------------*/

acronym {
	speak : normal;}

abbr.initialism {
	speak : spell-out;}

abbr.truncation {
	speak : normal;}