/* Updated: 2011.9.1 ENR Author: Erik Runyon ----------------------------------------------------*/ @font-face {font-family:GalaxiePolaris; src:url('/assets/fonts/GalaxiePolaris-Book.otf');} @font-face {font-family:GalaxiePolarisBold; src:url('/assets/fonts/GalaxiePolaris-Bold.otf');} /** * 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; clear:both; 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%; margin:0; padding:0; overflow-y:scroll;} body {overflow:hidden; width:100%; margin:0; padding:0; 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; color:#333; line-height:1.1em; font-weight:bold; text-rendering:optimizeLegibility; font-family:"Adobe Garamond Pro", Garamond, Georgia, Times, "Times New Roman", serif;;} h1 {margin-top:0; font-size:260%;} h2 {margin:0 0 2px; font-size:240%; text-shadow:0 1px 1px #fff;} 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;} iframe {max-width:100%; border:none;} figure {} figure, aside.right, figure.right {float:right; width:224px; margin:0 0 10px 25px;} aside.right p {} figure.left {float:left; width:224px; margin:0 25px 10px 0;} figure img {} figcaption {display:block; margin:0; padding:0; text-align:left; line-height:1.5em; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;} figcaption h2 {margin:0 0 1em;} figcaption p {} blockquote {margin:20px 0; color:#0d407a;} blockquote p {margin:0; line-height:2em; font-size:110%; font-weight:bold; font-family:GalaxiePolaris, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;} blockquote.pull {float:right; width:29.16666667%; margin:4.166666667%; color:#07427e; font-size:200%;} blockquote.pull p {line-height:1.2em;} blockquote.pull footer {margin:20px 15px; color:#333; font-size:50%; font-weight:bold; line-height:1.4em; font-family:Georgia, Times, "Times New Roman", serif;} blockquote.pull footer i {display:block; font-weight:normal;} /* IMAGES ----------------------------------------------------*/ img {max-width:100%; -ms-interpolation-mode:bicubic; border:none;} .ie6 .ndmark {width:100%;} img, img.right, img.left, img.center {line-height:0;} .default {position:relative; margin:10px 5% 10px 0 /* 10px 20px 10px 0 */;} .right {float:right; margin:5px 0 20px 5% /* 5px 0 20px 20px */;} .left {float:left; margin:5px 5% 20px 0 /* 5px 20px 20px 0 */;} .center {text-align:center;} .default a, .right a, .left a {display:block; text-decoration:none; border:none;} /* Author: Erik Runyon Copyright 2011 University of Notre Dame https://www.nd.edu/copyright/ ----------------------------------------------------*/ #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 {display:block; font-weight:bold; font-size:100%; line-height:1.2em;} #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;} /********************************************************************************************************* Screen Styles *********************************************************************************************************/ @media screen,projection { /* STRUCTURE ----------------------------------------------------*/ body {/* position:relative; background:url(images/body.png) 0 0 repeat-x; */background:url(images/brand-bar.png) 0 0 repeat-x;} #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; } #wrapper {background:url(images/header.jpg) center 52px no-repeat;} #content {} /* HEADER ----------------------------------------------------*/ #header {display:block; position:relative; max-width:940px; height:438px; margin:0 auto; padding:0; font-family:Georgia, Times, "Times New Roman", serif;} #header h2 {margin:0; padding:0; font-size:15px; text-transform:uppercase; letter-spacing:3px; font-weight:normal; font-family:"Adobe Garamond Pro", Garamond, Georgia, Times, "Times New Roman", serif;} #header h2 i {text-transform:none; font-weight:normal;} #header h2 a {display:block; width:100%; height:50px; margin:0; border:none; color:#fff; font-weight:bold; text-decoration:none; text-indent:-9999px; overflow:hidden; background:url(/assets/css/images/university-of-notre-dame.png) 0 0 no-repeat;} #header h2 a:hover {color:#f6efd2;} #header h1 {clear:both; width:100%; height:auto; margin:0; padding:0; text-indent:-9999px; overflow:hidden;} .ie6 #header, .ie6 .story, .ie6 #footer-inner {width:940px;} a.indepth {position:absolute; left:0; bottom:0; display:block; width:auto; height:auto; padding:9px 16px; line-height:1em; color:#fff; font-size:12px; text-decoration:none; border:1px solid #4a4a4a; border-width:0 1px 1px; font-family:Helvetica, Verdana, Arial, sans-serif; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; background:#333; background:-moz-linear-gradient(top, #333 0%, #1a1a1a 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#1a1a1a)); background:-webkit-linear-gradient(top, #333 0%,#1a1a1a 100%); background:-o-linear-gradient(top, #333 0%,#1a1a1a 100%); background:-ms-linear-gradient(top, #333 0%,#1a1a1a 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#1a1a1a',GradientType=0 ); background:linear-gradient(top, #333 0%,#1a1a1a 100%); } a.indepth b {color:#ebd69c;} a.indepth:hover { background:#222; background:-moz-linear-gradient(top, #444 0%, #222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222)); background:-webkit-linear-gradient(top, #444 0%,#222 100%); background:-o-linear-gradient(top, #444 0%,#222 100%); background:-ms-linear-gradient(top, #444 0%,#222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); background:linear-gradient(top, #444 0%,#222 100%); } /********************************************************************************************************* Story Styles *********************************************************************************************************/ #archive {margin:0 0 30px; text-align:center; font-size:88%; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;} #archive a {display:block; width:20%; margin:0 auto; padding:6px 7.446808511% 6px 3.723404255%; line-height:1.2em; color:#333; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.5); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#f1d76f url(images/archive.png) right center no-repeat;} #archive a:hover {background-color:#ebd146;} .story-outer {overflow:hidden; border-top:1px solid #fff;} .story-outer p {text-shadow:0 1px 1px rgba(255,255,255,0.5);} .blue h3 {color:#fff; font-weight:normal; font-size:110%; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;} .blue h3 b {display:block; line-height:1.4em; color:#f4e58a; font-size:190%;} .white {background:url(images/bg-story-white.png) 0 0 repeat-x;} .blue { background: #15387b; /* fallback for non-supporting browsers */ background-image:-webkit-gradient(radial, center 100px, 0, center cover, 141, from(#0e2551), to(#1e53b9)); /* old WebKit Syntax */ background-image:-webkit-radial-gradient(center 100px, circle cover, #0e2551 0%, #1e53b9 100%); /* New WebKit syntax */ background-image:-moz-radial-gradient(center 100px, circle cover, #0e2551 0%, #1e53b9 100%); background-image:-ms-radial-gradient(center 100px, circle cover, #0e2551 0%, #1e53b9 100%); /* IE10+ */ background-image:-o-radial-gradient(center 100px, circle cover, #0e2551 0%, #1e53b9 100%); /* Opera (13?) */ background-image:radial-gradient(center 100px, circle cover, #0e2551 0%, #1e53b9 100%); /* standard syntax */ } .blue h2, .blue p {color:#fff; text-shadow:none;} .blue a:link {color:#e2bb70;} .story {max-width:960px; margin:0 auto; padding:50px 1% 30px 0;} .story:before, .story:after { content:"\0020"; display:block; height:0; visibility:hidden; } .story:after { clear:both; } .story { zoom:1; } .story header {position:relative; padding-top:25px;} .storyid {display:block; position:absolute; top:0; left:-50px; width:39px; height:55px; padding:30px 17px 0 9px; color:#0d407a; line-height:1em; font-size:21px; font-weight:bold; text-shadow: 0px 1px 1px #fff; font-family:GalaxiePolarisBold, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; background:url(images/story-marker.png) 0 0 no-repeat;} .story-inner {margin:0 auto;} .feature {float:right; display:block; width:auto; max-width:89.58333333%; margin:-50px auto 0 2.906976744%; padding:6px; background-color:#fff; -webkit-box-shadow:0 1px 4px 2px rgba(0,0,0,0.3); -moz-box-shadow:0 1px 4px 2px rgba(0,0,0,0.3); box-shadow:0 1px 4px 2px rgba(0,0,0,0.3);} .feature figcaption {max-width:89.5833%;} .photo {padding:5px; background-color:#fff; -webkit-box-shadow:0 1px 4px 2px rgba(0,0,0,0.3); -moz-box-shadow:0 1px 4px 2px rgba(0,0,0,0.3); box-shadow:0 1px 4px 2px rgba(0,0,0,0.3);} .youtube {display:block;} .focus {margin:0; list-style:none;} .focus li {margin:0 0 8px; padding:10px 30px 10px 60px; line-height:1.3em; background-color:#fdf6dd;} /* Skip Links */ .skip {display:block; line-height:1.2em; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;} #index .story-inner {width:79.16666667%; padding-bottom:40px;} /* An Amazing Opportunity ----------------------------------------------------*/ #opportunity {} #opportunity .story {background:url(images/labyrinth.jpg) top center no-repeat;} #opportunity header {margin:300px 0 0 46.2%;} #opportunity .intro {width:47.76315789%; margin:20px 0 50px 46.2%;} #opportunity .story-inner {width:85.41666667%; margin:0 0 0 15%;} #opportunity figure {width:62.23404255%; margin:0 2% 10px; padding:5px 0;} #opportunity .aside {overflow:hidden; margin:30px 0 30px -12.5%;} #opportunity blockquote.pull {margin:20px 4.16667% 20px 0;} #opportunity .urop {padding:30px 30px 30px 60px; background-color:#dfba61;} #opportunity .urop blockquote {float:left; width:45%; margin:0 45px 0 0;} #opportunity .urop .youtube {float:left; width:48.07692308%;} #opportunity .urop a {color:#3e341b;} #opportunity .urop a:visited {color:#6d5b2f;} /* Pushing Forward into the Unknown ----------------------------------------------------*/ #unknown {} #unknown .story-inner {width:79.16666667%; margin:0 auto 0 15%;} #unknown blockquote {margin-bottom:60px;} #unknown .aside {float:right; width:44.47368421% /* 338/760 */; margin-left:8.510638298%} /* It's Scientific ----------------------------------------------------*/ #scientific {} #scientific .story-inner {width:85.41666667%; margin:0 0 0 15%;} #scientific header {padding-top:50px;} #scientific .storyid {top:24px;} #scientific h3 {font-size:220%;} #scientific2 h3 {width:60.60606061%;} #storyblock {clear:both;} #storyblock img {max-width:120%;} #scientific1, #scientific2 {float:left; width:36.17021277%;} #scientific1 {margin-right:8.333333333% /*80px*/;} #scientific1 img {margin-left:-20%;} #scientific2 img {margin-right:-20%;} #scientific3 {clear:both; margin-top:20px;} /* Engineering in Action ----------------------------------------------------*/ #engineering {} #engineering .story-inner {width:79.16666667%; margin:0 auto 0 15.625%;} #engineering h3 {margin:0.4em 0 0.5em; font-size:230%; font-family:"Adobe Garamond Pro", Garamond, Georgia, Times, "Times New Roman", serif;} .derby {float:left; width:55%;} /* To the Power of Business ----------------------------------------------------*/ #business {} #business .story-inner {width:86.04166667%; margin:0 0 0 auto;} #business .featurefig {max-width:40%; width:auto;} #business .featurefig .feature {max-width:100%;} #business .featurefig figcaption {clear:both; max-width:89.5833%; width:100%; padding-top:20px; font-size:90%;} /* On the Way to the Forum ----------------------------------------------------*/ #forum {} #forum .story-inner {width:79.16666667%; margin:0 auto 0 15.625%;} .imgblock {float:none; width:auto; margin:50px -1.315789474% 50px -16.44736842%;} .imgblock figcaption {color:#fff; font-size:90%;} .leftimg {margin-right:20px;} /* Putting it All Together ----------------------------------------------------*/ #together {} #together .story-inner {width:79.16666667%; margin:0 auto 0 15.625%;} #bb p {font-size:220%; line-height:1.3em;} #bb footer {line-height:1.2em; font-weight:bold;} #bb footer i {font-weight:normal;} /* The Road to the Future ----------------------------------------------------*/ #future {} #future .story-inner {width:79.16666667%; margin:0 auto 0 15.625%; padding:20px 0;} /* Comments ----------------------------------------------------*/ #comments {padding:30px 0; color:#fff; background-color:#043266;} #comments h3 {margin:0; color:#fff;} /* Footer ----------------------------------------------------*/ #footer {overflow:hidden; background-color:#043266;} #footer-inner {overflow:hidden; max-width:960px; margin:30px auto 0; padding:0 0 30px;} #mark {float:right; display:block; width:150px; height:35px; background:url(/assets/images/marks/white/ndmark150.png) 0 0 no-repeat;} #mark img {display:none;} } /********************************************************************************************************* Media Queries *********************************************************************************************************/ @media screen and (max-device-width:480px) { html {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;} } /* Tablets landscape ----------- */ @media only screen and (max-width:1100px) { #wrapper {background-position:-30px 52px;} } /* Tablets portrait ----------- */ @media only screen and (max-width:800px) { .story {padding:50px 7% 30px 0;} #opportunity .storyid {display:none;} #opportunity .aside {margin:30px 0 0;} #opportunity figure {width:100%;} #opportunity blockquote.pull {width:100%; margin:20px 0;} #opportunity .urop {margin:10px 0 30px; padding:20px;} #opportunity .urop blockquote {float:none; width:100%; margin:0 0 15px;} #opportunity .urop .youtube {float:none; width:auto;} #scientific1, #scientific2 { float:none; width:100%; } #scientific2 h3 {width:100%;} #scientific1 img {margin-left:0;} .derby {float:none; width:100%;} .imgblock {margin:30px 0;} .imgblock img {width:45%;} #bb {clear:both; width:100%; margin:20px auto 30px;} #comments .story {width:90%;} #footer-inner {width:96%;} } /* Mid-Size Tablets (Galaxy Tab) (portrait) ----------- */ @media only screen and (max-width:600px) { figure, a.right, a.left, aside.right, figure.right, figure.left {float:none; width:100%; margin:20px 0;} figure, figure.right {width:100%; margin:20px 0; font-size:80%;} blockquote.pull {float:none; width:90%; margin:20px auto;} #sherpind {display:none;} .left {float:none; margin:10px 0;} #wrapper {background-position:0 36px; background-size:638px auto;} #header {height:269px;} .feature {max-width:40%;} #opportunity .story {background:url(images/labyrinth.jpg) center -173px no-repeat;} #opportunity header {margin:150px 0 0 46.2%;} #opportunity .aside img {max-width:90%;} #unknown .aside {clear:both; float:none; width:100%; margin:20px 0;} #future .story-inner {padding:30px 0;} } /* Smartphones (landscape) ----------- */ @media only screen and (max-width:533px) { body {background-position:0 42px;} blockquote.inline {margin:20px auto; width:90%;} h2 {font-size:180%;} figure, figure.right {width:40%; margin:0 0 10px 5%; font-size:80%;} #skip-links {display:block; clip:auto; position:relative; width:auto; height:auto; overflow:hidden; margin:0;} #skip-links ul {float:left; width:100%; border:1px solid rgba(156,112,18,0.4); border-width:1px 0; background-color:#f6efd2;} #skip-links li {float:left; text-align:center; width:49%;} #skip-links li a {display:block; float:left; width:100%; padding:3px 0; font-size:12px; border:1px solid rgba(156,112,18,0.4); border-width:0 0 0 1px; text-decoration:none;} #wrapper {background-position:0 52px; background-size:auto 194px;} #header {height:244px;} #header h2 a {margin:0 10px;} a.indepth {left:auto; right:0;} #opportunity .story {background-position:-360px -180px;} #opportunity header {margin:150px 0 0 27%;} #opportunity .intro {width:75%; margin:20px 0 50px 27%;} #scientific h3 {font-size:160%;} #business .featurefig {max-width:100%; margin:0 0 20px;} #business .featurefig .feature {float:none; max-width:100%; margin:-50px 0 0 2.906976744%;} #archive a {width:80%; padding:6px 14% 6px 3%;} #comments .story {width:90%; margin:0 auto; padding:20px 0;} #footer-inner {width:90%;} #mark {float:left;} } /* Smartphones (portrait) ----------- */ @media only screen and (max-width:440px) { #wrapper {background-size:auto 140px;} #header {height:190px;} } /* iPhone4 and high pixel ratio devices ----------- */ @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {} /* Saving the mobiles from some large images ----------- */ @media only screen and (min-width:1100px) {} /********************************************************************************************************* Print Styles *********************************************************************************************************/ @media print { iframe, .feature, .skip, .storyid, .video, .youtube, #archive, #sherpind, #skip-links {display:none;} body {font-family:Georgia, Times, "Times New Roman", serif;} * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; } 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 {width:90%; margin:15px auto; padding:0; 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 {overflow:hidden; display:block; position:relative; width:100%; margin:10px 0; padding:10px 0; border-bottom:1px solid gray;} #header h2 {float:right; margin:0; padding:0; text-indent:-9999px; overflow:hidden;} #header h2 img {float:right; width:150px;} #header h1 {float:left; width:60%; margin:0; padding:0; font-size:140%;} #header h1 a {color:#fed755; text-decoration:none; line-height:1em; font-weight:normal;} .story-outer {clear:both;} .story a[href]:after { content:" (" attr(href) ")"; font-size:11px;} #mark img {width:150px; margin-top:30px;} }