/* --------------------------------------------------------------

 Milwaukee Art Museum
 http://mam.org

-------------------------------------------------------------- */
@import "color.css";
@import url(/css/mobile.css) screen and (max-device-width:480px);


/* Modified version of Blueprint

/*reset
-------------------------------------------------------------- */

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body { line-height: 1; color: #333; background: white; }

caption, th, td { text-align: left; font-weight: normal; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }


/*Text
-------------------------------------------------------------- */

body { font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif; line-height: 18px; }

body          { font-size: 70%; }   /* IE */
html > body   { font-size: 70%; }  /* Other browsers */


h1,h2,h3,h4,h5,h6 { color:#111; clear:both; }

h1 { font-size: 1.2em; line-height: 36px; font-weight:bold; }
h2 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
h3 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
h4 { font-size: 1.2em; line-height: 16px;  }
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1em; }


p           	{ margin: 0 0 1.5em 0; }
p.last     		{ margin-bottom:0; }
p img       	{ float: left; margin: 1.3em 1.3em 1.3em 0; padding:0; }
p img.top   	{ margin-top:0; }
p img.right   	{float:right; margin-right:0; margin-left:1.5em;}

img       	{ margin:0; padding:0; }


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

a           { color: #125AA7; text-decoration:none; outline: none; }
a:hover     { color: #000; }

blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666;}
b   	    { font-weight: bold;}
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code        { font:0.9em Monaco, monospace; }
acronym 		{border-bottom: 1px dotted #AAA;  cursor: help;}

hr { background: #ffffff; color: #ffffff; clear: both; float: none; width: 100%; height: 1px; margin: 0 0 1.4em 0; border: none; }

* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */

table   { margin-bottom: 1.4em; }
th,td   { height: 1em; padding:0; }
th      { font-weight:bold; }

label     { font-weight: bold; }

.small {font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large {font-size: 1.2em; line-height: 2.5em; }
.quiet {color: #666; }
.hide {display: none; }
.error {color:#CC0033;}
.required {color:#CC0033; font-style: normal;}


.alt {
  color: #666;
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif;
  font-size: 1.2em;
  line-height: 1%; /* Maintain correct baseline */
  font-style: italic;
}

.dquo { margin-left: -.7em; }

p.incr, .incr p { font-size: 0.83333em; line-height: 1.44em; margin-bottom: 1.8em; }

.nowrap {white-space:nowrap;}


/*grid
-------------------------------------------------------------- */

body { text-align: center; margin: 0px; padding: 0px; background-image:url(/images/background.gif); background-repeat:repeat; }

.container { text-align: left; position: relative; padding: 0; margin: 0 auto; width: 960px; background-color:#ffffff; }


.column { float: left; margin: 0 5px; padding: 0; }
* html .column { overflow-x: hidden; }

.border { padding-right: 9px; margin-right: 0; border-right: 1px solid #ddd; }

.first  { margin-left: 0; }
.last   { margin-right: 0; }

.span-1   { width: 50px; }
.span-2   { width: 120px; }
.span-3   { width: 190px; }
.span-4   { width: 260px; }
.span-5   { width: 330px; }
.span-6   { width: 400px; }
.span-7   { width: 470px; }
.span-8   { width: 540px; }
.span-9   { width: 610px; }
.span-10  { width: 680px; }
.span-11  { width: 750px; }
.span-12  { width: 820px; }
.span-13  { width: 890px; }
.span-14  { width: 960px; margin: 0; }


.box { padding: 1.5em; margin-bottom: 1.5em; background: #f0f0f0; }


.clear 			{ display: inline-block; }

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

* html .clear 	{ height: 1%; }
.clear 			{ display: block; }


.search 		{ font-size: 10pt; font-family: Helvetica, Arial, Verdana, sans-serif; color:#AAAAAA; }
.rightBorder	{ text-align:center; padding-left:5px; }
.rightCal		{ /*text-align:left; padding-left:5px;*/ }

div.rightBorder hr	{ color:#FFFFF; background: #FFFFF; }

.headerPic	{ height:42px; padding-top:10px; }

.span-col  		{ width: 141px; }
.span-media  	{ width: 190px; font-size:9px; }
.span-2cols		{ width: 290px;}
.span-sg  		{ width: 142px; }
.span-also   	{ width: 290px;  }
.span-alsoSP   	{ width: 10px; }
.span-body3   	{ width: 178px; }
.span-sp   		{ width: 10px; }
.span-MAMInsider  { width: 390px; }




/* Buttons --- I don't think any of these are used---
-------------------------------------------------------------- */
a.button, button {
  display:block; float:left; margin:0 0.583em 0.667em 0; padding:5px 10px 6px 7px; border:0.1em solid #dedede; border-top:0.1em solid #eee;
  border-left:0.1em solid #eee; background-color:#f5f5f5; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif;
  font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656;
  cursor:pointer; }

button { width:auto; overflow:visible; padding:4px 10px 3px 7px; }
button[type] { padding:5px 10px 5px 7px; line-height:17px; }

*:first-child+html button[type] { padding:4px 10px 3px 7px;}

button img, a.button img { margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; }

button:hover, a.button:hover { background-color:#dff4ff; border:0.1em solid #c2e1ef; color:#336699; }

a.button:active { background-color:#6299c5; border:1px solid #6299c5; color:#fff; }

.positive { color:#529214; }

a.positive:hover, button.positive:hover { background-color:#E6EFC2; border:0.1em solid #C6D880; color:#529214;}
a.positive:active { background-color:#529214; border:0.1em solid #529214; color:#fff; }

.negative { color:#d12f19; }

a.negative:hover, button.negative:hover { background:#fbe3e4; border:0.1em solid #fbc2c4; }
a.negative:active { background-color:#d12f19; border:0.1em solid #d12f19; color:#fff; }


/* Colors
-------------------------------------------------------------- */


.background_blue 		{ background-color:#0057a7; }
.background_pink		{ background-color:#D71C84; }
.background_aqua		{ background-color:#009999; }
.background_green		{ background-color:#58a746; }
.background_orange		{ background-color:#ff7900; }
.background_red			{ background-color:#c60c30; }
.background_purple		{ background-color:#663399; }
.background_darkGrey	{ background-color:#333333; }
.background_lightGrey	{ background-color:#cccccc; }

div.menu_blue a			{ color:#0073cf; }
div.menu_pink a			{ color:#ea5493; }
div.menu_aqua a			{ color:#49bab6; }
div.menu_green a		{ color:#69a61d; }
div.menu_orange a		{ color:#ee6600; }
div.menu_red a			{ color:#e3372e; }
div.menu_purple a		{ color:#663399; }
div.menu_darkGrey a		{ color:#333333; }
div.menu_lightGrey a	{ color:#cccccc; }

div.text_blue b, div.text_blue a, div.text_blue h4, div.text_blue strong  			{ color:#0057a7; }
div.text_pink b, div.text_pink a, div.text_pink h4, div.text_pink strong 			{ color:#D71C84; }
div.text_aqua b, div.text_aqua a, div.text_aqua h4, div.text_aqua strong 			{ color:#009999; }
div.text_green b, div.text_green a, div.text_green h4, div.text_green strong 		{ color:#58a746; }
div.text_orange b, div.text_orange a, div.text_orange h4, div.text_orange strong 	{ color:#ff7900; }
div.text_red b, div.text_red a, div.text_red h4, div.text_red strong 				{ color:#c60c30; }

div.text_darkGrey, div.text_darkGrey b, div.text_darkGrey a, div.text_darkGrey h4, div.text_darkGrey strong 		{ color:#999999; }
div.text_lightGrey, div.text_lightGrey b, div.text_lightGrey a, div.text_lightGrey h4, div.text_lightGrey strong 	{ color:#CCCCCC; }

div.text_blue a:hover, div.text_pink a:hover, div.text_aqua a:hover, div.text_green a:hover, div.text_orange a:hover, div.text_red a:hover, div.text_purple a:hover, div.text_lightGrey a:hover, div.text_darkGrey a:hover { color:#000000; text-decoration:none; }

div.text_blue hr	{ color:#AABADB; background: #AABADB; }
div.text_pink hr	{ color:#F7B5CB; background: #F7B5CB; }
div.text_aqua hr	{ color:#D5EAE9; background: #D5EAE9; }
div.text_green hr	{ color:#58a746; background: #58a746; }
div.text_orange hr	{ color:#FBD7A1; background: #FBD7A1; }
div.text_red hr		{ color:#F6B3AD; background: #F6B3AD; }


div.rightBorder hr	{ color:#FFFFF background: #FFFFF; }

hr#HRwhite	{ color:#FFFFFF; background: #FFFFFF; }


/* Learn + Play
-------------------------------------------------------------- */

/* Bad Styles */
div.text_purple b,
div.text_purple a,
div.text_purple h4,
div.text_purple strong {color:#663399;}
div.text_purple hr {color:#663399; background:#663399;}


#learn-play .callout {
background:#E8E0EE;
border:1px solid #C6B2D7;
margin-bottom:2em;
max-height:220px;
overflow:auto;
padding:15px 15px 8px 15px;
}

#learn-play .callout p {margin-bottom:1em;}


/* Nice idea but this would be so much better if the markup were up to snuff
#learn-play #body h4,
#learn-play #body strong,
#learn-play #body b {color:#663399;}
#learn-play #body hr {color:#663399; background:#663399;}

#learn-play #body p a,
#learn-play #body p a:visited {color:#663399; }
#learn-play #body p a:hover {color:#906BB5; text-decoration:underline;}
#learn-play #body p a:active {}
#learn-play #body p a:hover {}

#learn-play #body p b a,
#learn-play #body p strong a {color:#663399;}


a.button {background: #F5F5F5 url(/images/btn_arrow-docent.gif) no-repeat .75em 50%; padding-left: 20px;}
.quiet {color: #AC90C7;}

#learn-play #body h2 {
border-bottom:1px solid #663399;
color:#663399;
font-size:;
font-weight:normal;
margin-bottom:1em;
width:380px;
}

#learn-play #body h3 {
border-bottom:1px solid #663399;
color:#663399;
font-weight:normal;
margin-bottom:1em;
margin-top:2em;
}

#learn-play #body h4 {font-size:11px; font-weight:bold;}

#learn-play #body h5 {color: #639;}
*/

/* Menus + Hot News
-------------------------------------------------------------- */

#billboard-slideshow {height:200px;width:820px;}
#billboard-slideshow li {display:none; list-style:none;margin:0;padding:0;}
#billboard-slideshow li a {display:block; cursor:pointer!important; height:200px; width:820px;}


.headerMenu			{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif; margin-left: 0; padding-left: 0; color:#AAAAAA; text-align:left; }
.headerMenu a		{ font-size:10px; color:#AAAAAA; text-decoration:none; }
.headerMenu a:hover	{ font-size:10px; color:#000000; text-decoration:none; }


.miniMenu 			{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif; margin-left: 0; padding-left: 0; text-align:center; color:#FFFFFF; }
.miniMenu a			{ font-size:10px; color:#FFFFFF; text-decoration:none; }
.miniMenu a:hover	{ font-size:10px; color:#000000; text-decoration:none; }


.mainMenu 	{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif; margin-left: 0; padding-left: 5px; list-style: none; }
.mainMenu a	{ display: block; vertical-align: middle; text-align: left; padding-left:0px; padding-bottom:3px; padding-top:3px; height:22px; width: 109px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #666666; color:#333333; }

.mainMenu a:hover{ text-decoration: none; border-bottom-color: #000000; color: #000000; text-align: left; background-color: #eeeeee; }

.subMenu 	{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif; font-size: .6em; margin-left: 0; padding-left: 5px; list-style: none; }
.subMenu a	{ display: block; vertical-align: middle; font-size: 10px; text-align: left; padding-left:0px; padding-bottom:3px; padding-top:3px; height: 22px; width:105px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #666666; letter-spacing: .23px; }

.subMenu a:hover{ text-decoration: none; border-bottom-color: #000000; text-align: left; }


.quickLinks 	{ font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif; margin-left: 0; padding-left: 5px; list-style: none; }
.quickLinks a	{ display: block; vertical-align: middle; text-align: left; padding-left:0px; padding-bottom:3px; padding-top:3px; height:18px; width: 250px; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #0057a7; color:#333333; }

.quickLinks a:hover	{ text-decoration: none; border-bottom-color: #000000; color: #000000; text-align: left; background-color: #eeeeee; }

#mbrMenu 			{ padding-left:8px; color: #666; list-style-type: disc; }
#mbrMenu li a 		{ text-decoration: none; color: #D71C84; }
#mbrMenu li a:hover { text-decoration: none; color: #333; }

#mbrMenuSelected	{ color: #000; }


.hotNews 	{
color:#FFFFFF;
font:bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin:0;
padding:3px 0 4px;
text-transform:uppercase;
}

.hotNews a 	{color:#FFF; font-weight:bold !important; text-decoration:none; }
.hotNews a:hover {color:#CCC; text-decoration:none; }


/* Custom Classes
-------------------------------------------------------------- */

/* Templates */
#right-column {margin-bottom:3em;}
#right-menu {margin-top:1.7em; text-align:center;}


/* Sidebar - formerly right-column */
#sidebar {float:right; margin:3em 10px 3em 0; width:190px; padding:0;}
#sidebar .section {margin-bottom:2.5em;}
#sidebar .section h4 {border-bottom:1px solid #AABADB; color:#0057A7; margin-bottom:.75em;}
#sidebar .section img {display: block; margin-bottom:.75em;}

#sidebar #icon-listing img {display:block; margin:0 auto; margin-bottom:1em;}
#sidebar #icon-listing {text-align:center;}
#sidebar #icon-listing li {margin-bottom:2.5em;}

/*
#sidebar #icon-listing li#donate {border-top:1px solid #AABADB; border-bottom:1px solid #AABADB;}
#sidebar div#donate h4 {border-bottom:1px solid #AABADB; color:#0057A7; margin-bottom:.75em;}
#sidebar div#donate img {margin:0 0 0.5em 0; padding:0;}
*/

#sidebar #social-listing h4 {border-bottom:1px solid #AABADB; color:#0057A7; margin-bottom:.75em;}
#sidebar #social-listing ul.menu li {float:left;margin:0 7px .75em 0;padding:0;}
#sidebar #social-listing ul.menu li.last {margin-right:0!important;}
#sidebar #social-listing li {background:url(/lib/image/mam_sprite.png) no-repeat;}
#sidebar #social-listing li a {display:block; height:0;width:32px;padding-top:32px;overflow:hidden;}
#sidebar #social-listing li.facebook {background-position:-58px 0px;}
#sidebar #social-listing li.twitter {background-position:-58px -42px;}
#sidebar #social-listing li.flickr {background-position:-58px -84px;}
#sidebar #social-listing li.youtube {background-position:-58px -126px;}
#sidebar #social-listing li.newsletter {background-position:-58px -252px;}
#sidebar #social-listing li.blog {background-position:-58px -168px;}
#sidebar #social-listing p.blog.inline {/*display:block; padding-left:20px; background:url(/lib/image/mam_sprite.png) no-repeat -100px -104px;*/}
#sidebar #social-listing p {clear:left; margin-bottom:0.5em;}
#sidebar #social-listing p.newsletter {display:block; padding-left:30px; background:url(/lib/image/mam_sprite.png) no-repeat -100px -181px;}


#hours {margin-top:1em;}
#hours {
color:#666666;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", Tahoma, sans-serif;
margin-top:2em;
padding-left:5px;
list-style:none;}

#hours b	{color:#0057a7;}
#hours .menu	{}


/* Tools */
.quiet {color: #999999;}
.menu {list-style:none; margin:0;}
.more {display:block;/*text-decoration:underline;*/}
.sponsor {font-size:x-small;}
.editorNote {border:1px solid Khaki; background-color:LightYellow; padding: 4px 8px;}

/* Membership */
.span-3cols	{width: 190px; font-size: 1em; line-height: 1.5em;}
.indent {padding-left: 5px;}
.span-3cols h2 {padding-top: 5px;}
.span-3cols h4 {padding: 8px 0 0 0;  font-size: 1.1em; font-weight: bold;}
.span-3cols li {padding: 0px 0 10px 0; margin:0; line-height:1.2em; margin:0; list-style-type:none;}
.span-3cols ul {padding: 0; margin:0;}
.page-break {page-break-before:always;}


/* Hide list bullets */
.nobullet		{list-style-type: none;}
.business-sponsors	{width: 300px;}
.business-sponsors li	{padding: 0px 0 10px 0; margin:0; line-height:1.2em; margin:0;}


/* Calendar */
#calendar #calendar-links {border-top:1px solid #CCC; margin-top:2em;}
/*
#calendar .links {position:absolute; margin-top:2em;}
#calendar .links a {}
#calendar .links li {margin-bottom:0;}
#calendar .links li img {position: relative; top:.25em;}
*/

/* Learn + Play */
.schoolButton {margin-bottom:10px;}
.schoolButton a.graphic {display:block; background:url(/learn/images/buttons.gif) no-repeat 4px 4px; width:134px; height:35px; text-indent:-999em;}
.schoolButton a.graphic:hover {background:url(/learn/images/buttons.gif) no-repeat 4px -28px;}
.schoolButton a.text {margin-left:28px;}

/* Museum Info */
#navRentals {margin-left:0;}
#navRentals img {float:left; margin:0 8px 8px 0;}

/* Collection Classes */
#collection #collectionResults td img {float:left; margin-bottom:10px;}
#collection #collectionResults td p {clear:left; font-size:11px;}
#collection .paging {display: block; float:right;}

/* Docents */
form.mamform label {margin-right:6px;}
form.mamform input.text {margin-right:6px;}
form#docent-login.mamform {display:block; /* null */}

/* Visit */
#visit #video {float:left; margin-right:20px;}

/* Web Request */
#web-request-options {margin-bottom: 3em;}


/* Footer
-------------------------------------------------------------- */
#footer {clear:both; position:relative; overflow:auto;}

#mam-logo {display:inline !important; float:right; margin-bottom:20px; margin-right:40px;}

#nav-utility {border-top:1px solid #AABADB; color:#BBB; width:100%; overflow:auto;}
#nav-utility ul {display:inline; float:left; list-style:none; margin:20px 0 0 130px; padding:0 0 20px;}
#nav-utility li {float:left; margin:0; margin-right:.6em; padding:0;}
#nav-utility li:after {content:"|";}
#nav-utility li.last:after {content:"";}
#nav-utility a {padding-right:.6em;}

#copyright {color:#AAA; float:right; margin:20px 20px 0 0;}





/* UI
-------------------------------------------------------------- */
.ui-state-highlight {background:#FDF5D9; padding:0.5em 0.7em; border:1px solid #FCEEC1;}
.ui-state-highlight p {margin:0; padding:0;}
.ui-state-highlight .ui-icon {width:16px; height:16px;background:url(/images/ui-icons_2e83ff_256x240.png) no-repeat -16px -144px;}


/* Microformates - Figure: http://microformats.org/
-------------------------------------------------------------- */
div.figure {float:left; margin:1.3em 1.3em 0 0; padding:0;}
div.figure.small {line-height:1.4em; font-size:0.8em;}
div.figure.top {margin-top:0;}
div.figure.right {float:right; margin-right:0; margin-left:1.5em;}
div.figure img {display:block; margin-bottom:.5em;}
div.figure p.caption {margin-bottom:.75em;}
div.figure p span {display:block;}
.tel {white-space:nowrap;}



/* * jQuery Tabs */
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}



/* Button
-------------------------------------------------------------- */


#membership .button {
background: #F5F5F5 url(/lib/image/mam_sprite.png) no-repeat -605px -555px;
margin-top:.75em;
margin-bottom:3em;
padding-left:20px;
}

#membership .button:hover {background:#DFF4FF url(/lib/image/mam_sprite.png) no-repeat -605px -504px;}




/* Wufoo
-------------------------------------------------------------- */
.wufoo {background:#FFF;}
.wufoo .instruct {
font-size: 12px;
line-height:1.2;
width:120px!important;
}

.wufoo textarea {padding:4px;}
.wufoo .text {margin:0!important; padding:0!important; height:2.5em;}

.wufoo a:link {color: #0057A7;}
.wufoo a:hover {color: #0057A7; text-decoration: underline;}

.wufoo h2 {font-size:13px!important; text-align:left;}

.wufoo h3,
.wufoo h4 {
font-size:13px!important;
border-bottom:1px solid #ADB9DA;
padding-left:0!important;
margin-bottom:1em!important;
}


//*
.wufoo .alert-message.block-message {
  position: relative;
  padding: 7px 15px;
  margin-bottom: 18px;
  background-color: #FDF5D9;
  border: 1px solid #FCEEC1!important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
*//

.wufoo .error {}


/* Not In Use - Put styles in here that we are not sure about
-------------------------------------------------------------- */