/** * Author: Ryan Van Etten * Author URI: http://ryanvanetten.com * Custom stylesheet for Bas Grasmayer's bachelor's thesis "The Answer Is The Ecosystem." * Color scheme inspired by the video "Further" by The Chemical Brothers, slap bracelets, the YouTube Generation, and a random magazine that got mailed to the wrong address. */ /* container */ body{width:960px;margin:0 auto;padding:0 10px;color:#666;font:normal 18px Arial,sans-serif} /* elements */ h4,.h4,h5,h6,p,ul,ol,table,div.vcard{margin:1em 0}h5,h6{font-size:100%} header{font-weight:normal;margin-top:36px;padding:20px;color:#fff;line-height:1;text-align:left}/* Applies to all headers. Use #header to style main header. */ h1{font-size:361%;line-height:1}h2,article h1,h3,.h3{font-size:162%}header h3{font-size:138%;padding:6px 0 0} article section{width:960px} article{margin:-36px 0 36px;padding:36px 0 0} /* prevent #userbar from covering jumps */ article h2,article h3,article .h3,article h4,article .h4{padding-top:1em !important;padding-bottom:1em !important;margin-top:-1em !important;margin-bottom:-1em !important} /* highlighted text */ ::selection,::-moz-selection{background:#707070;color:#fff} /* links */ a{color:#09c} /* blue */ a,h1 a,h2 a,h3 a,.h3 a{text-decoration:none;outline:none}a:hover{} #intro article a{color:#e30380} /* inHolland magenta */ #solution article a{color:#f36} /* pink */ #intro article a:hover,#solution article a:hover,article a:hover{color:#000} /* lists, tables, quotes */ li{margin:0 0 1em}ul{list-style-type:square;margin:0 0 1em} section ul,section ol{padding:0 0 0 1em}article ul{margin:1em}ol{margin:1em 0 1em 1em}.none{list-style-type:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.single-space{line-height:1}.inline li{display:inline;padding:0 .33em 0 0} em,i{font-style:italic}blockquote{margin:0 90px}blockquote.wide{margin:0 15px} .table{padding:3em 12px;color:#444;margin:-1em 0}.table h4,td,th{padding:8px;text-align:left}td{font-size:110%}th{font:bold 110% Arial,sans-serif;text-transform:uppercase}.table h4 a{color:#444} /* images */ a img,img{border:0}.graph{margin:.8em 0 3em} figure{margin:1em 0}figcaption{display:block;padding:5px 3%;width:94%;margin:-5px 0;background:#888;color:#fff;font-size:73%;text-align:left} figcaption a,#problem figcaption a,#solution figcaption a{font-weight:bold;color:#000} /* #header */ #title{font-size:160px;line-height:.75} #subtitle{font-size:68px;line-height:.75} #title a,#subtitle a{color:#fff;display:block;width:100%;padding:20px 0} #byline{font-size:42px;padding:0 0 10px}#byline a{color:#202020}#byline a:hover{color:#444} /* page-specific
colors */ #intro header{background:#888;color:#444} #problem header{background:#09c;color:#fff} #solution header{background:#f36;color:#fff} #conclusions header{background:#ff0;color:#888} #intro header a{color:#fff} #conclusions header a{color:#444} /* navs */ /* #menu */ #menu header{display:none} #menu{width:100%;height:120px;overflow:hidden;margin:0;padding:9px 0 0;background:#fff;font-size:138%;font-weight:bold} #menu ul{text-align:left;width:960px;background:#fff;list-style-type:none;line-height:1} #menu li{height:90px;width:239px;float:left;display:block;margin:0 1px 0 0;background:#fff} #menu a{display:block;width:100%;height:100%;background:#fff;padding:47px 0;text-indent:20px} /* page-specific menu colors */ #intro #menu a{color:#fff;background:#888} #problem #menu a{color:#fff;background:#09c} #solution #menu a{color:#fff;background:#f36} #conclusions #menu a{color:#444;background:#ff0} /* nav rollovers */ .current a{background:#fff !important;color:#707070 !important} a:hover .nav-item-name{display:none} a .nav-item-desc{display:none}a:hover .nav-item-desc{display:block} /* shapes - triangles, etc. */ .shape:before{content:" "} .shape:after{content:" "} a:hover .shape{color:#000} /* #toc */ #toc{float:left;margin:10px 0;width:240px} #toc ul{list-style-type:none}#toc li{margin:0 0 1px} #toc a{display:block;padding:20px;color:#fff} #conclusions #toc a{color:#000} #intro article header{background:#888} #problem #toc a,#problem article header{background:#09c} #solution #toc a,#solution article header{background:#f36} #conclusions #toc a,#conclusions article header{background:#ff0} #toc a:hover{background:#707070 !important} #toc a:hover strong{color:#fff} #toc header,#main header{margin:0 0 1px;font-size:138%;line-height:.62} #toc header,#section-header{height:90px} #toc header h2{padding-top:20px;font-size:262%;text-transform:uppercase} #intro_toc{margin-left:500px;height:240px;width:460px;float:none;background:#444;color:#e30380} #intro_toc ul{margin:0;padding:30px 0 0} #intro_toc h4{display:none} #intro_toc li{list-style-type:square;margin:5px 0 5px 60px} #intro_toc a{color:#e30380}#intro_toc abbr{text-transform:uppercase} #intro_toc a:hover{color:#fff} /* #main */ #main{width:700px;float:right;padding:10px 0 30px;text-align:justify;line-height:1.5} article header{display:block;padding:20px;margin:0} article header a{color:#000 !important}.zero article header a{color:#000} article header a strong{color:#fff} #problem article,#solution header,#conclusions article{clear:both} #conclusions article header a{color:#888} #conclusions article header a strong{color:#444} /* Creative */ .block-party{margin:1em 0;padding:32px 16px 32px;color:#333}.block-party p,.block-party h4{line-height:1;font-size:110%} .block-party h3{border-left:2em solid #fff;padding:.25em 0 .25em .67em !important;margin:12px 0 !important}.block-party h3 a{color:#fff} .block-party a,.block-party p a{color:#fff !important}.block-party p a:hover{color:#fff !important} .block-party .steplink{color:#333 !important} strong.block-party{border-left:20px solid #fff;padding:0 0 0 10px} #problem .block-party{background:#09c} #solution .block-party{background:#f36} .poster{padding:40px 20px;margin:1em 0}.poster ol{font-size:162%}.poster small{font-size:90%} #commute{color:#fff;background:#000 url(../image/4892006174_9a3eedb670_remix2.png)}#commute h3 a{color:#fff} #home_favs{color:#000;background:#fff url(../image/103180695_d9f9240321_o_remix2g.png)}#home_favs h3 a{color:#202020} .video-container{margin-bottom:.5em} /* #intro - grid, image rollovers */ #intro article{clear:both;margin-top:-36px !important;margin-bottom:36px !important;padding-top:37px !important} /* prevent #userbar from covering jumps */ /* #design */ #design{float:left;margin:10px 0 1px;width:200px;height:90px;padding:20px;background:#888;color:#fff} #design h4{font-size:26px;padding:0 0 10px;margin:.25em 0}#design a{color:#202020}#design a:hover{color:#444} /* non-hover */ .roll h1,#logos h2,#logos h3{display:none} /* These headers are in the HTML for semantic outlining, searchbots, and braille readers. */ .roll a{display:block;text-indent:-9999em;float:left;background-repeat:no-repeat} /* default for all image rollovers */ #cover{width:960px;position:relative;left:-260px;height:240px} #logos a{width:240px;height:240px;margin:0 10px 0 0;float:left} #grid a{width:239px;height:135px;margin:0 1px 20px 0} #grid .feature{width:479px;height:270px} #inholland{background-image:url(../image/inholland-inh-logo-240-magenta.png)} #two_am{background-image:url(../image/two-am-logo-240-white.png)} #grid{clear:both} #grid-1{background-image:url(../image/thumb/01.png)} #grid-2{background-image:url(../image/thumb/01.png)} #grid-3{background-image:url(../image/thumb/01.png)} #grid-4{background-image:url(../image/thumb/01.png)} #grid-5{background-image:url(../image/thumb/01.png)} #grid-6{background-image:url(../image/thumb/01.png)} /* :hover */ .roll a:hover{background:#000;color:#fff;background-image:none;text-indent:0;padding:20px}.roll a:hover .triangle{color:#fff} .excerpt,.thesis-info{margin:0;text-align:left} .thesis-info{font-size:18px;line-height:1.25} /*hover size is 20px less than non-hover due to 20px padding in .roll a:hover*/ #logos a:hover {width:200px;height:200px;background:#fff;color:#444}#two_am a:hover{background:#000;color:#fff} #grid a:hover {width:199px;height:95px;background:#000;color:#fff} #grid .feature:hover {width:439px;height:230px} /* #conclusions */ .citations{font-size:73%;margin:1em;text-align:left} .appendix article p,.appendix article ul{font-size:81%}#survey{padding:0 20px;border-left:20px solid #ff0} /* Keep #main content slim until we get below the #toc */ article,#section_4-1 .breakout,#grid{width:960px;position:relative;left:-260px} .zero,#conclusions article,#section_4-1,#section_5-1{width:700px;left:0} /* #footer (sprite) */ #footer{clear:both;background:#fff;color:#444} #footer p.roll{padding:0;margin:0} #usage,#basbasbas,#code,#navlinks{float:left;line-height:1;width:240px} #bas,#cc,#html5,#navlink{display:block;width:180px;height:180px;padding:30px;background-image:url(../image/sprite/bas_footer_sprite.png)} #bas{background-position:0 0}#bas:hover{background-position:-1440px 0} #cc{background-position:-240px 0}#cc:hover{background-position:-960px 0} #html5{background-position:-480px 0}#html5:hover{background-position:-1200px 0} #navlink{background-position:-720px 0}#navlink:hover{background-position:-1680px 0} #solution #bas{background-position:0 -240px}#solution #bas:hover{background-position:-1440px -240px} #solution #cc{background-position:-240px -240px}#solution #cc:hover{background-position:-960px -240px}#cc strong{text-transform:uppercase} #solution #html5{background-position:-480px -240px}#solution #html5:hover{background-position:-1200px -240px} #solution #navlink{background-position:-720px -240px}#solution #navlink:hover{background-position:-1680px -240px} #bas2,#graph_folder,#source{text-align:center;padding:30px;clear:both;background:#fff;min-height:1em} #bas2 a,#graph_folder a,#source a,#wid2 a{color:#09c} #solution #bas2 a,#solution #graph_folder a,#solution #source a,#solution #wid2 a{color:#f36} /* Helper classes */ .reverse,.reverse p a{background:#202020 !important;color:#fff !important}.reverse p a:hover{color:#f0f0f0 !important} .left{float:left}.alignleft{float:left;margin:16px 16px 16px 0}.mtop0{margin-top:1px} .right{float:right}.alignright{float:right;margin:16px 0 16px 16px} .clear{clear:both}.center,.max{margin-left:auto;margin-right:auto}.aligncenter{text-align:center}.drop{margin-top:20px} .indent{padding:0 0 0 1em}.lead{font-size:162%;color:#444;padding:0 32px} .huge{font-size:162%;color:#444}small,.small{font-weight:normal;font-size:73%} .upper{text-transform:uppercase}.lower{text-transform:lowercase}.yang{text-align:right}.yin .huge,.yang .huge{color:#fff} .m0{margin:0 !important}.vertical{margin-top:1em !important;margin-bottom:1em !important}.baseline{margin-top:0 !important} .w80{width:80%}.w66{width:640px}.w50{width:50%}.w440{width:440px}.w45{width:45%}.w40{width:40%}.w33{width:320px}.w30{width:30%}.w25{width:25%}.w20{width:20%} /*.blackbox{margin-top:15px;min-height:284px;background:#000}*/ .hidden{display:none} /* Fix margin for headers that start
's */ #loss_of_control,#feels_like_free_conclusion,#music_like_water_conclusion,#new_channels{margin-top:0 !important} /* Styles for media types. More of these come later in responsive.css */ @media print{#userbar{display:none}} @media braille{#menu header{display:block}} @media screen{ /* #userbar - To speed up page loading, I put the HTML for this in the footer and used position:fixed to place it at the top of the page. */ #userbar{background:#888;z-index:2;display:block;position:fixed;top:0;margin:0 auto 0 0;width:240px;height:30px;font-size:24px;padding:2px 0 4px} .top{float:left;width:135px;font-weight:bold} .top a{color:#fff;background:#888;display:block;width:100%;padding:2px 0} #problem #userbar,#problem .top a{background:#09c} #solution #userbar,#solution .top a{background:#f36} #conclusions #userbar,#conclusions .top a{background:#ff0;color:#666} #share-buttons{float:left;height:30px;margin:6px 1px 0} .fb_like,.twitter{float:left} }