/* Written by: Nikash SINGH written on: 18:50 140525 written in: Brackets 2 written for: NANO Designs website 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 rgba(255,255,255,0.15); 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;} /* NS: newer-element resets */ header, main, nav, article, aside, footer {display:block; margin:0px; padding:0px;} /* ========================================================================== Custom styles ========================================================================== */ /*Generic text styles*/ html, body {width:100%; height:100%; padding:0px; margin:0px; background:#FFFFFF; color:#434343; font-family:"Helvetica-Neue",Helvetica,Arial,sans-serif; font-size:0.89em;} h1,h2,h3,h4,h5,h6 {font-weight:200; margin:0px; padding:0px;} a, a:link {color:#88BBAC; text-decoration:none; cursor:pointer;} a:visited {color:#CADED8; text-decoration:none; cursor:pointer;} a:hover {color:#BDEDDF; 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*/ /* CSS gradient to alpha background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9))); background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); background: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); */ /* CSS gradient from one Hex to another background: -moz-linear-gradient(top, #FFCC33, #FF0000); background: -o-linear-gradient(top, #FFCC33, #FF0000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFCC33), to(#FF0000)); background: -webkit-linear-gradient(top, #FFCC33, #FF0000); background: -ms-linear-gradient(top, #FFCC33, #FF0000); */ /*Site-specific styles*/ @font-face {font-family:'QuicksandLight'; font-weight:normal; font-style:normal; src:url('quicksandlight/quicksandlight.ttf'); } .QuicksandLight {font-family:"QuicksandLight","Century gothic",sans-serif;} h1,h2,h3,h4,h5,h6,p,ul,ol,dl {font-family:"QuicksandLight","Century gothic",sans-serif; font-weight:200; color:#88BBAC;} .TheGreen {color:#8CC63E;} .GeorgiaItalic {font-family:Georgia,Pristina,serif; font-style:italic;} span {background:#475853; color:#88BBAC; padding:1px 2px; border-radius:2px;} span:hover {color:#CCCCCC; cursor:pointer;} nav {display:block; font-size:1.1em;} nav#NSglobalNav {border:none; font-family:"QuicksandLight","Century gothic",sans-serif;} /* Apply "width:~00px" here as per site layout */ nav#NSglobalNav ul.VerticalNav {list-style:none; margin:0px; padding:0px;} nav#NSglobalNav ul.VerticalNav li {list-style:none; margin:0px; padding:0px; line-height:30px;} nav#NSglobalNav ul.VerticalNav li a, nav#NSglobalNav ul.VerticalNav li strong {display:block; margin:0px; padding:0px 5px; border-bottom:solid 1px #EEEEEE;} nav#NSglobalNav ul.VerticalNav li a {color:#434343;} nav#NSglobalNav ul.VerticalNav li strong {color:#88BBAC;} /* 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;} body {background-image:url(../img/bg_mainhearth_bw.jpg); background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-color:#b0b0b0; } div#NSpageContainer {background:rgba(0,0,0,0.82);} div#NSpageContainer header {background:#FFFFFF;} div#NSpageContainer nav {background:none;} div#NSpageContainer main {background:none;} div#NSpageContainer article {background:none} div#NSpageContainer aside {background:none;} div#NSpageContainer footer {background:none;} /* Apply "FlexibleSite" to NSpageContainer.class for full-sreen */ div#NSpageContainer.FlexibleSite {width:100%; height:100%; margin:0px;} div#NSpageContainer.FlexibleSite header {position:fixed; z-index:2; top:0px; left:0px; width:150px; height:100%; text-align:center;} div#NSpageContainer.FlexibleSite header img#SiteLogo {margin:55px auto 103px auto;} div#NSpageContainer.FlexibleSite header h3#SiteHeading {height:10px; line-height:50px; overflow:hidden;} div#NSpageContainer.FlexibleSite header nav {width:70%; margin:0px auto;} div#NSpageContainer.FlexibleSite div#SubNav {position:fixed; z-index:1; top:0px; left:0px; width:150px; height:100%; color:#CCCCCC; text-align:center; background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.8)); background: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.8)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8))); background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.8)); background: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.8)); } div#NSpageContainer.FlexibleSite div#SubNav img#PageIcon {margin:55px auto 130px auto;} div#NSpageContainer.FlexibleSite div#SubNav dl {width:70%; text-align:left; margin:38px auto 0px auto;} div#NSpageContainer.FlexibleSite div#SubNav dl#about {margin-top:38px;} div#NSpageContainer.FlexibleSite div#SubNav dl#team {margin-top:70px;} div#NSpageContainer.FlexibleSite div#SubNav dl#works {margin-top:102px;} div#NSpageContainer.FlexibleSite div#SubNav dl#template {margin-top:133px;} div#NSpageContainer.FlexibleSite div#SubNav dl dt {line-height:30px; border-bottom:solid 1px #434343; margin-bottom:5px;} div#NSpageContainer.FlexibleSite div#SubNav dl dd {line-height:20px; color:#999999; padding:0px; margin:0px;} div#NSpageContainer.FlexibleSite div#SubNav dl dd a {color:#999999; font-style:italic;} div#NSpageContainer.FlexibleSite div#SubNav dl dd a.ActiveSectionLink {color:#FFFFFF;} div#NSpageContainer.FlexibleSite div#SubNav dl dd a:hover {color:#FFFFFF;} div#NSpageContainer.FlexibleSite main {margin-left:180px; height:100%; overflow-y:scroll;} div#NSpageContainer.FlexibleSite article {float:left; width:75%; margin-bottom:100px; overflow-y:visible;} div#NSpageContainer.FlexibleSite article p {text-shadow:0px 1px 7px #000;} div#NSpageContainer.FlexibleSite article section {display:none;} div#NSpageContainer.FlexibleSite article section.DefaultSection {display:block;} div#NSpageContainer.FlexibleSite article section.DefaultSection.NSthumbnailGallery img {height:70px;} div#NSpageContainer.FlexibleSite article section p:first-child {margin-top:0em;} div#NSpageContainer.FlexibleSite aside {float:right; width:17%; height:100%; padding-right:3%; overflow-y:visible;} div#NSpageContainer.FlexibleSite aside ul {padding:0px 0px 0px 15px; margin:0px;} div#NSpageContainer.FlexibleSite footer {position:fixed; bottom:0px; left:0px; width:100%; height:30px; text-align:right;} div#NSpageContainer.FlexibleSite footer p {font-size:0.8em; color:#666666; padding-right:25px;} div#NSpageContainer img#SiteLogo {margin:20px; transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg);} div#NSpageContainer img#SiteLogo:hover {transform:rotate(-7deg); -ms-transform:rotate(-7deg); -webkit-transform:rotate(-7deg);} div#NSpageContainer main article h1 {font-size:2em; margin:200px 0px 15px 0px;} div#NSpageContainer main aside h2 {font-size:1.75em; font-weight:normal; color:#666666; margin:200px 0px 20px 0px;} div#NSpageContainer p {color:#FFFFFF;} /*The contact-address lightbox*/ div#TheBox {display:none; position:fixed; top:0px; left:50%; width:300px; height:120px; margin:280px 0px 0px -150px; padding:3px 8px; text-align:center; background:#FFFFFF; box-shadow:1px 1px 15px #222222;} div#TheBox a {color:#BDEDDF;} div#TheBox a:hover, div#TheBox a#Closer:hover {color:#757575;} div#TheBox a#Closer {display:block; margin-bottom:30px; text-align:right; font-size:1.3em; color:#CCCCCC;} /*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;} }