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

 Milwaukee Art Museum, mam.org
 China exhibition minisite styles

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


/* Color Scheme
-----------------------------------------------------------------------
Orange.......#F15D22, RGB=241/93/34
Mint........#AFF1D2, RGB=175/221/210
Orange Medium.........#e96d1f, RGB=150,195,165
Text.............#222222
Text.............#555555
Text Warm.............#645F55 or #645F5F
*/

/* Blueprint Adjustments
-----------------------------------------------------------------------
This will provide a method to keep blueprint intact while still making
adjustments to the framework.
----------------------------------------------------------------------- */
div {position:relative;}
.showgrid {background:url(image/dev_grid-trans.png) !important;}



/* Non-semantic helper classes
-------------------------------------------------------------- */

/* image replacement */
.ir {display:block; text-indent:-999px; overflow:hidden; background-repeat: none; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility 1) universal .hidden {display:none; visibility:hidden; }
   2) RTL only */
.hidden {position:absolute; left:-99em; }

/* Hide only visually, but have it available for screenreaders
   j.mp/visuallyhidden - See Jonathan Neal comments */
.visuallyhidden {position:absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display:inline-block; }
.clearfix {display: block; }

/* Similar to Clearfix */
.group:before,.group:after {content:""; display:table;}
.group:after {clear:both;}
.group {zoom:1; /* For IE 6/7 (trigger hasLayout) */}


/* Links
----------------------------------------------------------------------- */
a:link,
a:visited {text-decoration:underline; color:#666;}
a:hover,
a:active,
a:focus {text-decoration:underline; color:#444;}

h2 a:link,
h2 a:visited,
h3 a:link,
h3 a:visited,
h4 a:link,
h4 a:visited,
h5 a:link,
h5 a:visited,
h6 a:link,
h6 a:visited{text-decoration:none !important;}

h2 a:hover, h2 a:focus,
h3 a:hover, h3 a:focus,
h4 a:hover, h4 a:focus,
h5 a:hover, h5 a:focus,
h6 a:hover, h6 a:focus {text-decoration:underline;}

#body a:link,
#body a:visited {font-weight:normal; text-decoration:normal; color:#F15D22;}
#body a:hover,
#body a:active,
#body a:focus {text-decoration:underline; color:#1d1d20;}

#primary a:link {font-weight:bold; text-decoration:normal; color:#F15D22;}
#primary a:hover,
#primary a:active,
#primary a:focus {text-decoration:underline; color:#1d1d20;}


#sidebar a:link,
#sidebar a:visited {text-decoration:normal; color:#F15D22; }
#sidebar a:hover,
#sidebar a:active,
#sidebar a:focus {text-decoration:underline; color:#1d1d20;}


/* Typography
----------------------------------------------------------------------- */
body {
color:#444;
font-family:"Segoe UI", Tahoma, "Helvetica Neue", Helvetica, sans-serif;
font-size:80%;}

/* Different Font Stacks to consider
font-family:"Segoe UI", Tahoma, "Helvetica Neue", Helvetica, sans-serif; - Used in typical minisite
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; - Used for mam.org
font-family: Calibri, "Myriad Pro", Myriad, Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
*/

h1, h2, h3, h4, h5, h6 {
font-family:"Helvetica Neue", Helvetica, "Segoe UI", Tahoma, sans-serif;
font-weight:bold;
color:#444;}

h1 {font-size:1.3em; line-height:1; margin-bottom:0.5em;}
h2 {font-size:1.3em; line-height:1.1; margin-bottom:0;}
h3 {font-size:1.1em; line-height:1.1; margin-bottom:0.5em;}
h4 {font-size:1.1em; line-height:1.1; margin-bottom:0.5em; color:#444;}
h5 {font-size:1em; font-weight:bold; margin-bottom:0.5em;}
h6 {font-size:.9em; font-weight:bold;}

p {margin:0 0 1.5em;}
p.subhead {margin:0;padding:0; color:#934C93;}
p.more {margin-top:-1em !important; background:transparent !important;}

blockquote {
background:url(image/quotes-trans.png) no-repeat 10px 10px;
border-top:1px solid #DDD;
border-bottom:1px solid #DDD;
margin:1.5em 0;
padding:.5em 0 .5em 0;
}

blockquote p {
color:#222;
font-style:normal;
font-weight:bold;
font-size:160%;
line-height:1.1em;
margin:0;
padding:11px 10px .5em 50px;
}

acronym {cursor:help;}

dl.dialogue {}
dl.dialogue dt {float:left; width:80px; background:;}
dl.dialogue dd {margin:0 0 1em 80px;}


/* Global
----------------------------------------------------------------------- */

html,body {background:#ffe794 url(image/bg_viewport-painted.jpg) repeat 50% 0;}
#viewport {b//ackground:url(image/bg_viewport-painted.jpg) repeat-x 50% -340px;}

ul.nav {margin:0; padding:0;}
ul.nav li {display:inline; list-style:none;}
ul.nav li span {padding:0 6px;}
ul.nav li a {text-decoration:none;}

ul.menu {margin:0; padding:0; list-style:none;}
ul.menu li {margin-bottom:.25em;}
ul.menu a {text-decoration:underline;}
ul.menu a:hover {text-decoration:none;}
ul.menu.pdf {margin-bottom:2em;}
ul.menu.pdf li {background:aqua /* url(image/links/pdf.png) no-repeat 0 2px; margin-bottom:.25em; padding-left:25px; list-style:none*/;}

ol.menu {margin:0; padding:0; list-style:none;}
ol.menu li {margin-bottom:.25em;}

/* Images or Figure - review these and sort out what is useful
img.right {float:right;margin:0;}
img.left {float:left;margin:0;}
*/

p img {float:left; margin:.4em 1.7em 1.7em 0; padding:0;}
p img.right {float:right; margin:.5em 0 1.7em 1.7em;}
p img.top {margin-top:.5em;}
p img.bottom {}

/* Currently used on minisite */
div.figure {float:left; font-size:85%; height:100%; margin-top:4px; margin-bottom:15px; padding-right:15px; width:150px;}
div.figure.alt {float:right; margin-left:15px; padding-right:0;}
div.figure.feature {float:right; margin-left:25px; padding-right:0; width:270px;}
div.figure img {border:1px solid #222; margin-bottom:10px;}
div.figure p {margin:0; padding:0;}

/* Need to force the height for the slideshow */
#feature.figure {margin-left:25px; padding-right:0; width:270px;}
#aside.figure {height:460px;}
#aside.figure {height:400px;}

/* Slideshow */
ul.slideshow {margin:0; padding:0; list-style:none;}
ul.slideshow li {margin-bottom:.25em;}
.slideshow p {display:none; margin-bottom:1.5em!important;} /* Consider using .hidden class */
.slideshow p.default {display:block; margin-bottom:.25em;}  /* Fallback if JS is disabled */
.slideshow img {display:block!important;}

hr { /* #e96d1f, RGB=150,195,165 */
border: 0;
height: 0;
border-top: 1px solid rgba(233,109,31, 1);
/*border-bottom: 1px solid rgba(255,255,255, 0.3);*/
}

/* Microformats */
.vevent {font-weight:inherit;}
.vevent .summary {display:block;}
.vevent .date {display:block;}
.vevent .location {font-weight:inherit;}
.vevent abbr {cursor:pointer; border-bottom:none;}
.vevent .details {font-weight:inherit;}

/* Tools */
.white-space {white-space:nowrap;}
.quiet {color:#666;}
.popup {}


/* MAM */
.credit {font-size:xx-small;}
.credit b {font-weight:normal; text-transform:uppercase;}
.sponsor {font-style:italic; margin-bottom:3em;}
.sponsor h5 {font-style:normal; font-weight:bold; margin-bottom:0;}
.sponsor p {font-size:small; font-style:italic;}
.sponsor i {font-style:normal !important;}
.sponsor ol.menu {overflow:auto;}
.sponsor ol.menu li {float:left; margin-right:50px;}
.sponsor ol.menu li.last {margin-right:0;}

#sponsor {/* border-top:1px solid #e96d1f; margin-bottom:0; padding-top:1em; overflow:auto; */}



/* Header
-------------------------------------------------------------- */
#header {
background:transparent url(image/bg_header.png) repeat 50% 0;
border-bottom:1px solid rgb(197,179,114); /* The fallback */
border-bottom:1px solid rgba(0,0,0,0.10);
margin:0 auto;
margin-bottom:40px;
position:relative;
z-index:1;
}

#header-wrap {margin-bottom:10px;}
#header p {margin:0;}

/* Brand */
#global {height:50px !important; padding-top:5px;}
#global h1#mam {
float:left;
position:relative; top:15px;
margin:0;
width:282px; height:22px;
z-index:100;
}


/* Title */
#title {
float:left;
border-bottom:1px solid rgba(233,109,31,0.14);
/* box-shadow: 0px 1px 0px rgba(200,250,215,1); */
margin:0 0 .4em;
text-align:center;
width:270px;
}

#title a {
display:block;
margin:0;
margin-bottom:30px; padding:0;
height:;
}

/* Main Nav */
#nav-site {
clear:left;
/* border-bottom:1px solid rgba(0,0,0,0.14); */
/* box-shadow: 0px 1px 0px rgba(200,250,215,1); */
font-family:"Segoe UI", Tahoma, "Helvetica Neue" Helvetica, sans-serif;
font-size: 105%;
font-weight:bold !important;
line-height:1.4;
margin-bottom:2em;
width:270px;
}

/* #nav-site  .suphead {display:block; font-size:xx-small; font-weight:normal; text-transform:uppercase; letter-spacing:1px; line-height:1.5em;}
#nav-site  .subhead {white-space:nowrap;} */
#nav-site  li {position:relative;}
#nav-site  li a {font-weight:bold !important;}
#nav-site  li a:link,
#nav-site  li a:visited {color:#F15D22; text-decoration:none;}
#nav-site  li a:hover,
#nav-site  li a:active,
#nav-site  li a:focus {color:#1d1d20; text-decoration:none;}

#nav-site .you-are-here a {color:#1d1d20!important;}

#service {margin:0 50%; position:absolute; top:12px; left:175px; width:300px; z-index:1;}
#service .nav {position:relative; top:-2px; margin:0; font-size:11px; color:#222; text-align:left;}
#service form {position:relative; width:300px;}
#service input {float:left;}
#service form input.text {
position:relative;
top:-6px;
background:rgba(255,231,148,0.60) !important;
border:1px solid #C6BB70 !important;
padding:2px;
width:250px; height:16px;}
#service form input.submit {float:right;}

#service a:link,
#service a:visited {color:#333;}
#service a:hover,
#service a:active,
#service a:focus {color:#555;}


/* Sidebar
-------------------------------------------------------------- */
#sidebar {margin-top:; font-size:85%; padding-bottom:0.3em; overflow:auto;}
#sidebar div {clear:left;}
#sidebar div.item {}
#sidebar h4 {border-top:1px solid #e96d1f; font-size:120%; margin:0 0 .5em; padding-top:0.5em}
#sidebar h5 {margin-bottom:0.1em;}
#sidebar ul {list-style:none; padding:0; margin:0;}
#sidebar img {border:1px solid #222; float:left; margin:.5em 10px 1em 0;}

#sidebar a:link,
#sidebar a:visited {text-decoration:none;}
#sidebar a:hover,
#sidebar a:active,
#sidebar a:focus {text-decoration:none;}

#visiting {margin-bottom:3em;}
#visiting .item {margin-bottom:1.5em;}
#visiting #tickets {border-bottom:1px solid #e96d1f; padding-bottom:1.5em!important;}
#visiting #hours p {margin:0;}
#visiting #store {}
#visiting #cafe {}
#visiting #hotel {}


#sidebar #videos {padding-bottom:3em!important;}
#sidebar #videos .item {height:62px; margin:0; padding:0;}
#sidebar #videos .item img {margin-top:0;}
#sidebar #videos .item a:link,
#sidebar #videos .item a:visited {color:#444!important;}
#sidebar #videos .item a:link b,
#sidebar #videos .item a:visited b {color:#F15D22!important;}

#sidebar #videos .item ol {list-style:none; margin-top:.5em;}
#sidebar #videos .item li {display:inline; padding-right:.5em;}
#sidebar #videos .item li a:link,
#sidebar #videos .item li a:visited {color:#F15D22!important;}


/*
#sidebar #videos .item:hover {
background:#EEE url(image/video-overlay_play.png) no-repeat;
z-index:99;}*/

.media-inner {border-top:12px solid #000;}
.media-inner p {margin-top:.5em;}

#sidebar #download {margin-top:2em!important;}




/* Share AddThis
-------------------------------------------------------------- */
#home .share {float:left; margin:.8em 0 .75em 0; width:300px;}

.share a.addthis_pill_style {
width: 50px !important;
overflow: hidden !important; /* Removes counter */
margin-right:5px;
}

.share a.addthis_button_tweet {margin-right:3px;}



/* Body
-------------------------------------------------------------- */
#body {}
#body-wrap {}

h3.vevent {font-weight:bold;}
h3.vevent .date {margin-bottom:.2em; margin-top:.5em;}
h3.vevent .location {font-size:90%; font-weight:normal;}

#home h3.vevent .date {margin:0; line-height:1.3;}
#home h3.vevent .location {font-size:100%; font-weight:bold;}

#catalogue {background:#EF3E42; color:#FFF; margin-bottom:3em; padding:20px; overflow:auto;}
#catalogue p {width:400px;}
#catalogue ul {width:400px;}
#catalogue img {float:right;}
#catalogue a {color:#FFF !important;}

/* Columns */
#primary {float:right;width:630px;}
#sidebar {clear:left;width:270px;}
#aside {font-size:85%;}
#aside img {border:1px solid #222; margin-bottom:10px;}




.sponsor {margin-bottom:3em;}
.sponsor ol.menu {overflow:auto;}
.sponsor ol.menu li {float:left; margin-right:50px;}
.sponsor ol.menu li.last {margin-right:0;}

#sponsor {border-top:1px dotted #222; margin-bottom:0; padding-top:1em; overflow:auto;}
#sponsor h5 {clear:left;}
#sponsor ol {margin:10px 0!important; padding:0!important;}
#sponsor li {float:left; margin-right:31px!important;}
#sponsor li img {margin:0!important;padding:0!important;}
#sponsor li.last {margin-right:0!important;}

.article {margin-bottom:3em;}


/* Home */
#home #feature {
float:left;
margin-right:20px;
position:relative;
width:310px;
z-index:9;
}

#home #feature img {margin-bottom:1em; border: 1px solid #E96D1F;}

#morris-column {
	float:right;
	margin-left: 20px;
	border:1px solid #E96D1F;
}

/* Programs & Events */
#programs .vevent {font-weight:bold; margin:1em 0;}
#programs .vevent .sponsor {color:#222; font-style:normal;}
#calendar-listing {overflow:auto; margin-bottom:2em; padding-top:1em;}
#calendar-listing .alt {border-bottom:1px solid #e96d1f; border-top:1px solid #e96d1f; /*background-color:#F0E384;*/}
#calendar-listing ul {padding:0 11px;}
.calendar-item {padding:1.5em 0 .6em;}
.calendar-item h4 {margin-bottom:0; padding:0 15px; font-weight:bold}
.calendar-item p {margin-bottom:1em; padding:0 15px; line-height:1.8em;}
.calendar-item .date {margin-bottom:.5em; text-transform:uppercase;}
a.rss {
background:url(image/link/rss.png) no-repeat 0 center;
display:block;
height:16px;
position:absolute; top:0; right:0;
text-indent:-999em;
width:16px;
}


/* Gallery */
#gallery .slide {
float:left;
position: relative;
margin:0 12px 12px 0;
}

#gallery .slide.last {margin-right:0 !important;}

#gallery .slide img {
background:#FFF;
border:1px solid #e96d1f;
border-bottom-color:#c5b372;
margin:0;
width:180px;
padding:10px;
}

#gallery .slide p {position:relative;}

/* Biographies */
#biographies #primary h3 {margin-bottom:2em;}
#biographies .artist {border-bottom:1px solid #e96d1f; margin-bottom:2em; padding-bottom:.5em;}
#biographies .artist.last {border-bottom:none;}
#biographies .artist img {
background:#FFF;
border:1px solid #e96d1f;
border-bottom-color:#c5b372;
float:left;
margin-right:1em;
margin-bottom:1em;
padding:10px;
}

/* Dictionary */
#dictionary dd {
    margin-bottom: 1.3em;
    margin-left: 0;
}

#dictionary dl {
    margin-top: 2em;
}




/* Modal
-------------------------------------------------------------- */
#modal {background:#000; overflow:auto; margin:0 auto; /*padding:0 7px 7px 7px;*/ width:425px; height:344px; border:7px solid #000; border-top:0;}
width="425" height="344"


/* SWF
-------------------------------------------------------------- */
#swf p {color:#EEE;}
#swf .creditline {color:#EEE;font-size:90%;margin-top:1em;}
#swf .creditline span {color:#333; padding:0 6px;}

#swf {
position:absolute !important;
top:50%;
left:50%;
width:960px;
height:600px;
margin-top:-300px; /*set to a negative number 1/2 of your height*/
margin-left:-480px; /*set to a negative number 1/2 of your width*/
border:1px solid #333;}




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

#footer {
clear:both;
color:#e96d1f;
padding:20px 0;
font-size:11px;
}

#footer .left {float:left;}
#footer .left img {margin-top:3em;}
#footer .copyright {color:#222; float:right;}

#footer a {text-decoration:none; color:#222;}
#footer a:hover,
#footer a:active,
#footer a:focus {text-decoration:none; color:#777;}


#nav-utility {clear:left; margin-bottom:2px;}
#nav-utility span {padding:0 6px;}

#footer #mamlogo {height:78px; padding-bottom:5px;}

#footer-local {margin-top:50px; border-bottom:1px solid #e96d1f;}

#footer-global a#mam-logo {
position:absolute; top:-84px; left:100%;
margin-left:-95px;
height:78px; width:95px;
text-indent:-999em;
background:url(image/mam_blue-trans.png) no-repeat;}



/* Miscellaneous
-------------------------------------------------------------- */
a#wordmark:focus,
#title a,
a#mam-logo:focus {outline:none;}


/* Google Map
-------------------------------------------------------------- */
#content { width: 420px; padding: 10px; text-align: justify; font-family: "Segoe UI", Tahoma, "Helvetica Neue", Helvetica, sans-serif; font-size: 90%; line-height: 1.5em; }
#content h4 { color: #444444; font-size: 1.8em; line-height: 1.5em; }
#content img { padding: 0 10px 10px 0px; float: left; }
#map_canvas { width: 630px; height: 630px; padding: 0px; margin: 0 0 20px; border: 1px solid #f15d22; background-color: #f4e395!important; }
#marker-list {width: 580px; padding: 0 0 20px 0;}
.marker-item { padding: 2px 5px 6px; }
#marker-list a:link { color: #444!important; text-decoration:underline!important;}
#marker-list a:hover { color: #F15D22!important;text-decoration:underline!important;}