/* Updated: 2011.6.21 ENR Author: Erik Runyon ----------------------------------------------------*/ /** * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) * v1.6.1 2010-09-17 | Authors:Eric Meyer & Richard Clark * html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 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; font-size:100%; font:inherit; vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration:line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* Font normalization inspired by YUI Library's fonts.css:developer.yahoo.com/yui/ ----------------------------------------------------*/ body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity. */ select, input, textarea, button { font:99% sans-serif; } /* Minimal base styles. ----------------------------------------------------*/ body, select, input, textarea {color:#444;} h1, h2, h3, h4, h5, h6 {margin:0 0 1.5em; font-weight:bold;} html { overflow-y:scroll; } a:hover, a:active { outline:none; } a, a:active, a:visited { color:#607890; } a:hover { color:#036; } ul, ol { margin-left:2em; } ol { list-style-type:decimal; } nav ul, nav li { margin:0; list-style:none; list-style-image:none; } small { font-size:85%; } strong, th { font-weight:bold; } td { vertical-align:top; } sub, sup { font-size:75%; line-height:0; position:relative; } sup { top:-0.5em; } sub { bottom:-0.25em; } button, input, select, textarea { margin:0; } ::-moz-selection{ background:#28a1e1; color:#fff; text-shadow:none; } ::selection { background:#28a1e1; color:#fff; text-shadow:none; } a:link { -webkit-tap-highlight-color:#28a1e1; } .clearfix:before, .clearfix:after { content:"\0020"; display:block; height:0; visibility:hidden; } .clearfix:after { clear:both; } .clearfix { zoom:1; } /* REDECLARATIONS ----------------------------------------------------*/ html {height:100%; width:100%; overflow-y:scroll; background:url(images/header.png) 0 0 repeat-x;} body {overflow:hidden; width:100%; color:#333; font:15px/2.2em Georgia, Times, "Times New Roman", serif; -webkit-font-smoothing:antialiased;} p {margin:0 0 1em;} p + p {margin:1em 0;} a {outline:none;} a:link {color:#28a1e1;} a:visited {color:#2495cd;} a:hover, a:active {color:#9b8231; outline:none;} a:link {-webkit-tap-highlight-color:#f6efd2;} strong, b {font-weight:bold;} em, i {font-style:italic;} h1,h2,h3,h4,h5,h6 {margin:1.4em 0 8px; line-height:1.1em; font-weight:bold; text-rendering:optimizeLegibility;} h1 {margin-top:0; font-size:190%;} h2 {font-size:180%;} h3 {font-size:160%;} h4 {font-size:130%;} h5 {font-size:120%;} h6 {font-size:100%;} ol,ul {margin:10px 0 10px 30px;} li {margin:3px 0;} table {width:100%; margin:10px 0 20px; border-collapse:collapse;} th {color:#fff; background-color:#0d4b7c;} th, td {padding:4px 8px; border:1px solid #dadada;} td, td img {vertical-align:top;} sup {vertical-align:super; font-size:smaller;} sub {vertical-align:sub; font-size:smaller;} pre, code, kbd, samp {font-family:monospace, sans-serif;} button {width:auto; overflow:visible;} figcaption {display:block; text-align:center; font-family:Helvetica, Verdana, Arial, sans-serif;} figcaption span {color:#f3c72e;} .img-right {float:right; margin:0 0 0 15px;} .img-left {float:left; margin:0 15px 0 0;} /** Pin Styles **/ #sherpind {height:100%; position:fixed; right:0; top:0; z-index:1400; margin:0; padding:0; font-size:14px; list-style:none;} #sherpind li {position:absolute; right:0; top:0; width:39px; margin:-19px 0 0; cursor:pointer; color:#fff; text-shadow:1px 1px 2px #000;} #sherpind li.hover {z-index:1000; width:239px; height:auto; padding:0;} #sherpind .marker {position:relative; z-index:100; height:19px; background:url("images/sherpind-bars.png") 0 0 no-repeat;} #sherpind li.hover .marker {background-position:0 -29px;} #sherpind li.hover.pinup .marker {background-position:0 -58px;} #sherpind .content {display:none; z-index:0; width:204px; margin:-19px 13px 0 0; padding:29px 10px 10px; border:1px solid #000; -moz-border-radius:6px; border-radius:6px; background:url(images/sherpind-bg.png) 0 0 repeat;} #sherpind li.hover .content {display:block;} #sherpind li.pinup .content {padding:10px 10px 29px;} #sherpind li .tease {float:left; margin:3px 10px 0 0;} #sherpind li .tease img {max-width:50px; max-height:50px; border:1px solid #fff;} #sherpind li .title {font-weight:bold; font-size:100%;} #sherpind li .snippet {font-size:90%; line-height:1.2em;} #sherpind.dark-gray .marker {background-position:0 -87px;} #sherpind.dark-gray li.hover .marker {background-position:0 -116px;} #sherpind.dark-gray li.hover.pinup .marker {background-position:0 -145px;} #sherpind.blue .marker {background-position:0 -783px;} #sherpind.blue li.hover .marker {background-position:0 -812px;} #sherpind.blue li.hover.pinup .marker {background-position:0 -841px;} #sherpind.gold .marker {background-position:0 -1479px;} #sherpind.gold li.hover .marker {background-position:0 -1508px;} #sherpind.gold li.hover.pinup .marker {background-position:0 -1537px;} /********************************************************************************************************* Screen Styles *********************************************************************************************************/ @media screen,projection { /* STRUCTURE ----------------------------------------------------*/ body {position:relative;} #skip-links { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; } #skip-links:active, #skip-links:focus { clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto; } #student {position:absolute; top:50px; right:0; width:100%; height:466px; background:url(images/student-new.png) top center no-repeat;} .ie6 #student {display:none;} #content {} .bug-hutd {float:right; width:104px; margin-right:-165px; line-height:1.6em; text-align:center; font-size:10px; font-weight:bold; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;} .bug-hutd a {display:block; width:104px; height:73px; text-indent:-9999px; overflow:hidden; background:url(images/bug-home-under-the-dome.png) 0 0 no-repeat;} .bug-hutd a:hover {background-position:-104px 0;} /* HEADER ----------------------------------------------------*/ #header {display:block; position:relative; width:100%; height:269px; font-family:Georgia, Times, "Times New Roman", serif;} #header h2 {margin:0; padding:0; font-size:12px; text-transform:uppercase; letter-spacing:3px; font-weight:normal;} #header h2 a {display:block; width:300px; height:50px; margin:0; border:none; color:#f0f0f0; font-weight:bold; text-decoration:none; text-indent:-9999px; overflow:hidden; background:url(images/university-of-notre-dame.png) 0 0 no-repeat;} #header h1 {float:left; clear:both; width:511px; height:177px; margin:19px 0 0; padding:0; text-indent:-9999px; overflow:hidden; background:url(images/header-h1.png) 0 0 no-repeat;} a.indepth {position:absolute; right:0; top:50px; display:block; width:auto; height:auto; padding:0 12px; color:#fff; font-size:12px; text-decoration:none; background-color:#282828; border:1px solid #4a4a4a; border-width:0 1px 1px; font-family:Helvetica, Verdana, Arial, sans-serif; -moz-border-radius-topleft:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; } .indepth b {color:#ebd69c;} .indepth:hover {background-color:#333;} /********************************************************************************************************* Story Styles *********************************************************************************************************/ #no-textbook-required, #other-dome, #tech-track, #going-seamless, #technology-on-the-quad, #hacking-the-wii, #tech-track {overflow:hidden;} #header {width:960px; margin:0 auto; padding:0;} .story {overflow:hidden; width:960px; margin:0 auto; padding:50px 0;} .story h2 {height:80px; margin:40px 0 50px; text-indent:-9999px; background:url(images/story-headers.png) 0 0 no-repeat;} #going-seamless h2 {background-position:0 -80px;} #hacking-the-wii h2 {height:87px; background-position:0 -160px;} #technology-on-the-quad h2 {background-position:0 -250px;} #other-dome h2 {height:73px; background-position:0 -330px;} #small-world h2 {background-position:0 -406px;} #tech-track h2 {background-position:0 -484px;} #no-textbook-required, #other-dome, #tech-track {color:#fff; text-shadow:1px 1px 1px #000; filter:dropshadow(color=#000000, offx=1, offy=1); background:url(images/texture-gray.png) 0 0 repeat;} #going-seamless, #technology-on-the-quad {background-color:#ece2d5;} #hacking-the-wii, #tech-track {background-color:#fff;} /* No Textbook Required ----------------------------------------------------*/ #no-textbook-required-inner {background:url(images/divider-gray-beige.png) bottom left repeat-x;} #no-textbook-required .youtube {float:right; margin:10px -80px 10px 15px;} #no-textbook-required .story {position:relative; width:800px; padding:8px 160px 80px 0;} #no-textbook-required p {margin-left:128px;} #ipad {float:left; clear:left; margin:30px 20px 0 -10px;} #ipad figcaption {width:150px; margin:-56px 0 0 47px; font-size:12px; line-height:1.2em; text-align:left;} #ipad-graph {margin:30px 0 30px 99px;} #ipad-graph figcaption {margin-right:30px; padding-right:16px; font-size:90%; text-align:right; background:url(images/arrow.png) right center no-repeat;} #angst {position:absolute; right:0; bottom:27px;} .ie6 #angst {display:none;} /* Going Seamless ----------------------------------------------------*/ #going-seamless {background:#ece2d5 url(images/divider-beige-white.png) bottom left repeat-x;} #kraemer {float:right; margin:-45px 40px 0 0;} #going-seamless p {width:576px; margin-left:128px;} #going-seamless blockquote {margin:10px 160px 10px 70px; padding:20px 150px 20px 20px; color:#fff; line-height:1.6em; font-family:Helvetica, Verdana, Arial, sans-serif; font-weight:bold; background:url(images/bq.png) 0 0 repeat; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0px 4px 4px #666; -moz-box-shadow:0px 4px 4px #666; box-shadow:0px 4px 4px #666;} #going-seamless cite {display:block; width:90%; padding-right:16px; font-size:85%; font-weight:normal; text-align:right; background:url(images/arrow.png) right center no-repeat;} /* Hacking the Wii ----------------------------------------------------*/ #hacking-the-wii {background:#fff url(images/divider-white-beige.png) bottom left repeat-x;} #hacking-the-wii p {width:580px; margin:0 0 1em 120px;} #wii-controller {margin-top:-140px;} /* Technology on the Quad ----------------------------------------------------*/ #technology-on-the-quad {background:#ece2d5 url(images/divider-beige-gray.png) bottom left repeat-x;} #technology-on-the-quad p {width:700px; margin-left:128px;} #technology-on-the-quad .col {float:left; display:inline; width:218px; margin-right:22px;} #technology-on-the-quad .col.alpha {margin-left:128px;} #technology-on-the-quad .col h3 {margin:8px 0 0.5em; font-size:120%; font-family:Helvetica, Verdana, Arial, sans-serif;} #technology-on-the-quad .col p {width:100%; margin:0;} a.lightbox {display:block;} a.lightbox img {background:url(images/plus.png) top right no-repeat;} /* The Other Dome ----------------------------------------------------*/ #other-dome .story {padding-bottom:55px;} #other-dome-inner {background:url(images/divider-gray-white.png) bottom left repeat-x;} #other-dome h2 {position:relative; z-index:100;} #other-dome-content {position:relative; min-height:1150px; margin-top:-59px; background:url(images/dome-bg.jpg) 0 0 no-repeat;} #skip5 {margin:60px 5px 0;} .col1, .col2 {float:left; display:inline; /* width:400px; */ width:700px; padding:10px;} .col1 {padding-top:60px; background:url(images/dome-text-backer.png) 0 0 repeat;} .col2 {position:relative;} #other-dome .youtube {float:left; margin:9px 15px 0 0;} #other-dome aside {position:absolute; top:820px; right:30px; width:190px; margin:0; font-size:80%; line-height:1.6em; font-family:Helvetica, Verdana, Arial, sans-serif;} #other-dome aside h4 {} #other-dome aside p {} #other-dome p {} #other-dome figcaption {position:absolute; right:25px; bottom:25px; width:200px; font-size:90%; text-align:right; line-height:1.4em; text-shadow:1px 1px 1px #000; filter:dropshadow(color=#000000, offx=1, offy=1);} /* Its a Small World After All ----------------------------------------------------*/ #small-world {background:#fff url(images/divider-white-gray.png) bottom left repeat-x;} #small-world p {width:700px; margin-left:128px;} #small-world .youtube {float:right; margin-right:72px;} #webcam {width:100%; height:453px; margin-bottom:-144px; background:url(images/webcam.jpg) 0 0 no-repeat;} /* Tech Track ----------------------------------------------------*/ #tech-track p {width:700px; margin-left:128px;} /* Comments ----------------------------------------------------*/ #comments {padding:30px 0; color:#fff; background-color:#000;} #comments h3 {margin:0;} /* Skip Links */ .skip {float:left; display:block; width:110px; height:75px; margin:0 10px 10px 0; text-indent:-9999px; overflow:hidden; background:url(images/next.png) 0 0 no-repeat;} #skip2 {background-position:0 -75px;} #skip3 {background-position:0 -149px;} #skip4 {background-position:0 -223px;} #skip5 {background-position:0 -297px;} #skip6 {background-position:0 -371px;} #skip7 {background-position:0 -445px;} #footer {overflow:hidden; background-color:#000;} #footer-inner {overflow:hidden; width:960px; margin:30px auto;} #mark {float:right; display:block; width:158px; height:37px; background:url(images/und.gif) 0 0 no-repeat;} #mark img {display:none;} /* Lightbox ----------------------------------------------------*/ #lightbox {position:absolute; left:0; width:100%; z-index:100; text-align:center; line-height:0;} #lightbox a img {border:none;} #outerImageContainer {position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto;} #imageContainer {padding:10px;} #loading {position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0;} #hoverNav {position:absolute; top:0; left:0; height:100%; width:100%; z-index:10;} #imageContainer>#hoverNav {left:0;} #hoverNav a {outline:none;} #prevLink, #nextLink {width:49%; height:100%; background:transparent url(images/lb-blank.gif) no-repeat; /* Trick IE into showing hover */ display:block;} #prevLink {left:0; float:left;} #nextLink {right:0; float:right;} #prevLink:hover, #prevLink:visited:hover {background:url(images/lb-prev.gif) left 50% no-repeat;} #nextLink:hover, #nextLink:visited:hover {background:url(images/lb-next.gif) right 50% no-repeat;} /*** START : next / previous text links ***/ #nextLinkText, #prevLinkText {color:#FF9834; font-weight:bold; text-decoration:none;} #nextLinkText {padding-left:20px;} #prevLinkText {padding-right:20px;} /*** END : next / previous text links ***/ /*** START : added padding when navbar is on top ***/ .ontop #imageData {padding-top:5px;} /*** END : added padding when navbar is on top ***/ #imageDataContainer {font:10px Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em;} #imageData {padding:0 10px;} #imageData #imageDetails {width:70%; float:left; text-align:left;} #imageData #caption {font-weight:bold;} #imageData #numberDisplay {display:block; clear:left; padding-bottom:1.0em;} #imageData #bottomNavClose {width:66px; float:right; padding-bottom:0.7em;} #imageData #helpDisplay {clear:left; float:left; display:block;} #overlay {position:absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; display:none;} .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} * html>body .clearfix {display:inline-block; width:100%;} * html .clearfix {/*Hides from IE-mac \*/ height:1%;/* End hide from IE-mac */} #lightboxIframe {display:none;} } /********************************************************************************************************* Media Queries *********************************************************************************************************/ /** * Media queries for responsive design. * * These follow after primary styles so they will successfully override. */ @media all and (orientation:portrait) { #student {left:245px; right:auto;} } @media all and (orientation:landscape) {} @media only screen and (min-device-width:768px) and (max-device-width:1024px) { #sherpind {display:none;} } /* iPads (portrait) ----------- */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { html, body, header {min-width:960px;} html {float:left; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;} body {float:left;} #content {float:left;} } /** * Print styles. */ @media print { .skip, .youtube, #angst, #sherpind, #skip-links {display:none;} * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; } /* Black prints faster:sanbeiji.com/archives/953 */ a, a:visited { color:#444 !important; text-decoration:underline; } abbr[title]:after { content:" (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; } /* Don't show links for images, or javascript/internal links. */ pre, blockquote {margin:15px; padding:15px; border:1px solid #999; page-break-inside:avoid; } thead { display:table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside:avoid; } @page { margin:0.5cm; } p, h2, h3 { orphans:3; widows:3; } h2, h3{ page-break-after:avoid; } #header {display:block; position:relative; width:100%; height:116px; font-family:Georgia, Times, "Times New Roman", serif; border-bottom:1px solid gray;} #header h3 {float:left;} #header h3 i, #header h2 i {text-transform:none;} #header h3 img {display:none;} #header h2 {float:right;} #header h3, #header h2 {margin:13px 0; padding:0; font-size:12px; text-transform:uppercase; letter-spacing:3px; font-weight:normal;} #header h3 a, #header h2 a {margin:0; border:none; color:#f0f0f0; font-weight:bold; text-decoration:none;} #header h2 a:hover {color:#f6efd2;} #header h1 {float:left; clear:both; margin:18px 0 0; padding:0; font-size:160%;} #header h1 a {display:block; margin:0; width:700px; border:none; color:#fed755; text-decoration:none; line-height:1em; font-size:170%; font-weight:normal;} .story a[href]:after { content:" (" attr(href) ")"; font-size:11px;} #ipad {float:left; margin:0 15px 15px 0;} #kraemer {float:right; margin:0 0 15px 15px;} #going-seamless cite {display:block;} #technology-on-the-quad img {float:right; margin-left:20px;} }