/* Written by: Nikash SINGH written on: 00:00 15XXXX Updated on: 21:25 140803NS Updated on: 19:28 150710NS written in: Brackets 2 written for: NikashSingh.net Props to the H5BP crew for taking care of all the tricky stuff; Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== H5BP Base styles & defaults ========================================================================== */ html, button, input, select, textarea {color:#222;} body {font-size:1em; line-height:1.4;} /* Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection {background:#b3d4fc; text-shadow:none;} ::selection {background:#b3d4fc; text-shadow:none;} /* A better looking default horizontal rule */ hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} /* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img {vertical-align: middle;} /* Remove default fieldset styles. */ fieldset {border:0; margin:0; padding:0;} /* Allow only vertical resizing of textareas. */ textarea {resize:vertical;} /* Chrome Frame prompt */ .chromeframe {margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;} /* ========================================================================== Custom styles ========================================================================== */ /*Generic text styles*/ html, body {width:100%; height:100%; padding:0px; margin:0px; background:#FFFFFF; color:#434343; font-family:Helvetica,Arial,sans-serif; font-size:0.85em;} h1,h2,h3,h4,h5,h6 {font-family:"Helvetica-Neue",Helvetica,Arial,sans-serif; font-weight:200; color:#8CC63E;} a, a:link {color:#ED2D00; text-decoration:none; cursor:pointer;} a:visited {color:#CCCCCC; text-decoration:none; cursor:pointer;} a:hover {color:#BED600; text-decoration:none; cursor:pointer;} em {font-style:italic;} strong {font-weight:bold;} .HorizontalList, .VerticalList {list-style:none; margin:0px; padding:0px;} .HorizontalList li {display:inline;} .VerticalList li {display:block;} .textbox {background-color:#FFFFFF; border:thin; font-family:Helvetica, Arial, Verdana, sans-serif; color:#666666;} .Polaroid {border:solid 4px #FFFFFF; -moz-box-shadow: 3px 3px 4px #999999; -webkit-box-shadow: 3px 3px 4px #999999; box-shadow: 3px 3px 4px #999999; } .DropShadow {-moz-box-shadow: 3px 3px 4px #999999; -webkit-box-shadow: 3px 3px 4px #999999; box-shadow: 3px 3px 4px #999999; } /*Some good default colours: Green#99FF66 #66CC00 Lime#CCFF33 RedOrange#FF9966 Orange#FF9900 Fuchsia#CC3399 Purple#9900FF Blue#0099CC Aqua#33CCCC Cream#CCCC99*/ /*Site-specific styles*/ .TheGreen {color:#BED600;} .TheRed {color:#ED2D00;} .Commentary {color:#CCCCCC; font-style:italic;} .GeorgiaItalic {font-family:Georgia,Pristina,serif; font-style:italic;} nav {display:block; font-size:1.1em;} nav#NavAssociations {width:110px; border:none; float:left;} nav#NavPages {width:233px; border:none; float:right;} nav#NavCourses {width:233px; border:none;} div#NSnavContainer.SubPage nav#NavAssociations {width:110px; border:none; float:left;} div#NSnavContainer.SubPage nav#NavPages {width:115px; float:left;} div#NSnavContainer.SubPage nav#NavCourses {opacity:0; width:233px; float:left;} nav.NSglobalNav ul.VerticalNav {list-style:none; margin:40px 0px 0px 0px; padding:0px;} nav.NSglobalNav ul.VerticalNav li {list-style:none; margin:0px; padding:0px; border:none; line-height:1.85em;} nav.NSglobalNav ul.VerticalNav li a, nav.NSglobalNav ul.VerticalNav li strong {display:block; margin:0px; padding:0px 5px; color:#999999; border-left:solid 1px #EEEEEE;} nav.NSglobalNav ul.VerticalNav li strong {border-left:solid 3px #BED600; padding:0px 3px; color:#BED600;} nav.NSglobalNav ul.VerticalNav li a:hover, nav.NSglobalNav ul.VerticalNav li strong:hover {border-left:solid 3px #D8EB3B; padding:0px 3px; color:#BED600;} nav#NSglobalNav ul.HorizontalNav {overflow:auto; list-style:none; margin:0px; padding:0px; border:solid 1px green;} nav#NSglobalNav ul.HorizontalNav li {list-style:none; display:block; float:left; margin:0px; padding:0px; border:solid 1px blue; line-height:1.85em;} nav#NSglobalNav ul.HorizontalNav li a, nav#NSglobalNav ul.HorizontalNav li strong {display:block; margin:0px; padding:0px 5px; border:solid 1px orange;} div#ClassLinks {display:none; margin:40px 0px 100px 0px; overflow:auto;} div#ClassLinks ul.VerticalNav {width:300px; margin:0px 0px 20px 0px; list-style:none; padding:0px;} div#ClassLinks ul.VerticalNav li {line-height:1.5em;} div#ClassLinks ul.VerticalNav li.RedText {color:#ED2D00;} div#ClassLinks ul.VerticalNav li.Commentary {color:#CCCCCC; font-style:italic;} div#ClassLinks ul.VerticalNav li strong {display:block; border-left:none; border-bottom:solid 1px #EEEEEE; padding:0px 0px 2px 0px; margin-bottom:5px; color:#BED600; font-weight:normal;} div#ClassLinks ul.VerticalNav li a {border-left:none; padding:0px; color:#999999;} /* Same as above "div#ClassLinks ul.VerticalNav" but as DL */ dl, dl dt, dl dd {margin:0px; padding:0px;} div#ClassLinks dl {width:300px; margin:0px 0px 20px 0px; list-style:none; padding:0px;} div#ClassLinks dl dt, div#ClassLinks dl dd {line-height:1.5em;} div#ClassLinks dl dt {display:block; border-left:none; border-bottom:solid 1px #EEEEEE; padding:0px 0px 2px 0px; margin-bottom:5px; color:#BED600; font-weight:normal;} div#ClassLinks dl dd {color:#999999;} div#ClassLinks dl dd.Assessment {color:#ED2D00;} div#ClassLinks dl dd a {border-left:none; padding:0px; color:#434343;} /* nav#NSglobalNav {background:#333333; overflow:visible; border:solid 1px green;} nav#NSglobalNav ul {margin:0px; padding:5px; border:solid 1px blue;} nav#NSglobalNav ul {border:solid 1px red;} nav#NSglobalNav ul li a {background:#3D3D3D; padding:3px 5px; margin:0px;} */ /* -------------------------- Layout starts here -------------------------- */ .FloatLeft {float:left;} .FloatRight {float:right;} div#NSpageContainer {overflow:visible;} div#NSpageContainer.CenteredSite {width:980px; margin:0px auto 50px auto; padding-bottom:40px;} div#NSpageContainer.FlexibleSite {width:100%; margin:0px 0px 50px 0px;} div#NSpageContainer.FloatingSite {width:980px; height:700px; position:absolute; top:50%; left:50%; margin:-300px 0px 0px -490px;} div#NSpageContainer div#NSheaderContainer {width:350px; height:100%; float:left; border:none; overflow:visible;} div#NSheaderContainer div#NSlogoContainer {position:relative; height:300px; width:350px;} div#NSheaderContainer div#NSlogoContainer.Home { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/my-students.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.HCI { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/hci-machine.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.IMD { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/imd-photoblog.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.IxD { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/ixd-catalogue.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.GradExh { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/gradexh.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.GradExh-Anthelion { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/gradexh-anthelion.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.GradExh-D16 { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/gradexh-d16.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.ID { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/interface.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.InfoVis { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/infovis.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.Rec { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/faves.jpg) no-repeat bottom right; } div#NSheaderContainer div#NSlogoContainer.James { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background:url(../img/james-dumesny.jpg) no-repeat bottom right; } div#NSpageContainer img#SiteLogo {display:block; position:absolute; bottom:0px; left:0px;} div#NSpageContainer h3#SiteHeading {display:none;} div#NSheaderContainer div#NSnavContainer {width:350px; border:none;} div#NSnavContainer a#AssocLinksTrigger {display:none; float:left; width:20px; height:20px; line-height:20px; font-size:1.3em; margin:65px 0px 0px -40px;} div#NSnavContainer a#AssocLinksTrigger:hover {color:#ED2D00;} /* For Nav-styling check above */ div#NSpageContainer div#NScontentContainer {width:600px; float:right; border:none;} div#NScontentContainer div#NotificationArea {height:70px; line-height:70px;} div#NScontentContainer div#NotificationArea p {margin:0px; color:#CC3333; font-weight:bold;} div#NScontentContainer div#ActualContentContainer {position:relative; border:none; } div#NScontentContainer div#ActualContentContainer.HomeContent {height:230px;} div#ActualContentContainer div#SubmissionArea {float:right; width:130px; height:100%; border:none;} div#ActualContentContainer div#SubmissionArea p {color:#ED2D00; text-align:right; margin-top:-5px;} div#SubmissionArea p span#SubmissionName {color:#BED600;} div#SubmissionArea p span#SubmissionDate {color:#CCCCCC;} div#ActualContentContainer div#AlignmentAnchorContainer {position:absolute; width:450px; bottom:0px; left:0px; border:none;} div#ActualContentContainer div#AlignmentAnchorContainer p {margin:10px 0px 0px 0px;} /* hidden areas, remove class="Hidden" to show */ div#NScontentContainer div#NotificationArea.Hidden, div#ActualContentContainer div#SubmissionArea.Hidden {visibility:hidden;} div#NSpageContainer h1 {font-size:2em; color:#BED600; margin:0px 0px 10px 0px;} div#NSpageContainer h2 {font-size:1.75em; font-weight:normal; color:#666666; margin:0.5em 0px 0px 0px; padding-bottom:0.5em; border-bottom:solid 1px rgba(0,0,0,0.1);} div#NSpageContainer p {color:#666666;} div#NSpageContainer img#NikashSINGH {transform:rotate(7deg); -ms-transform:rotate(7deg); -webkit-transform:rotate(7deg);} div#NSpageContainer img#NikashSINGH:hover {transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); border:solid 3px #BED600; } /*The contact-address lightbox*/ div#TheBox {display:none; position:fixed; bottom:50px; left:50%; width:350px; height:70px; margin:0px 0px 0px -490px; padding:3px 8px; text-align:center; background:url(../img/grad.png) repeat-x #ED2D00; box-shadow:1px 1px 5px #999999;} div#TheBox a {color:#DDDDDD; text-shadow:-1px -1px rgba(0,0,0,0.4);} div#TheBox a:hover, div#TheBox a#Closer:hover {color:#FFFFFF;} div#TheBox a#Closer {display:block; margin-bottom:5px; text-align:right; font-size:1.3em; color:#CCCCCC;} /*Page footer*/ footer#NSfooterContainer {display:block; position:fixed; bottom:1px; right:3px; color:#555555; font-size:0.8em;} footer#NSfooterContainer p {margin:0px; color:#DDDDDD;} footer#NSfooterContainer a {color:#CCCCCC; text-decoration:none;} footer#NSfooterContainer a:hover {color:#BED600;} .dev, div#NSpageContainer div#NScontentContainer, div#NScontentContainer div#ActualContentContainer, div#ActualContentContainer div#AlignmentAnchorContainer, div#ActualContentContainer div#SubmissionArea {border:none;} /*solid 1px #EEEEEE*/ /*TURN ON WHEN BUILDING: *:hover {border:solid 1px red;} */ /* ========================================================================== H5BP helper classes ========================================================================== */ /* Image replacement */ .ir {background-color:transparent; border:0; overflow:hidden; /* IE 6/7 fallback: */ *text-indent: -9999px;} .ir:before {content:""; display:block; width:0; height:150%;} /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden {display:none !important; visibility:hidden;} /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;} /* Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;} /* Hide visually and from screenreaders, but maintain layout */ .invisible {visibility:hidden;} /* Clearfix: contain floats * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after {content:" "; /* 1 */ display:table; /* 2 */} .clearfix:after {clear:both;} /* For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix {*zoom:1;} /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width:35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * {background:transparent !important; color:#000 !important; /* Black prints faster: h5bp.com/s */ box-shadow:none !important; text-shadow:none !important;} a, a:visited {text-decoration:underline;} a[href]:after {content:" (" attr(href) ")";} abbr[title]:after {content:" (" attr(title) ")";} /* Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content:"";} pre, blockquote {border:1px solid #999; page-break-inside:avoid;} thead {display:table-header-group; /* h5bp.com/t */} tr, img {page-break-inside:avoid;} img {max-width:100% !important;} @page {margin:0.5cm;} p, h2, h3 {orphans:3; widows:3;} h2, h3 {page-break-after:avoid;} }