@charset "UTF-8"; /* ------------------------------------------ RESET --------------------------------------------- */ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, hr, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, summary, hgroup { margin: 0; padding: 0; border: 0; } a:active, a:hover { outline: 0; } @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /* ------------------------------------------ BASE STYLES --------------------------------------------- */ body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #37302a; background: #fff; font: normal 100%/1.4 sans-serif; max-width: 1002px; margin-left: auto ; margin-right: auto ; font-size: 1em; } .waterlooHead{ background-color: #000000; width: 100%; overflow: auto; } .banner{ background-color: #000000; content:url("../images/banner_full.jpg"); width: 100%; } .banner img{ width: 100%; } p { padding: 0 .25em .5em .25em; } section { border-bottom: 1px solid #999; float: left; width: 100%; height: 800px; } .main{ display: inline-block; width: 100%; position: relative; margin-top: 1em; padding:0.5em 0; } .main td{ } .main ul{ position:relative; list-style-type:square; list-style-position:inside; padding-bottom:.5em; } .main ol{ position:inherit; list-style-position:inside; display:block; } .news{ float: left; width: 100%; position: relative; border-bottom: 0.2em solid #000000; padding: 0.5em 0; font-size: 0.85em; } .calltoaction img{ max-width:100%; } a .btn { } .btn { -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; -webkit-box-shadow: 0px 6px 3px #666666; -moz-box-shadow: 0px 6px 3px #666666; box-shadow: 0px 6px 3px #666666; font-family: Arial; color: #000000; font-size: 20px; padding: 10px; margin-top:3em; background: #FFDF00; text-decoration: none; } .btn:hover { background: #FFDF00; background-image: -webkit-linear-gradient(top, #FFDF00, #e3c920); background-image: -moz-linear-gradient(top, #FFDF00, #e3c920); background-image: -ms-linear-gradient(top, #FFDF00, #e3c920); background-image: -o-linear-gradient(top, #FFDF00, #e3c920); background-image: linear-gradient(to bottom, #FFDF00, #e3c920); text-decoration: none; box-shadow: 1px 1px 1px 1px #666666; } .ow-id-container-xs{ display:none; } .hidden-xs{ display:none; } .visible-xs{ display:none; } .ow-id-info-xs{ display:none; } .ow-info-container{ display:none; } /* ------------------------------------------ NAVIGATION STYLES (+ responsive-nav.css file is loaded in the ) --------------------------------------------- */ .fixed { position: fixed; width: 100%; top: 0; left: 0; } .nav-collapse, .nav-collapse * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav-collapse, .nav-collapse ul { list-style: none; width: 100%; float: left; } @media screen and (min-width: 35em) { .main{ padding-top: 2em; margin-right: auto; margin-left: auto; display: inline-block; width: 60%; padding:0; } .news{ padding: 3em 0 0 0; float: right; width: 25%; border: none; } } @media screen and (min-width: 55em) { body{ padding-top: 1em; padding-bottom: 1em; } #homepageGraphic{ content:url(../images/homepage_large.jpg); } #body{ box-shadow: 10px 10px 10px 10px #888888; font-size: 0.9em; } .nav-collapse, .nav-collapse ul { margin-right: 1em; list-style: none; width: 20%; float: left; border-right: thin solid #696969; } nav-collapse, .nav-collapse li { border-top: 0.05em solid #d3d3d3; border-bottom: .1em solid #d3d3d3; } .calltoaction img{ padding: 0 1% 0 0; max-width: 30%; } .main{ padding-top: 0; margin-right: auto; margin-left: auto; display: inline-block; width: 55%; } .news{ padding-top: 1em; float: right; width: 22%; border: none; } .banner{ content:url("../images/banner_full.png"); } } .nav-collapse li { width: 100%; float: left; } @media screen and (min-width: 35em) { .nav-collapse li { width: 25%; *width: 24.9%; /* IE7 Hack */ _width: 19%; /* IE6 Hack */ } } @media screen and (min-width: 55em) { .nav-collapse li { width: 25%; *width: 24.9%; /* IE7 Hack */ _width: 19%; /* IE6 Hack */ } } .nav-collapse a { color: #fff; text-decoration: none; width: 100%; background: #000000; border-top: 1px solid white; padding: 0.7em 1em; float: left; display: block; } div.centre{ text-align: left; width: 200px; display: block; margin-left: auto; margin-right: auto; } @media screen and (min-width: 35em) and (max-width: 55em) { .nav-collapse a { margin: 0; padding: 1em; float: left; text-align: center; border-bottom: 0; border-right: 1px solid white; display: block; } } @media screen and (min-width: 55em) { .nav-collapse a { color: #000000; margin: 0; padding: .5em; float: left; background: #FFF; text-align: center; border-top: none; } .calltoaction{ padding-top: 2em; padding-bottom: 2em; } .nav-collapse a:hover{ border-bottom:0.18em solid #FFDF00; border-right: 0.35em solid #FFDF00; } } .nav-collapse ul ul a { background: #FFDF00; } @media screen and (min-width: 55em) { .nav-collapse ul ul a:hover { border-bottom:0.18em solid #000; border-right: 0.35em solid #000; } } /* ------------------------------------------ NAV TOGGLE STYLES --------------------------------------------- */ /* @font-face { font-family: "responsivenav"; src:url("../icons/responsivenav.eot"); src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"), url("../icons/responsivenav.ttf") format("truetype"), url("../icons/responsivenav.woff") format("woff"), url("../icons/responsivenav.svg#responsivenav") format("svg"); font-weight: normal; font-style: normal; } */ .nav-toggle { position: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; text-indent: -999px; position: relative; overflow: hidden; width: 70px; height: 55px; float: right; } .nav-toggle:before { color: #000000; /* Edit this to change the icon color */ font-style: normal; font-weight: normal; font-variant: normal; font-size: 28px; text-transform: none; position: absolute; content: "≡"; text-indent: 0; text-align: center; line-height: 55px; speak: none; width: 100%; top: 0; left: 0; } .nav-toggle.active::before { font-size: 24px; content:"x"; } /*---------------*/ /* UW Search CSS */ /*---------------*/ #uw-search{ float: left; vertical-align: middle; top:20px; right:10px; } @media screen and (min-width: 35em) { #uw-search{ float: right; } } #uw-search-label{ font-size:.9em; display:none; } #uw-search-label.js{ position:relative; color:#000; background-color:#fff; } #uw-search-term{ border:solid 1px #fff; padding:2px; } .chevron-submit{ width:18px; height:18px; overflow:hidden; text-indent:-999em; line-height:0; border:none; background:url(https://uwaterloo.ca/profiles/uw_base_profile/themes/uw_core_theme/images/search-arrows.png) no-repeat -18px 0; color:#fff; cursor:pointer; } @mediaonly screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:2dppx){ .chevron-submit{ background:url(https://uwaterloo.ca/profiles/uw_base_profile/themes/uw_core_theme/images/search-arrows-2x.png) no-repeat -18px 0; background-size:54px 18px; } } #uw-search-submit:focus{ background-position:0 0; } #uw-logo{ float: left; display:block; width:20em; height:60px; text-indent:-999em; overflow:hidden; background:url(https://uwaterloo.ca/profiles/uw_base_profile/modules/features/uw_nav_global_header/images/university-of-waterloo-logo.png) no-repeat 0.2em; } @mediaonly screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:2dppx){ #uw-logo{background:url(https://uwaterloo.ca/profiles/uw_base_profile/modules/features/uw_nav_global_header/images/university-of-waterloo-logo-2x.png) no-repeat left top; } } .footer{ clear: both; border-top: 0.25em solid #FFDF00; margin-top:20px; } .footer p{ float: left; color: #FFFFFF; } .footer a{ color: #FFDF00; } .footer h4{ font-size: 1.5em; } .footer a img{ border: none; outline: none; } .retailinfo{ overflow: hidden; width: 100%; background: #000000; } .stores img{ max-width: 48%; } .socialMedia{ background-color: #000; vertical-align: middle; height:100%; float: left; } .socialMedia img{ padding:0.7em; } .addressCol { display: block; float: left; width: 100%; } @media screen and (min-width: 35em) { .stores img{ max-width: 32%; } .addressCol { display: block; float: left; width: 48%; } } @media screen and (min-width: 55em) { .stores img{ max-width: 16%; } #bookstorelogo:hover{ content:url("../images/bookstore-over.png") no-repeat -9999px -9999px; } #campustechlogo:hover{ content:url("../images/campustech-over.png") no-repeat -9999px -9999px; } #mediadoclogo:hover{ content:url("../images/mediadoc-over.png") no-repeat -9999px -9999px; } #watcardlogo:hover{ content:url("../images/watcard-over.png") no-repeat -9999px -9999px; } #waterloostorelogo:hover{ content:url("../images/waterloostore-over.png") no-repeat -9999px -9999px; } #writestufflogo:hover{ content:url("../images/writestuff-over.png") no-repeat -9999px -9999px; } .logobreak{ display: none; } .socialMedia{ display: table-cell; vertical-align: bottom; float: right; } .socialMedia img{ max-height: 3em; } .footer h4{ font-size: 1.5em; color: #000; } .footer p{ font-size: 0.75em; color: #FFF; line-height: 1.5em; } .footer a{ color: #FFDF00; text-decoration: none; } .addressCol { padding: 1em; display: block; float: left; width: auto; } body:after{ display: none; content: url("../images/writestuff-over.png") url("../images/waterloostore-over.png") url("../images/watcard-over.png") url("../images/mediadoc-over.png") url("../images/campustech-over.png") url("../images/bookstore-over.png"); }; }