/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s;  -ms-transition-duration: 0.8s;   -o-transition-duration: 0.8s;      transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width;  -ms-transition-property: height, width;   -o-transition-property: height, width;      transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property:    -moz-transform, opacity;  -ms-transition-property:     -ms-transform, opacity;   -o-transition-property:      -o-transform, opacity;      transition-property:         transform, opacity; }

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s;  -ms-transition-duration: 0s;   -o-transition-duration: 0s;      transition-duration: 0s; }

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none;  -ms-transition: none;   -o-transition: none;      transition: none; }


/**** Base styles

html, body, div, span, object, iframe, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } ****/

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }


/**** Isotope styles ****/


/**** Example Options ****/

.options { height:30px; }
.options h3 { margin-bottom: 0.2em; font-size: 15px; }
.options h4 { font-weight: bold; }
.options ul { margin: 0; list-style: none; float: right;}
.options ul ul { margin-left: 1.5em; }
.options li { float: left; margin-bottom: 0.2em; }
.options li.hidden {display:none;}
.options li a { display: block; padding:8px 8px; background-color: #DDD; color: white; font-weight: bold;   background:url(/images/btn_bg.png) no-repeat 50% 0; }
    .disabled li a {background:url(/images/btn_cancel_bg.png) no-repeat 50%  0; cursor:default; color:#73737F;}
.options li a:hover { }
.options li a:active { background-color: #39D;    }
.options li a { border-left:  1px solid hsla( 0, 0%, 100%, 0.3 ); border-right: 1px solid hsla( 0, 0%,   0%, 0.2 ); }
.options li:first-child a { border-radius: 5px 0 0 5px; border-left: none; }
.options li:last-child a { border-radius: 0 5px 5px 0; }
.options li a.selected { background:url(/images/btn_gold_bg.png) repeat-x 50% 0; text-shadow: none; color:#21212B; }

/* Combination filter options*/

.options .option-combo { display: inline-block; float: left; margin-right: 10px; }
.options .option-combo ul { margin-right: 20px; display: inline-block; }
.options .option-combo h2,
.options .option-combo h4 { line-height: 34px; margin-bottom: 0; margin-right: 5px; display: inline-block; vertical-align: top; }

/* Color shapes */

.color-shape { width: 70px; height: 70px; margin: 5px; float: left; }
.color-shape.round { -webkit-border-radius: 35px; -moz-border-radius: 35px;      border-radius: 35px; }
.color-shape.big.round { -webkit-border-radius: 75px; -moz-border-radius: 75px;      border-radius: 75px; }
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }
.color-shape a { display: block; height: 100%; }
.color-shape a:hover { background: white; background: hsla( 0, 0%, 100%, 0.5 ); }

/**** Horizontal ****/

.horizontal #container { height: 80%; }
#copy { max-width: 640px; }

/**** Photo demo ****/

.photos .photo { width: 320px; margin: 5px; float: left; }
.photos .photo img { display: block; width: 100%; }
#content { margin-left: 210px; }
.demos #content { height: 100%; }

/**** Docs ****/

.docs #content { max-width: 640px; }
.docs #content a:hover { border-bottom: 1px dotted; }

/**** Doc page nav ****/



#site-nav { width: 200px; position: absolute; left: 10px; top: 0px; padding-top: 20px; font-size: 12px; }
#site-nav h1 { font-size: 24px; margin-bottom: 0.5em; margin-top: 0; font-weight: bold; font-family: 'Helvetica Neue', Arial, sans-serif; }
#site-nav h2 { font-size: 17px; font-weight: normal; margin: 0 0 0.3em; border-top: none; }
#site-nav h1 a { color: #4FB; }
#site-nav h1 a:hover { color: #4BF; }
#site-nav ul { list-style: none; margin: 0 0 1.0em; font-weight: bold; }
#site-nav ul ul { margin-bottom: 0; }
#site-nav ul a { display: block; border: none; padding: 1px 5px; }
#site-nav ul .current a { background: hsla( 0, 0%, 0%, 0.3 ); color: #1BF; }
#site-nav ul a:hover,
#site-nav ul .current a:hover { color: white; }
 
#site-nav ul .current .toc a { font-size: 12px; padding-left: 1.2em; font-weight: normal; }

/**** Doc content ****/

.docs #content h2 { border-top: 1px solid #333; padding-top: 0.8em; margin-bottom: 0.8em; }
.docs #content h2:target { padding: 10px; background: white; color: #222; }
.docs #content h3 { color: #FEC; background: hsla( 0, 0%, 75%, 0.05 ); padding: 2px 0.5em; margin-bottom: 0.5em; font-size: 1.15em; }
.docs #content h4 { margin-bottom: 0.5em; font-size: 14px; }


footer { font-size: 12px; font-style: italic; border-top: 1px solid #333; padding: 0.8em 0; }

pre { padding: 10px; }

pre, code { background: black; color: white; font-family: 'Monaco', monospace, sans-serif; }
#content code { font-size: 12px; }
#content pre { line-height: 1.6em; }

h3.options { padding-bottom: 0; }
.option-def dl dt,
.option-def dl dd { float: left; padding: 0 1.2em;; background: #161616; line-height: 36px; height: 36px; }
.option-def dl.header dt,
.option-def dl.header dd { background: #444; }
.option-def dl .option-type { font-size: 13px; color: #AAA; font-style: italic; }
.option-def dl dd { border-left: 1px solid #222; }

/* Tagline */

.docs .tagline { font-size: 22px; font-weight: 300; }

/* as-is from MIT */

.docs .as-is { font-size: 95%; }

/* Commercial license blurb */

.docs #commercial { background: white; padding: 10px; font-size: 14px; color: #1F1F1D; }
.docs #commercial a { font-weight: bold;}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }
code .nt { color: #A0C8FC; } /* Markup open tag */
code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */

/**** Super list ****/


/**** Sites using Isotope ****/

#sites h2 { display: none; padding: 0.4em; line-height: 32px; margin-bottom: 0.4em; -webkit-transition: background-color 0.8s; -moz-transition: background-color 0.8s;   -o-transition: background-color 0.8s;      transition: background-color 0.8s; }
#sites h2 img { display: inline-block; margin-right: 0.4em; vertical-align: bottom; }
#sites h2.loading { background: white; color: #222; }
#sites h2.error { background: red; color: #222; }


#sites ul { margin: 0; }
.super-list .example { list-style: none; float: left; width: 230px; margin: 5px; }
.super-list .example a,
.super-list .example b,
.super-list .example img { display: block; }
.super-list .example img { width: 100%; }
.super-list .example a { background: #1F1E1D; }
.super-list .example a:hover { background: white; color: #111; }
.super-list .example b { font-weight: bold; line-height: 1.3em; padding: 3px; padding-top: 8px; }
.super-list .link { float: left; position: relative; font-size: 24px; line-height: 1.2em; font-weight: 300; margin: 5px; }
.super-list .link { width: 230px; height: 110px; }
.super-list .link a { display: block; padding: 10px; padding-left: 65px; height: 90px; background: #1F1E1D; color: #FE5; -webkit-border-radius: 14px; -moz-border-radius: 14px;      border-radius: 14px; }
.super-list .link a:before { content: '➔'; font-size: 70px; position: absolute; top: 30px; left: 5px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg);   -o-transform: rotate(90deg);      transform: rotate(90deg); }
.super-list .link.away a:before { top: 25px; left: 0px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);  -ms-transform: rotate(-45deg);   -o-transform: rotate(-45deg);      transform: rotate(-45deg); }
.super-list .link a:hover { background: #E58; color: white; }
.super-list .feature .name { bottom: auto; top: 140px; left: 18px; font-size: 20px; }

/**** BIG Graph ****/

.big-graph { background: white; height: 600px; margin: 20px auto; }
.big-graph .project { width: 45px; height: 45px; float: left; }
.big-graph .project .icon { pointer-events: none; width: 31px; height: 31px; background: white; margin-left: 7px; -webkit-transition: -webkit-transform 0.25s; -moz-transition: -moz-transform    0.25s;  -ms-transition: -ms-transform     0.25s;   -o-transition: -o-transform      0.25s;      transition: transform         0.25s; }
.big-graph .project:hover { z-index: 5; }
.big-graph .project:hover .icon { -webkit-transform: scale(3); -moz-transform: scale(3);  -ms-transform: scale(3);   -o-transform: scale(3);      transform: scale(3); }
.big-graph .project.commercial .icon { background: #6B6B6B; }
.big-graph .project.urbanism .icon { background: #00CF00; }
.big-graph .project.public-space .icon { background: #FF8D00; }
.big-graph .project.culture .icon { background: #D61919; }
.big-graph .project.body-culture .icon { background: #00ECFF; }
.big-graph .project.health .icon { background: #FF2251; }
.big-graph .project.education .icon { background: #00A700; }
.big-graph .project.housing .icon { background: #FF02FF; }
.big-graph .project.hotel .icon { background: #0000C3; }
.big-graph .project.media .icon { background: #292929; }
.big-graph .project p { line-height: 14px; font-size: 10.5px; color: black; margin-left: 7px; }

/**** Infinite Scroll ****/

#infscr-loading { position: fixed; text-align: center; bottom: 30px; left: 42%; z-index: 100; background: white; background: hsla( 0, 0%, 100%, 0.9 ); padding: 20px; color: #222; font-size: 15px; font-weight: bold; -webkit-border-radius: 10px; -moz-border-radius: 10px;      border-radius: 10px; }

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }