/*
 * 
 *      Styles for Ideas On Purpose 
 *      Authored by Joe Maller
 *      December 2009
 * 
 * 
 *      Base colors:
 *          brown:      #3e1f17
 *          light text brown: #cab393
 *          orange:     #fd5500
 *          light gray: #7e7e7e
 * 
 */



/*	Reset everything to defaults, compacted from http://developer.yahoo.com/yui/reset	*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}



html { background: #fff; }
body { color: #7e7e7e; font-size: 12px; line-height: 16px; font-family: helvetica, arial, sans-serif; }

a:focus { outline: none; }
body a { color: #444; text-decoration: none; }
body a:hover { color: #7e7e7e; }
body a:active { color: #fd5500; }

#header { width: 940px; height: 170px; top: 0; left: 20px; z-index: 5000; background: #fff; position: absolute; }
#masthead { background: transparent url('/images/masthead.png') no-repeat top left; height: 100px; width: 580px; }
#logo { position: absolute; right: 0; width: 70px; height: 50px; margin-top: 15px; text-indent:-5000px;}
#logo a { display: block; width: 100%; height: 100%; background: transparent url('/images/masthead-logo.png') repeat scroll; }
#header h1, #header h2 { text-indent: -5000px; }
#sectiontitle { font-size: 42px; font-weight: bold; color: #e5e5e5; position: absolute; right: 0; bottom: 20px; }
#sectiontopper { text-align: right; width: 720px; position: absolute; bottom: 0; margin-left: 220px; border-bottom: 10px solid #555; }
#sidebar { top: 150px; left: 0; width: 200px; margin-left: 20px; padding-top: 5px; z-index: 5000; position: absolute; }
#nav { padding: 0 0 45px 0; line-height: 20px; }
#subnav { padding: 0 30px 0 0; font-size: 11px; }


#masthead h1 a { display: block; width: 185px; height: 45px; top: 0; position: absolute; }
#print-masthead { display: none;}

.active { color: #fd5500; }

#sidebar { color: #444; }
#sidebar a { color: #7e7e7e; }
#sidebar a:hover { color: #444; }

#content { width: 720px; margin-left: 240px; position: relative; margin-top: 170px; }

#footer { position: relative; font-size: 11px; clear:both; margin: 30px 0; text-transform: lowercase; width: 940px; }
#footer .copyright { width: 940px; float: left; position: relative; margin: 0 20px; border-top: 1px solid #bbb; padding: 7px 0 5px 0; }
#footer .social { width: 300px; float: right;}
#footer .social a { margin-left: 5px; float: right; width: 14px; height: 14px; text-indent: -5000px;}
#footer .social a.twitter { background: transparent url('/images/social_icons.png') no-repeat scroll 0 0; }
#footer .social a.twitter:hover { background: transparent url('/images/social_icons.png') no-repeat scroll 0 -24px; }
#footer .social a.facebook { background: transparent url('/images/social_icons.png') no-repeat scroll 0 -48px; }
#footer .social a.facebook:hover { background: transparent url('/images/social_icons.png') no-repeat scroll 0 -72px; }

#nav li { color: #7e7e7e; font-size: 17px; }			
#nav li a:hover { color: #3e1f17; }
#nav li.active a { color: #fd5500; }

#subnav .item, #subnav .news { border-bottom: 1px solid #bbb; padding: 7px 0; line-height: 14px;  }
#subnav .item.active p a { color: #3e1f17; }
#subnav .item.last, #subnav .news.last { border: none; }
#subnav ul { margin-bottom: 7px; }
#subnav li { padding: 7px 15px 0 15px; color: #7e7e7e; }
#subnav li.active { color: #3e1f17; }
#subnav li.active a { color: #3e1f17;}
#subnav em { font-style: italic; }
#subnav .news { color: #7e7e7e; font-size: 0.9em; line-height: 14px; }
#subnav .news a { color: #444; }
#subnav .news a:hover { color: #7e7e7e; }
#subnav .news .date { color: #3e1f17; }



#content .block { overflow: auto; border-bottom: 1px solid #bbb; padding-bottom: 20px; }
#content .block:last-child { border-width: 0;}  /*    fixed in ie.js  */

#content .workset { height: 420px; width: 100%; position: relative; overflow: hidden; margin: 10px 0 10px 0; background: #ececec url('/images/stripes.png') repeat scroll 0 0;}
#content .workset .item { height: 420px; margin: 0 auto; width: 720px; text-align: center;}
#content .workset .item img { height: 100%; }
#content .workset ul { height: 420px; padding: 0; width: 15000px; display: block; white-space: nowrap; vertical-align: middle; position: relative;}
#content .workset li { position: relative; display: block; float: left;}

#content .workset .prev,
#content .workset .next { width: 40%; height: 100%; display: block; position: absolute; top:0; outline: none;}
#content .workset .prev a,
#content .workset .next a { display: block; position: absolute; top: 165px; height: 90px; width: 90px; opacity: 1; background: transparent url('/images/workset_bigarrow.png') no-repeat scroll -90px 0; outline: none;}
#content .workset .bg { position: absolute; height: 90px; width: 90px; top: 165px; background: #555; opacity: 0.4;outline: none; }

#content .workset .next, 
#content .workset .next a,
#content .workset .next .bg { right: 0; }	

#content .workset .prev, 
#content .workset .prev a,
#content .workset .prev .bg { left: 0; }	

#content .workset .prev a { background-position: 0 0;}

/*#content .workset div.prev, #content .workset div.next { background: #3e1f17; }*/
/*#content .workset div.prev div, #content .workset div.next div { height: 300px; width: 200px; background: blue; }*/
#content .workset .prev.hidden, #content .workset .next.hidden  {display: none;}

#content .workset .count1 {width: 720px}
#content .workset .count2 {width: 1440px}
#content .workset .count3 {width: 2160px}
#content .workset .count4 {width: 2880px}
#content .workset .count5 {width: 3600px}
#content .workset .count6 {width: 4320px}
#content .workset .count7 {width: 5040px}
#content .workset .count8 {width: 5760px}
#content .workset .count9 {width: 6480px}
#content .workset .count10 {width: 7200px}
#content .workset .count11 {width: 7920px}

	
#content .worksetcontrols { height: 13px; margin: 0 0 10px; }
#content .worksetcontrols a { display: block; width: 30px; text-indent: -5000px; height: 13px; float: left; background-repeat: no-repeat;  }
#content .worksetcontrols .status, 
#content .worksetcontrols .caption { font-size: 11px; display: block; float: left; margin: 0 1em; height: 13px; text-transform: lowercase; }
#content .worksetcontrols .caption { float: right; margin: 0; }
#content .worksetcontrols a.prev { background: #fd5500 url('/images/workset_controls.png') no-repeat scroll 0 0; margin: 0 1px; }
#content .worksetcontrols a.next { background: #fd5500 url('/images/workset_controls.png') no-repeat scroll -30px 0; }

#content .worksetcontrols a:active { background-color: #D03500; }
#content .worksetcontrols a.prev:active { background-position: -1px 0; }
#content .worksetcontrols a.next:active { background-position: -29px 0; }
#content .worksetcontrols a.prev.hidden:active { background-position: 0 0; background-color: #fd5500}
#content .worksetcontrols a.next.hidden:active { background-position: -30px 0;background-color: #fd5500 }



#content .worksetcontrols .hidden { opacity: 0.5;}

#content h1 { padding: 0 0 10px 0; margin: 46px 0 27px 0; line-height: 20px; border-bottom: 2px solid #7c7c7c; font-size: 16px; white-space: nowrap; }
#content h1 strong { color: #3e1f17; font-weight: bold; margin-right: 20px; }
#content h2,
#content h3 { color: #3e1f17; font-size: 14px; margin: 1em 0 0.5em; }
#content h3 { margin-bottom: 0; }
#content h4 { font-weight: bold; }

#content .headings { margin: 25px 0 25px 0; }
#content .headings h2 { color: #7e7e7e; margin: 0; }
#content .headings h2 strong { color: #3e1f17; }

#content em, #content i { font-style: italic; font-weight: inherit; }
#content strong, #content b { font-weight: bold; }

#content p { margin-bottom: 0.5em;  line-height: 16px; }
#content p img { margin: 2em 0 0 0; max-width: 720px; }

#content blockquote { color: #cab393; font-size: 20px; margin: 0 0 32px 0; line-height: 24px; width: 75%; }
#content blockquote.projectintro { margin: 0 0 5px 0; }
#content blockquote p {line-height: 1.2em;}
#content blockquote a { color: #cab393;}
#content blockquote a:hover { color: #AF9474;}
#content blockquote sup { font-size: 13px; letter-spacing: -0.25em; line-height: 12px;  }
#about blockquote { margin-top: 43px;}
#content dl dt {  }
#content dl { margin: 0 0 1em 0; }
#content ol { margin: 0 1.5em;}
#content ol li { list-style-type: decimal; display: list-item; margin-bottom: 0.5em; line-height: 16px; }

#content .block .columns { padding-bottom: 36px; }
#content .block .columns .column { width: 345px; float: left; padding-bottom: 36px; }
#content .block .columns .column:first-child { margin-right: 30px;}
#content .block:last-child .columns { padding-bottom: 0; }  /*    fixed in ie.js  */
#content .firstcolumn { width: 345px; margin: 0 30px 0 0; float: left; }
#content .secondcolumn { width: 345px; margin: 0; float: left; }

#content .block .widecolumn { width: 470px; margin-right: 30px; }
#content .block .sidebar { width: 220px; float: right; }
#content .block .sidebar { font-size: 90%; }
#content .block .sidebar ul { margin: 0 1.25em; }
#content .block .sidebar ul li { display: list-item; list-style-type: square; }
#content .block .sidebar h3 { font-size: 11px; font-weight: bold; }

#content .firstcolumn h2,
#content .secondcolumn h2 { margin-top: 1em; }
#content .firstcolumn h2:first-child,
#content .firstcolumn h3:first-child,
#content .secondcolumn h2:first-child,
#content .secondcolumn h3:first-child,
#content .sidebar h2:first-child,
#content .sidebar h3:first-child,
#content .widecolumn h2:first-child,
#content .widecolumn h3:first-child { margin-top: 0; }    /* first-child fixed in ie.js */

#content .firstcolumn blockquote,
#content .secondcolumn blockquote { margin-top: 0; }
#content .firstcolumn h2.date,
#content .secondcolumn h2.date { margin-top: 2em; }

#content .slides { position: absolute; top: 0; display: none; }    /*    20px matches .block padding     */
#content .slides h1, #content .buffer h1 { margin-bottom: 0; background: #fff;}
#content .slides a,
#content .buffer div { width: 720px; height: 376px; display: block;  margin: 10px 0 10px 0; }
#content .slides a img { width: 100%; height: auto; }

#map_canvas { width: 330px; height: 354px; float: right; }


#print-map {display: none;}