/* 
--------------------------------------------------------------
Screen Styles
Milwaukee Art Museum | mam.org
Jan Livens: Out of Rembrandt's Shadow

* Modified version of
Blueprint CSS Framework 0.7.1
http://blueprintcss.googlecode.com
-------------------------------------------------------------- */

@import url("thickbox.css");
@import url("gallery.css");

/* 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-style:inherit; font-weight: inherit; font-size:100%; font-family:inherit;
vertical-align:baseline;}

body {line-height:1.5;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}


/* Text
-------------------------------------------------------------- */
body {
background:#FFF;
font-size:75%; 
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
color:#222;}

h1, h2, h3, h4, h5, h6 {font-weight:normal; color:#111;}
h1 {font-size:3em; line-height:1; margin-bottom:0.5em;}
h2 {font-size:2em; margin-bottom:0.75em;}
h3 {font-size:1.5em; line-height:1; margin-bottom:1em;}
h4 {font-size:1.2em; line-height:1.25; margin-bottom:1.25em; height:1.25em;}
h5 {font-size:1em; font-weight:bold; margin-bottom:1.5em;}
h6 {font-size:1em; font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

p {margin:0 0 1.5em;}
p img {float:left; margin:1.5em 1.5em 1.5em 0; padding:0;}
p img.right {float:right; margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}

blockquote {margin:1.5em; color:#666; font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em; font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0; white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace; line-height:1.5;}

li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}


/* Tables
-------------------------------------------------------------- */
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;background:#C3D9FF;}
th, td {padding:4px 10px 4px 5px;}
tr.even td {background:#E5ECF9;}
tfoot {font-style:italic;}
caption {background:#eee;}


/* Modifiers
-------------------------------------------------------------- */
.small {font-size:.8em; margin-bottom:1.875em; line-height:1.875em;}
.large {font-size:1.2em; line-height:2.5em; margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060; color:#fff;}
.removed {background:#900; color:#fff;}
.first {margin-left:0; padding-left:0;}
.last {margin-right:0; padding-right:0;}
.top {margin-top:0; padding-top:0;}
.bottom {margin-bottom:0; padding-bottom:0;}


/* Grid
-------------------------------------------------------------- */
.container {margin:0 auto; width:950px;}
.showgrid {background:url(src/grid_30x.gif);}

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, 
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, 
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, 
div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, 
div.span-21, div.span-22, div.span-23, div.span-24 {
float:left;
margin-right:10px;}

/* The last column in a row needs this class. */
div.last {margin-right:0;}

.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px; margin:0;}

/* Add these to a column to append empty cols. */
.append-1  {padding-right:40px;}  
.append-2  {padding-right:80px;} 
.append-3  {padding-right:120px;} 
.append-4  {padding-right:160px;} 
.append-5  {padding-right:200px;} 
.append-6  {padding-right:240px;} 
.append-7  {padding-right:280px;} 
.append-8  {padding-right:320px;} 
.append-9  {padding-right:360px;} 
.append-10 {padding-right:400px;} 
.append-11 {padding-right:440px;} 
.append-12 {padding-right:480px;} 
.append-13 {padding-right:520px;} 
.append-14 {padding-right:560px;} 
.append-15 {padding-right:600px;} 
.append-16 {padding-right:640px;} 
.append-17 {padding-right:680px;} 
.append-18 {padding-right:720px;} 
.append-19 {padding-right:760px;} 
.append-20 {padding-right:800px;} 
.append-21 {padding-right:840px;} 
.append-22 {padding-right:880px;} 
.append-23 {padding-right:920px;} 

/* Add these to a column to prepend empty cols. */
.prepend-1  {padding-left:40px;}  
.prepend-2  {padding-left:80px;} 
.prepend-3  {padding-left:120px;} 
.prepend-4  {padding-left:160px;} 
.prepend-5  {padding-left:200px;} 
.prepend-6  {padding-left:240px;} 
.prepend-7  {padding-left:280px;} 
.prepend-8  {padding-left:320px;} 
.prepend-9  {padding-left:360px;} 
.prepend-10 {padding-left:400px;} 
.prepend-11 {padding-left:440px;} 
.prepend-12 {padding-left:480px;} 
.prepend-13 {padding-left:520px;} 
.prepend-14 {padding-left:560px;} 
.prepend-15 {padding-left:600px;} 
.prepend-16 {padding-left:640px;} 
.prepend-17 {padding-left:680px;} 
.prepend-18 {padding-left:720px;} 
.prepend-19 {padding-left:760px;} 
.prepend-20 {padding-left:800px;} 
.prepend-21 {padding-left:840px;} 
.prepend-22 {padding-left:880px;} 
.prepend-23 {padding-left:920px;} 

/* Border on right hand side of a column. */
div.border {border-right:1px solid #eee;margin-right:5px;padding-right:4px;}

/* Border with more whitespace, spans one column. */
div.colborder {border-right:1px solid #eee;margin-right:25px;padding-right:24px;}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */
.pull-1 { margin-left:-40px;}
.pull-2 { margin-left:-80px;}
.pull-3 { margin-left:-120px;}
.pull-4 { margin-left:-160px;}
.pull-5 { margin-left:-200px;}

.pull-1, 
.pull-2, 
.pull-3, 
.pull-4, 
.pull-5 {
float:left;
position:relative;}

.push-1 {margin:0 -40px 1.5em 40px;}
.push-2 {margin:0 -80px 1.5em 80px;}
.push-3 {margin:0 -120px 1.5em 120px;}
.push-4 {margin:0 -160px 1.5em 160px;}
.push-5 {margin:0 -200px 1.5em 200px;}

.push-0, 
.push-1, 
.push-2, 
.push-3, 
.push-4, 
.push-5 { 
float:right;
position:relative;}

div.box {padding:1.5em; margin-bottom:1.5em; background:#eee;}
hr {background:#ddd; color:#ddd; clear:both; float:none; width:100%; height:.1em; margin:0 0 1.4em; border:none;}
hr.space {background:#fff; color:#fff;}
.clear {display:inline-block;}
.clear:after, .container:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clear {height:1%;}
.clear {display:block;}


/* Forms
-------------------------------------------------------------- */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}

input.text, input.title, textarea, select {margin:0.5em 0; border:1px solid #bbb;}

input.text:focus, 
input.title:focus, 
textarea:focus, 
select:focus {border:1px solid #666;}

input.text,
input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}

textarea {width:390px;height:250px;padding:5px;}

.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}


/* Microformates
-------------------------------------------------------------- */
.vevent {margin-bottom:1.5em;}
.vevent .summary {font-weight:normal;}
.vevent abbr {cursor:pointer; text-transform:uppercase;}
.vevent a.save-event {display:block;}
.vevent p {margin-bottom:0;}

.figure {float:right;}


/* Site Specific 
 * These classes override the default styles listed above
-------------------------------------------------------------- */
body {
background:#352E26 url(../../images/body_bg.png) repeat 50% 0;
font-family:"Lucida Grande","Lucida Sans Unicode","Helvetica Neue", Helvetica, Arial, sans-serif;
color:#535251;}

.wrapper {}

.container {
background:#E9E5DC url(../../images/container_bg.png) repeat-x 50% 0;
border:5px solid #D1CEC7;
border-top:none;}

h1, h2, h3, h4, h5, h6 {
font-family:"Lucida Grande","Lucida Sans Unicode","Helvetica Neue", Helvetica, Arial, sans-serif; 
color:#385878;}

h1 {font-size:1.3em; line-height:1; margin-bottom:0.5em;}
h2 {font-size:1.3em; line-height:1; margin-bottom:0.5em;}
h3 {font-size:1.2em; line-height:1; margin-bottom:0.5em;}
h4 {font-size:1.2em; line-height:1.25; margin-bottom:.5em; height:1.25em;}
h5 {font-size:1em; font-weight:bold; margin-bottom:1.5em;}
h6 {font-size:1em; font-weight:bold;}

a:link,
a:visited {text-decoration:underline; color:#996600 /*#B38000 #993333 #6B40A2*/;}
a:hover,
a:active,
a:focus {text-decoration:underline; color:#A22C0E /*#CC9900#A68CC7 #7D3AD3 #804CC1 #62339C */;}

hr {background:#C2BFB5; color:#C2BFB5;}
hr.space {background:#E9E5DC; color:#E9E5DC;}


/* Header
-------------------------------------------------------------- */
#header {
position:relative; 
margin:0 0 17px 40px; padding-bottom:3px;
background:url(../../images/header-bottom_bg.gif) repeat-x bottom;}

a#wordmark {display:block; height:50px}
a#wordmark img {margin-top:9px;}

#siteSearch {position:absolute; top:0; left:640px; font-size:10px; color:#AAA;}
#siteSearch a {color:#AAA;}
#siteSearch a:hover {color:#0058A8;}
#siteSearch input.google {width:180px;}

#siteSlides {
position:absolute; 
background:#4B7A9C; 
width:640px; height:320px;
z-index:1 !important;}

#swfObject {z-index:10 !important;}

#siteTitle {
position:relative; left:640px; 
background:#3F6683 url(../../images/masthead-title_bg.jpg) no-repeat top left; 
width:230px; height:320px;
padding-right:10px;}

#siteTitle a {
display:block;
position:relative;
left:150px;
width:80px;
height:80px;
text-indent:-9999em;}

.drop {
position:relative; left:455px; top:50px;
background:url(../../images/masthead-shadow_bg.png) no-repeat;
margin:0 auto;
width:40px;
height:320px;
z-index:100;}


/* Nav
-------------------------------------------------------------- */
ul.nav {margin:0; padding:0;}
ul.nav li {display:inline; padding-right:8px; list-style:none;}
ul.nav li + li {background:url(../../images/nav_bg.gif) no-repeat 0 !important; padding:0 8px 0 8px;}

ul#navService li {}

div#navMain {
position:relative; 
background:#4D6B80 url(../../images/navMain_bg.png) no-repeat top left; 
margin:0; padding:10px;
border-top:1px solid #7297AE;
border-bottom:1px solid #3C5568;}

div#navMain ul {font-size:100%;}
div#navMain li {background:url(../../images/navMain_li_bg.gif) no-repeat 0 !important; margin:0; padding:0 7px;}
div#navMain li:first-child {background-image:none !important;}

div#navMain li a {padding:2px 6px 3px 6px; text-decoration:none; color:#192633;}
div#navMain li:first-child a {padding-left:0;}
div#navMain li a:hover,
div#navMain li a:active,
div#navMain li a:focus {color:#EEE;}
div#navMain li.urhere a {background:url(/lievens/images/navMain-urhere_bg.png) repeat-x;color:#385878;}

div#nav-utility {clear:both; border-top:1px solid #C2BFB5; margin-bottom:0; padding-top:.75em; padding-left:20px;}
div#nav-utility .nav {float:left; margin-bottom:0;}
div#nav-utility a {text-decoration:none; color:#597281;}
div#nav-utility a:hover {color:#7D9AAA;}


/* Menu
-------------------------------------------------------------- */
ul.menu {margin:0; padding:0;}
ul.menu li {margin-bottom:.25em; padding-left:25px; list-style:none;}
ul.menu li + li {/* background:transparent;*/}
ul.menu a {text-decoration:underline;}
ul.menu a:hover {text-decoration:none;}
ul.menu.pdf li {background:url(/lievens/images/icon_pdf.gif) no-repeat 0 2px; margin-bottom:.25em; padding-left:25px; list-style:none;}


/* Content
-------------------------------------------------------------- */
#content {clear:left;}
#main {margin-left:40px; width:610px; font-size:1.1em;}

#main h1 {background:#EDE9E0; margin-bottom:0}
#main h2 {background:#EDE9E0; font-size:1em; line-height:1.3em;}

#preview #main h1 {
letter-spacing:-1px;
text-shadow:0px 0px 0px #EDE9E0;} /* Webkit enabled - thins out the font somewhat so letter-spacing is more pleasing in those browsers */

#preview h1 span {display:block; line-height:1.5em; letter-spacing:0; font-size:.75em;}

#preview #main h2 {
margin:1em 30px 1em 0; 
border-top:1px solid #C2BFB5;
border-bottom:1px solid #C2BFB5;
padding:.6em 0;
width:305px;
font-size:1em;
line-height:1.3em;
color:#434241;}

p img.top {margin-top:.4em;}
.matte img {border:1px solid #C2BFB5; border-bottom:1px solid #FFF;}

blockquote {
background:url(/lievens/images/quote_bg.png) no-repeat 0 .8em;
margin:-.5em 0 1em 0;
border-top:1px solid #C2BFB5;
border-bottom:1px solid #C2BFB5;
padding:.6em 0 .25em 58px;}

blockquote p {
margin:0;
padding-bottom:.6em;
font:italic normal 95%/1.7 "Lucida Grande","Lucida Sans Unicode","Helvetica Neue", Helvetica, Arial, sans-serif;}

.figure {margin-left:40px;}
.figure img {margin-bottom:.5em;}
.figure .credit {border:none; font:normal x-small/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;}

p.credit,
p.cite {
font-size:90%; 
line-height:1.3;
color:#737271;}

p.credit-preview {font-size:xx-small;line-height:1.4}

p.cite.top {

/* 
------------------------------------
Using this class in place of HTML cite 
for multi-line citations containing 
blocklevel elements -Not sure of 
a better way to do this 
-------------------------------------- */
border-top:1px solid #CCC; 
margin-bottom:.5em;
padding-top:.5em;}

.cite a:link,
.cite a:visited {text-decoration:underline; color:#737271;}
.cite a:hover,
.cite a:active,
.cite a:focus {color:#111;}

#preview .figure {width:262px;}

#gallery h1 {display:none;}
#gallery #main {width:870px;}

#gallery #cA {margin-right:36px;}
#gallery #cB {margin-right:36px;}
#gallery #cC {margin-right:36px;}
#gallery #cD {}

#press-reviews cite {display:block;}
#press-reviews blockquote p {padding-bottom:1.4em;}
#press-reviews #podcast {display:none;}

#chronology p b {display:block;}

#lectures-events h3 {border-bottom:1px solid #CFCCC4; padding-bottom:.2em;}
#lectures-events div.last {margin-bottom:0;}
#lectures-events div.last p {margin-bottom:0;}
#lectures-events ol {margin:-1em 0 2em 0; list-style:none;}
#lectures-events ol li {margin-bottom:.7em;line-height:1.2em;}

#lectures-programs h2.quiet {font-size:xx-small;}
#lectures-programs h3 {border-bottom:1px solid #CFCCC4; padding-bottom:.2em;}
#lectures-programs h4 {margin-bottom:.5em; font-size:100%;}
#lectures-programs h5 {margin-bottom:.5em; font-weight:normal; font-size:100%;}
#lectures-programs div.last {margin-bottom:0;}
#lectures-programs div.last p {margin-bottom:0;}
#lectures-programs ol {margin:-1em 0 2em 0; list-style:none;}
#lectures-programs ol li {margin-bottom:.7em;line-height:1.2em;}

#chronology #main,
#lectures-events #main,
#lectures-programs #main {
background:url(/lievens/images/main_bg.gif) repeat-y 300px 0; 
margin-bottom:1.5em;}

#lectures-programs #main.single {background-image:none; margin-bottom:1.5em;}
#lectures-programs #main.single h3 {margin-top:1.5em;}


/* Sidebar
-------------------------------------------------------------- */
#sidebar {
margin-left:20px;}

.drawers-wrapper {position:relative; background:#F5F1E8; margin-bottom:1.3em;border-bottom:1px solid #CFCCC4;}
.drawers {background:url(/lievens/images/drawer_bg.gif) repeat-y;}
.drawer {background:url(/lievens/images/drawer-open_bg.png) no-repeat bottom;}

h2.drawer-handle {
margin:0;
background:#CDCBC5 url(/lievens/images/drawer-handle_bg.png) repeat-x top;
border-top:1px solid #EEE;
border-bottom:1px solid #A9A69E;
padding:7px 0 7px 20px;
font-size:110%;
letter-spacing:normal;
cursor:pointer;
color:#333;}

h2.drawer-handle.open {
background:#CD9E5A url(/lievens/images/drawer-handle-open_bg.png) repeat-x top; 
border-top:1px solid #F7E09D;
border-bottom:1px solid #BB934F;
color:#FFF;}

.drawer-contents {font-size:95%; color:#636261;}
.drawer-contents .top {padding-top:2em;}
.drawer-contents .bottom {padding-bottom:1.5em;}

.webkit .drawer-contents .bottom {padding-bottom:5em;} /*  See "Browser Selectors" */

.drawer-contents h3 {
margin:0 20px .1em 20px;
border-bottom:1px solid #CFCCC4;
padding-top:1em;
padding-bottom:.4em; 
font-size:115%;}

.drawer-contents p {margin-bottom:.75em; padding:0 10px 0 20px;}
.drawer-contents ul {list-style:none; margin-left:20px; margin-bottom:1em;}
.drawer-contents ol li {margin:0 0 1em 20px; line-height:1.2em;}
.drawer-contents em {text-transform:uppercase; font-style:normal;}
.drawer-contents .bottom.small {margin-top:1.5em;}
.drawer-contents ul.pdf li {line-height:1.6em;}
.drawer-contents img.pic {margin:.5em 0 .5em 20px;border:1px solid #C2BFB5;}

p em.asterik {margin-left:-7px; padding-right:3px;}

#planning li img {margin-top:.75em;}
#shop strong {font-weight:normal; text-transform:uppercase;}
#shop img.pic {margin-left:0;margin-right:10px;border:none;}
#shop .btn {margin-left:20px;}
#hotel li {margin-top:.5em;}

#sidebar div.box {
border:1px solid #CFCCC4;
border-top:1px solid #FFF;
border-bottom:1px solid #CFCCC4;
padding:1.5em; 
margin-bottom:1.5em; 
background:url(/lievens/images/drawer-open_bg.png) no-repeat bottom;} 

#sidebar div.box h4 {
margin-top:-.2em; 
margin-bottom:.75em; 
line-height:1.1em;
font-size:110%;}

#sidebar div.box p {margin:0 20px; line-height:1em;}


/* Footer
-------------------------------------------------------------- */
#footer {
position:relative;
background:#DEDAD1 url(/lievens/images/x870_brdr.gif) repeat-y;
margin-bottom:40px;
border-bottom:1px solid #B6B3AD;
border-top:1px solid #7297AE;
font-size:1em;
z-index:10;}

#footer #brand {
position:absolute; right:16px; bottom:35px;
z-index:100;}

#footer div {margin-bottom:0; padding-bottom:1.5em;}
#footer h3 {
background:#4D6B80 url(../../images/navMain_bg.png) no-repeat top left;
margin:0; 
border-bottom:1px solid #3C5568; 
padding:10px 0 10px 20px; 
color:#FFF;}

#footer h4 {margin-bottom:.25em; padding-top:1em;}
#footer h5 {margin-bottom:15px; font-weight:normal;}
#footer #credit h4,
#footer #credit h5,
#footer #credit p {margin-left:20px;}
#footer #credit ul {margin-left:-5px;}
#footer #sponsor {background:url(/lievens/images/vert_bg.gif) repeat-y 100%; padding-bottom:2.5em;}

#footer #sponsor h5 {margin-top:5.6em;}
#footer #sponsor p {width:240px;}
#footer #copyright {float:right; margin-bottom:0; margin-right:20px; text-align:right;}
#footer #credit,
#footer #sponsor {padding-top:1.5em;}
#footer a:hover {text-decoration:underline;}


/*
-------------------------------------------------------------- */
#header, 
#content, 
#sidebar, 
#footer, 
.widget {overflow:hidden;}


/* Modifiers
-------------------------------------------------------------- */
.small {font:normal x-small/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif !important;}
.nowrap {white-space:nowrap;}



/* Browser Selectors
   http://rafael.adm.br/css_browser_selector
--------------------------------------------------------------  */
.ie .example {background-color:yellow}
.ie7 .example {background-color:orange}
.gecko .example {background-color:gray}
.win.gecko .example {background-color:red}
.linux.gecko .example {background-color:#FFC0CB}
.opera .example {background-color:green}
.konqueror .example {background-color:blue}
.webkit .example {background-color:black}
.chrome .example {background-color:#0FF}

.example {width:100px; height:100px;}

.no_js {display:block;}
.has_js {display:none;}
.js .no_js {display:none;}
.js .has_js {display:block;}