/** * 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} /* 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} .mobile .table td{border-bottom:1px solid #707070} /* images */ a img,img{border:0}.graph{margin:.8em 0 3em} figure{margin:1em 0}figcaption{display:block;padding:5px 0;width:94%;margin:-5px 0;background:#fff;color:#444;font-size:80%;text-align:left} figcaption a,#problem figcaption a,#solution figcaption a{font-weight:bold;color:#000} /* #header */ #header{width:920px;margin-top:36px} #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:960px;margin:0;padding:9px 0 0;background:#fff;font-size:138%;font-weight:bold} .web #menu{height:120px;overflow:hidden} .mobile #menu{font-size:262%;margin:0 0 10px} #menu ul{text-align:left;width:960px;background:#fff;list-style-type:none;line-height:1} #menu li{display:block;margin:0 1px 0 0;background:#fff} .web #menu li{float:left;height:90px;width:239px} .mobile #menu li{width:960px;margin:0 0 10px} #menu a{display:block;min-width:80%;height:100%;background:#fff;padding:47px 0;text-indent:20px} .mobile #menu a{padding:1em 0} .mobile #menu a:before{content:" / "} .mobile #menu .current a:after{content:" - current page";color:#ddd} .mobile #menu .current .shape{display:none} /* 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{display:none} .web #toc{display:block;float:left;width:240px;margin:10px auto 0} #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;width:460px;float:none;background:#444;color:#e30380} .web #intro_toc{height:240px} #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:focus,#intro_toc a:hover{color:#fff} .mobile #intro_toc{clear:both;width:960px;margin-left:0;font-size:162%} /* #main */ #main{float:left;width:700px;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} /* containers inside #main */ #upper{width:960px} /* Set the default size for the #upper content to be the full width. */ .web #upper{width:700px;margin-left:20px} /* On the .web (not .mobile) shrink the #upper content to make room for the #toc */ #lower{width:960px} /* Set the default size for the #lower content to be the full width. */ .web #lower{width:960px;position:relative;left:-260px} /* Shift full-width content into the right place. */ .web #upper .breakout{width:960px;position:relative;left:-260px} /* Force full width for the .breakout class. */ #intro #main{width:960px} /* special case for homepage */ #intro_header{width:679px;border-left:1px solid #fff;float:right} /* special case for homepage */ .mobile #intro_header{width:920px;border:0} /* #design */ #design{margin:0 0 1px;width:200px;height:90px;padding:20px 19px 20px 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} .mobile #design{display:none} /* 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}#commute h3 a{color:#fff} .web #commute {background-image:url(../image/4892006174_9a3eedb670_remix2.png)} #home_favs{color:#000;background:#cf0}#home_favs h3 a{color:#202020} .web #home_favs{background-image:url(../image/103180695_d9f9240321_o_remix2g.png)} #top_electronic_genre_music_stores{width:960px} .video-container{margin-bottom:.5em} /* Highlighted text. Note: cannot group :: rules. ( Props to Paul Irish - youtu.be/qyM37XKkmKQ ) */ ::selection{background:#707070;color:#fff} ::-moz-selection{background:#707070;color:#fff} #intro ::selection{background:#e30380;color:#fff} #intro ::-moz-selection{background:#e30380;color:#fff} #problem ::selection{background:#09c;color:#fff} #problem ::-moz-selection{background:#09c;color:#fff} #solution ::selection{background:#f36;color:#fff} #solution ::-moz-selection{background:#f36;color:#fff} #conclusions ::selection{background:#ff3;color:#444} #conclusions ::-moz-selection{background:#ff3;color:#444} /* #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 */ /* 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;margin:10px 0;clear:both} .web #cover{height:240px} #logos a{width:240px;height:240px;margin:0 10px 0 0;float:left} .mobile #logos a{width:479px;height:479px;margin:0 1px 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)} .mobile #inholland,.mobile #two_am{background-size:479px} #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} .zero,#conclusions article,#section_4-1,#section_5-1{width:700px;position:relative;left:260px} */ /* #footer (sprite) */ #footer{width:960px;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:focus,#bas:hover{background-position:-1440px 0} #cc{background-position:-240px 0}#cc:focus,#cc:hover{background-position:-960px 0} #html5{background-position:-480px 0}#html5:focus,#html5:hover{background-position:-1200px 0} #navlink{background-position:-720px 0}#navlink:focus,#navlink:hover{background-position:-1680px 0} #solution #bas{background-position:0 -240px}#solution #bas:focus,#solution #bas:hover{background-position:-1440px -240px} #solution #cc{background-position:-240px -240px}#solution #cc:focus,#solution #cc:hover{background-position:-960px -240px}#cc strong{text-transform:uppercase} #solution #html5{background-position:-480px -240px}#solution #html5:focus,#solution #html5:hover{background-position:-1200px -240px} #solution #navlink{background-position:-720px -240px}#solution #navlink:focus,#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}.web .lead{font-size:162%;color:#444;padding:0 32px} .web .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} .web .w80{width:80%}.web .w66{width:640px}.web .w50{width:50%}.web .w440{width:440px}.web .w45{width:45%}.web .w40{width:40%}.web .w33{width:320px}.web .w30{width:30%}.web .w25{width:25%}.web .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{display:none} /* display on .web only (not .mobile) */ .web #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} /* maybe needed .web.lte9 #userbar{margin-left:240px} IE fix */ .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;font-size:12px} /* set small font size for alt text */ #share-buttons a{color:#444} .fb_like,.twitter{float:left} } /* Browser-specific fixes */ /* maybe needed .web.lte9 #footer{margin-left:240px} .firefox #welcome header,.ie #welcome header,.safari welcome header,.opera #welcome header{clear:both;margin-top:-26px !important} */