/* Written by: Nikash SINGH written on: 00:00 13XXXX written in: Aptana Studio 3 written for: nikashsingh.org Props to the H5BP crew for taking care of all the tricky stuff; Nicolas Gallagher, Jonathan Neal, Kroc Camen (IS A GOD OF REASON AND A PILLAR OF IDEOLOGY), and the H5BP dev community and team. */ /* ========================================================================== H5BP Base styles & defaults ========================================================================== */ html, button, input, select, textarea {color:#333333;} 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;} /* NS: newer-element resets */ header, main, nav, article, aside, footer, blockquote {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-weight:200; font-size:0.85em;} h1,h2,h3,h4,h5,h6 {font-family:"Helvetica-Neue",Helvetica,Arial,sans-serif; font-weight:200; color:#285780; margin:0px; padding:0px; clear:left;} a, a:link {color:#285780; text-decoration:none; cursor:pointer;} a:visited {color:#CCCCCC; text-decoration:none; cursor:pointer;} a:hover {color:#8CC63E; 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:'LearningCurve'; font-weight:normal; font-style:normal; src:url('learningcurve.ttf'); } .LearningCurve {font-family:"LearningCurve",Georgia,serif; font-size:2.7em;} .TheGreen {color:#8CC63E;} .LightGrey {color:#CCCCCC;} .Faded {opacity:0.5;} .GeorgiaItalic {font-family:Georgia,Pristina,serif; font-style:italic;} span.Label {background:#666666; color:#AAAAAA; padding:1px 2px; border-radius:2px;} span.Label:hover {color:#CCCCCC; cursor:pointer;} nav {display:block; font-size:1.1em;} nav#NSglobalNav {border:none;} /* Apply "width:~00px" here as per site layout */ nav#NSglobalNav ul.VerticalNav {width:70%; list-style:none; margin:0px; padding:0px; border:none;} nav#NSglobalNav ul.VerticalNav li {list-style:none; margin:7px 0px; padding:0px; border:none; height:25px; line-height:25px; opacity:0.7; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} nav#NSglobalNav ul.VerticalNav li.CurrentPage {opacity:0.9; font-weight:bold;} nav#NSglobalNav ul.VerticalNav li:hover {opacity:0.9; color:#8CC63E; margin-left:4px;} nav#NSglobalNav ul.VerticalNav li:hover a {color:#8CC63E;} nav#NSglobalNav ul.VerticalNav li#Home {background:url(../img/icons_nav.gif) no-repeat 0px 0px;} nav#NSglobalNav ul.VerticalNav li#About {background:url(../img/icons_nav.gif) no-repeat 0px -25px;} nav#NSglobalNav ul.VerticalNav li#Manifesto {background:url(../img/icons_nav.gif) no-repeat 0px -125px;} nav#NSglobalNav ul.VerticalNav li#Services {background:url(../img/icons_nav.gif) no-repeat 0px -50px;} nav#NSglobalNav ul.VerticalNav li#Proposals {background:url(../img/icons_nav.gif) no-repeat 0px -100px;} nav#NSglobalNav ul.VerticalNav li#Contact {background:url(../img/icons_nav.gif) no-repeat 0px -75px;} nav#NSglobalNav ul.VerticalNav li a, nav#NSglobalNav ul.VerticalNav li strong {display:block; margin:0px 0px 0px 30px; padding:0px; border:none; color:#757575;} nav#NSglobalNav ul.VerticalNav li a::selection, nav#NSglobalNav ul.VerticalNav li strong::selection {background:#333333; color:#FFFFFF;} /*SubNav menu for proposal pages*/ nav#NSglobalNav ul#SubNavMenu {margin:0px 0px 15px 5px; padding:0px;} nav#NSglobalNav ul#SubNavMenu li {margin:-5px 0px; padding:0px; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} nav#NSglobalNav ul#SubNavMenu li:hover {margin-left:4px;} nav#NSglobalNav ul#SubNavMenu li.CurrentPage strong {color:#8CC63E; font-weight:normal;} /* 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:url(../img/bg-life.jpg) top center no-repeat; } div#NSpageContainer {} div#NSpageContainer header {background:none;} div#NSpageContainer main {background:none;} div#NSpageContainer nav {background:none;} div#NSpageContainer article {background:none;} div#NSpageContainer aside {background:none;} div#NSpageContainer footer {background:#333333;} /* Apply "CenteredSite" to NSpageContainer.class for centered column-page */ div#NSpageContainer.CenteredSite {width:980px; height:100%; margin:0px auto;} div#NSpageContainer.CenteredSite header {min-height:100px; text-align:center;} div#NSpageContainer.CenteredSite header h3#SiteHeading {width:500px; margin:0px auto; padding-bottom:7px; border-bottom:solid 3px #8CC63E; font-family:"LearningCurve",Georgia,serif; font-size:2.8em; color:#285780;} div#NSpageContainer.CenteredSite main {overflow:auto;} div#NSpageContainer.CenteredSite nav {width:240px; height:100%; float:left; text-align:left; margin-top:70px;} div#NSpageContainer.CenteredSite article {width:500px; height:100%; float:left; padding-bottom:100px;} div#NSpageContainer.CenteredSite article p#IntroSpiel {display:none; width:52%; margin:0px auto; border-left:solid 25px #FFFFFF;} div#NSpageContainer.CenteredSite article p#IntroSpiel strong {color:#285780; font-weight:400;} div#NSpageContainer.CenteredSite article p:last-child {padding-bottom:50px;} /* NS: at smaller resolutions the article bottom-padding wasn't creating gutter */ div#NSpageContainer.CenteredSite article div#MASLOWquote {margin:0px 0px 40px 0px;} div#NSpageContainer.CenteredSite article div#MASLOWquote blockquote {width:400px; margin:40px 0px 5px 0px; font-family:"LearningCurve",Georgia,serif; font-size:2.5em; line-height:0.8em; color:#8CC63E;} div#NSpageContainer.CenteredSite article a#ContactTrigger {line-height:5em; padding:8px 12px 8px 33px; color:#FFFFFF; background:url(../img/icon-contact.png) 200px 2px no-repeat; background-color:#8CC63E; border-radius:3px; border-bottom:solid 2px #66AA33; box-shadow:0px 1px 3px #AAAAAA; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} div#NSpageContainer.CenteredSite article a#ContactTrigger:hover {background-color:#285780; border-bottom:solid 2px #154575; box-shadow:0px 1px 3px #AAAAAA;} div#NSpageContainer.CenteredSite article ul#ServiceList {margin:20px 0px 50px 0px;} div#NSpageContainer.CenteredSite article ul#ServiceList li {width:290px; border-bottom:solid 1px rgba(150,150,150,0.1); padding:5px 0px; color:#AAAAAA;} div#NSpageContainer.CenteredSite article ul#ServiceList li:last-child {border-bottom:none;} div#NSpageContainer.CenteredSite article ul#ServiceList li a:after {content:" ☛";} /* Pinched styling from standalone project pages, such as download button and status badges*/ div#NSpageContainer article h2 {font-size:1.5em; font-weight:100; text-transform:uppercase; color:#8CC63E; margin:3em 0px 0px 0px; border-bottom:dotted 1px #CCCCCC;} div#NSpageContainer article h3 {font-size:1.3em; font-weight:100; color:#999999; margin:0px; padding-bottom:0.5em; border-bottom:dotted 2px rgba(0,30,80,0.2);} div#NSpageContainer article p {color:#888888; clear:both;} div#NSpageContainer article p#LastParagraph {padding-bottom:50px;} div#NSpageContainer article img {cursor:pointer;} div#NSpageContainer article div.Paler img {opacity:0.3;} div#NSpageContainer article span {font-size:1em; color:#CCC;} div#NSpageContainer article mark {padding:3px 5px; color:rgba(0,0,0,0.5); border-radius:2px; font-weight:bold;} div#NSpageContainer article mark.StatusApproved {background-color:#8CC63E;} div#NSpageContainer article mark.StatusInProgress {background-color:#CCCCCC;} div#NSpageContainer article mark.StatusDeclined {background-color:#CC3333; color:#FFFFFF;} a.NSdownloadLink {display:inline-block; padding:10px 15px; margin:20px 0px; background-color:#DDDDDD; text-decoration:none; font-size:1.25em; color:#666666; text-shadow:0px 1px 1px #FFFFFF; border-radius:4px; box-shadow:0px 2px 2px #BBBBBB; } a.NSdownloadLink:hover {background-color:#88CC33; color:#FFFFFF; text-shadow:0px -1px 1px #66AA33; box-shadow:0px 1px 2px #757575; } div#NSpageContainer.CenteredSite article.Asideless {width:700px; height:100%; float:left;} /*OLD ABSOLUTE: div#NSpageContainer.CenteredSite article.Asideless div.Column {width:200px; margin:0px 50px 50px 0px; height:100%; float:left;}*/ div#NSpageContainer.CenteredSite article.Asideless div.Column {width:26%; margin:0px 7% 50px 0px; height:100%; float:left;} div#NSpageContainer.CenteredSite article.Asideless div.Column:last-child {margin-right:0px;} div#NSpageContainer.CenteredSite article.Asideless div#ProposalsContainer {overflow:auto;} div#NSpageContainer.CenteredSite article.Asideless div#ProposalsContainer div.Column {width:200px; margin:0px 45px 50px 0px; height:200px; float:left;} div#NSpageContainer.CenteredSite article.Asideless div#ProposalsContainer div.Column:nth-child(3), div#NSpageContainer.CenteredSite article.Asideless div#ProposalsContainer div.Column:last-child {margin-right:0px;} div#NSpageContainer.CenteredSite article div#ProposalsContainer a:after {content:" ☛";} div#NSpageContainer.CenteredSite aside {position:relative; width:170px; height:100%; float:right; text-align:right; margin-top:70px;} div#NSpageContainer.CenteredSite aside.LeftAlign {text-align:left;} div#NSpageContainer.CenteredSite aside h2 {font-family:"LearningCurve",Georgia,serif; font-size:2em; color:#285780; margin-top:-25px; padding-bottom:0px;} div#NSpageContainer.CenteredSite aside a {display:block; border-bottom:solid 1px rgba(150,150,150,0.1); padding:5px;} div#NSpageContainer.CenteredSite aside img {border:solid 4px #FFF; border-radius:100px; box-shadow:0px 1px 4px #999999; margin:0px;} div#NSpageContainer.CenteredSite aside img.margin120 {margin:15px;} div#NSpageContainer.CenteredSite aside img.margin100 {margin:25px;} div#NSpageContainer.CenteredSite aside img.margin70 {margin:40px;} div#NSpageContainer.CenteredSite aside#ServicePics {height:650px;} div#NSpageContainer.CenteredSite aside img#BrandPic {position:absolute; top:-25px; right:0px;} div#NSpageContainer.CenteredSite aside img#GDPic {position:absolute; top:45px; right:70px;} div#NSpageContainer.CenteredSite aside img#IconsPic {position:absolute; top:120px; right:10px;} div#NSpageContainer.CenteredSite aside img#PackagePic {position:absolute; top:215px; right:35px;} div#NSpageContainer.CenteredSite aside img#PhotoPic {position:absolute; top:325px; right:0px;} div#NSpageContainer.CenteredSite aside img#WebPic {position:absolute; top:400px; right:40px;} div#NSpageContainer.CenteredSite aside a[target="SocNet"] img {border:solid 3px #FFF; border-radius:15px; box-shadow:0px 1px 4px #999999; margin:8px;} div#NSpageContainer.CenteredSite footer {height:50px; overflow:auto;} div#NSpageContainer.CenteredSite footer.FixedToBottom {position:fixed; bottom:0px; width:980px; height:45px; overflow:auto; text-align:center; padding:5px 0px 0px 0px;} div#NSpageContainer img#SiteLogo {margin:100px 0px 15px 0px; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } div#NSpageContainer img#SiteLogo:hover { transform:rotate(-10deg); -moz-transform:rotate(-10deg); -ms-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); cursor:pointer; } div#NSpageContainer h1 {font-size:1.5em; width:500px; font-weight:100; text-transform:uppercase; color:#CCCCCC; margin:3px 0px 30px 0px; padding-top:15px; text-align:center;} div#NSpageContainer h2 {font-size:1.3em; font-weight:100; color:#999999; margin:0px; padding-bottom:0.5em; border-bottom:dotted 2px rgba(0,30,80,0.2);} div#NSpageContainer p {color:#888888;} /*The contact-address lightbox*/ div#TheBox {display:none; position:fixed; top:0px; left:50%; width:484px; height:155px; margin:294px 0px 0px -250px; padding:3px 8px; text-align:center; background:#333333; box-shadow:1px 1px 15px #AAAAAA; border-top:solid 3px #8CC63E;} div#TheBox a {color:#757575;} div#TheBox a:hover, div#TheBox a#Closer:hover {color:#8CC63E;} div#TheBox a#Closer {display:block; margin-bottom:45px; text-align:right; font-size:1.3em; color:#757575;} /*Centred and corrected lightbox after proposal-pages-integration*/ div#TheBox.ProposalsSizeLimit {display:none; position:fixed; top:50%; left:50%; width:auto; max-width:70%; height:auto; max-height:70%; margin:-25% 0px 0px -25%; padding:3px 0px 0px 0px; text-align:center; background:#333333; box-shadow:1px 1px 15px #AAAAAA; border-top:solid 3px #8CC63E;} div#TheBox.ProposalsSizeLimit a#Closer {display:block; margin:0px 5px 5px 5px; text-align:right; font-size:1.3em; color:#8CC63E;} div#TheBox.ProposalsSizeLimit img {max-width:100%; max-height:100%;} /*Page footer*/ div#NSpageContainer.CenteredSite footer#NSfooterContainer {overflow:visible;} div#NSpageContainer.CenteredSite footer#NSfooterContainer p {width:500px; margin:-8px auto 0px auto; padding-top:18px; border-top:solid 3px #8CC63E; color:#555555;} div#NSpageContainer.CenteredSite footer#NSfooterContainer a {color:#888888; text-decoration:none;} div#NSpageContainer.CenteredSite footer#NSfooterContainer a:hover {color:#AAAAAA;} /*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;} }