/* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== CHANGES 2 */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } .boxStyle img { max-width: 100%; height: auto; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate. * Customize the background color to match your design. */ nav > div:focus,a:focus,li:focus,ul:focus { /*background-color: #000;*/ /*border:1px solid #000;*/ outline: none; background-color: #ddd !important; /*color: : #eee !important;*/ } /* ============================================================================= Links ========================================================================== */ /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440 */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } .searchfieldset { border: 0; margin: 0; padding: 0; float: left; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: default; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; white-space: normal; width: auto; *margin-left: -7px; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */ button, input { line-height: normal; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6) */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Re-set default cursor for disabled elements */ button[disabled], input[disabled] { cursor: default; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ============================================================================= Chrome Frame Prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ==|== primary styles ===================================================== Author: Resolution Interactive Media ========================================================================== */ /* ============================================================================= Less Setup ========================================================================== */ .box-sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ============================================================================= Basics ========================================================================== */ pre,body { background: #f8f8f8; color: #000000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 300; font-size: 16px; } body { text-shadow: 0 0 0 #000000; } html.lt-ie8 { overflow-x: hidden; } #logo { padding:0px;margin:0px; } h1:not(#logo), h2, h3, h4, h5 { margin: 10px 0; font-family: "proxima-nova", "Proxima Nova", Calibri, Arial, sans-serif; font-style: normal; font-weight: 600; text-transform: uppercase; } h1:not(#logo) { font-size: 22px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 13px; } a { color: #068edb; text-decoration: underline; -moz-transition: color 0.3s linear; -webkit-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; } a:hover { color: #043d86; } strong { font-style: normal; font-weight: 600; } .arr { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: normal; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input:-moz-placeholder, textarea:-moz-placeholder { color: #b7b7b7; font-style: italic; } input[type="text"], input[type="email"], input[type="date"], input[type="address"], input[type="tel"], input[type="password"], .customfile, .RadInput , .test, textarea, .DropDownSpanClass { background: #FFF; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 1px solid #043d86; font-size: 14px; color: #4d4d4d; -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25); -ms-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.25); padding: 10px; font-style: normal; font-weight: 300; font-family: "proxima-nova", "Proxima Nova", Calibri, Arial, sans-serif; } .DropDownClass {border:none;padding:0;} input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="address"]:focus, input[type="tel"]:focus, input[type="password"]:focus, textarea:focus { outline: none; } input[type="radio"], input[type="checkbox"] { margin-right: 10px; } label { float: none; padding: 6px 10px 6px 0; } select { padding: 7px 10px; width: 60%; } /* .selectWrap { display: inline-block; *display: inline; *zoom: 1; color: #000; border: 1px solid #043d86; background: url(/i/img/selectArrow.png) no-repeat 120px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); -ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-size: 12px; text-decoration: none; margin: 0; cursor: pointer; overflow: hidden; height: 34px; width: 140px; position: relative; } .selectWrap.long { width: 60%; background: url(/i/img/selectArrow.png) no-repeat 96% 0 #ffffff; } .selectWrap.long select { width: 100%; } .selectWrap select { -moz-appearance: none; -webkit-appearance: none; border: none; color: #000000; outline: none; background: transparent; padding: 0 0 0 10px; height: 34px; width: 140px; } */ /*custom upload elements*/ .customfile-input { position: absolute; height: 100px; cursor: pointer; background: transparent; border: 0; opacity: 0; -moz-opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index: 999; } .customfile { width: 75%; padding: 0; position: relative; float: left; margin-right: 10px; height: 36px; } .customfile-disabled { opacity: .5; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: default; } .customfile-feedback { display: block; margin: 1px 1px 1px 5px; font-size: 13px; color: #000; font-style: italic; padding: 5px 10px; } .customfile-feedback-populated { color: #000; font-style: normal; font-weight: bold; padding-left: 20px; background: url(/i/images/icon-generic.gif) left 4px no-repeat; } .customfile-button { float: right; background: #068edb; font-weight: 700; text-transform: uppercase; color: #FFF; padding: 6px 20px 4px; } .customfile-hover .customfile-button, .customfile-focus .customfile-button { background: #043d86; } .customfile-focus .customfile-button { outline: 1px dotted #ccc; } table { border-bottom: 1px solid #aeaeae; width: 100%; text-align: left; } th { background: #e4e4e4; } th, td { border-top: 1px solid #aeaeae; border-left: 1px solid #aeaeae; border-right: 1px solid #aeaeae; padding: 14px 10px 12px; } table tr.odd { background: #f5f5f5; } table.hover tr:hover, table.hover tr.odd:hover { background: #E2F4FE; } table#tableStyle thead tr .header { background-image: url(/i/img/dblArrow.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } table#tableStyle thead tr .headerSortUp { background-image: url(/i/img/asc.gif); } table#tableStyle thead tr .headerSortDown { background-image: url(/i/img/desc.gif); } table#tableStyle thead tr .headerSortDown, table#tableStyle thead tr .headerSortUp { background-color: #e2f4fe; } .form table, .registrationForm table { border: none; } .form table th, .registrationForm table th { background: none; } .form table thead tr th, .form table tbody tr td, .registrationForm table thead tr th, .registrationForm table tbody tr td { border-top: none; border-left: none; border-right: none; padding: 0 0 20px 0; } #container, #headerContent, #bannerNav, #calloutsContent, #footerContent, #subFooterContent, #printfooter, #breadcrumb { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } #container { position: relative; z-index: 4; line-height: 26px; clear: both; } .lt-ie8 #container { padding: 20px 0 60px; } .lt-ie8 .home #container { padding-bottom: 0; } /* ============================================================================= Header ========================================================================== */ header { width: 100%; background: #FFF; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); /*-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); -ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);*/ height: 100px; position: relative; z-index: 5; } #logo { float: left; background: #068edb; } #logo a { display: inline-block; padding: 30px 20px 25px; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); -ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); border: none; } #logo img { width: 208px; height: 67px; border: none; } #subNav { float: right; font-size: 12px; margin: 25px 0 0 0; } .hasChildren.accessible-megamenu-top-nav-item:hover > * { color: #000; /*background: url(/i/img/navArrowHover.png) no-repeat right #ffffff;*/ border: 1px solid #717171; border-bottom: transparent; } .lt-ie8 #subNav { width: 575px; } @-moz-document url-prefix() { #subNav { width: 550px; } #fr #subNav { font-size: 11px; width: 650px; } } #subNav ul { margin: 0; list-style: none; padding: 0; float: left; } #subNav li { display: inline; } #subNav a { color: #000; text-decoration: none; padding: 0 3px; } #subNav a:hover { color: #068edb; } #subNav .form { float: right; margin: -4px 0 0 10px; position: relative; } #subNav input[type="text"] { font-size: 11px; color: #000; border: 1px solid #000; padding: 5px 5px 5px 22px; opacity: 0.25; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; width: 110px; } #subNav input[type="text"]::-webkit-input-placeholder, #subNav input[type="text"]:-moz-placeholder { color: #000; font-style: italic; } #subNav input[type="text"]:focus { opacity: 0.6; } #subNav input[type="submit"] { display: block; position: absolute; left: 8px; top: 6px; text-indent: -9999px; width: 12px; height: 12px; background: url(/i/img/searchIcon.png) no-repeat; border: 0; } .li-ie8 #subNav input[type="submit"] { left: 20px; } li.tabFocus a[id*='ctl02_ctl01_RepeaterMegaMenuSiteSection_HyperLinkSiteSection'] { color: #000; background: url(/i/navArrowHover.png) no-repeat right #ffffff; border: 1px solid #717171; border-bottom: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } nav { float: right; font-style: normal; font-weight: bold; margin: 15px 0 0 0; } .lt-ie8 nav { clear: right; width: 870px; } .lt-ie8 #fr nav { width: 864px; } nav ul { list-style: none; margin: 0; padding: 0; position: relative; } nav li { display: inline-block; margin-right: 5px; *display: inline; *zoom: 1; } nav a { font-size: 18px; color: #000000; text-transform: uppercase; text-decoration: none; padding: 5px 35px 5px 5px; background: url(/i/img/navArrow.png) no-repeat right; border: 1px solid transparent; position: relative; z-index: 2; } #fr nav a { font-size: 16px; } nav a:hover, nav li.hover a { color: #000; background: url(/i/img/navArrowHover.png) no-repeat right #ffffff; border: 1px solid #717171; border-bottom: transparent; } nav ul ul { position: absolute; z-index: 1; right: 0; left: 0; background: #FFF; border: 1px solid #717171; padding: 15px 0; display: none; margin-top: 2px; } nav ul[role="group"] { border-bottom: 1px solid #717171 !important; min-height: 350px; } .lt-ie8 nav ul ul { margin-top: 30px; } .lt-ie8 nav ul ul ul { margin-top: 0; width: 275px; } .lt-ie8 nav ul ul ul ul { width: 290px; left: 280px; } .lt-ie8 nav ul ul ul li { width: 88%; } nav ul ul li { display: block; } nav ul ul ul { display: block; float: left; width: 313px; position: relative; padding: 0; min-height: 340px; border: none; margin-top: 0; } #fr nav ul ul ul { width: 313px; } nav ul ul ul a:hover { border: none; border-bottom: 1px solid #cccccc; } nav ul ul ul li { width: 100%; /*position: relative;*/ padding: 0 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } nav ul ul li:after { background-color: #fff; content: ''; display: block; position: relative; float: right; right: 0px; height: 1px; bottom: 1px; width: 20px; z-index: 3; } nav ul ul ul ul li:after { display: none; } nav ul ul ul li a:hover { color: #4d4d4d; } nav ul ul ul li.hasChildren:hover { background: #f2f2f2; } nav ul li ul a, nav ul li.hover ul a { color: #000; text-transform: none; font-size: 14px; display: block; padding: 5px 0; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; border-bottom: 1px solid #cccccc; background: none; } #fr nav ul li ul a, #fr nav ul li.hover ul a { font-size: 14px; padding: 5px 25px 5px 0px; } nav ul ul a:hover { background: none; color: #000; } nav ul ul ul .hasChildren a { background: url(/i/img/subNavArrow.png) no-repeat 93% center; } nav ul ul ul li.hasChildren.hover a { border: none; border-bottom: 1px solid #cccccc; /*background: none;*/ } nav ul ul ul ul { position: absolute; left: 293px; top: 0; bottom: 0; width: 320px; background: #f2f2f2; padding: 5px 0 10px; display: none; /*min-height: inherit;*/ min-height: 324px; } #fr nav ul ul ul ul { position: absolute; left: 293px; top: 0; bottom: 0; width: 320px; background: #f2f2f2; padding: 5px 0 10px; display: none; /*min-height: inherit;*/ min-height: 340px; } nav ul ul ul li:first-child ul { display: block !important; } ul[role="group"] li ul li ul:hover { display: block !important; } #fr nav ul ul ul ul { left: 293px; width: 310px; } nav ul ul ul li.default.initial { background: #f2f2f2; } nav ul ul ul ul li { padding: 0 10px; background: none; } nav ul ul ul ul a, nav ul li.hover ul ul ul a { border-bottom: 1px solid #cccccc; background: none !important; } nav ul ul ul ul a:hover { color: #4d4d4d; } nav .info { position: absolute; right: 15px; color: #000; top: 15px; width: 259px; font-weight: 300; font-size: 12px; color: #333333; } nav .info img { width: 100%; } nav .info h4 { font-size: 15px; margin: 10px 0 0; color: #000; } nav .info h4 a { text-decoration: none; } nav .news { margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #cccccc; } nav .info .news h4 { margin: 3px 0; } nav ul li ul .info a { padding: 0; margin: 0; border-bottom: none; width: auto; text-decoration: underline; } nav ul li ul .info a:hover { color: #4d4d4d; border: 0; } nav .info .allNews { float: right; margin: 10px 0 0 0; } .navControl { display: none; float: right; margin-top: 35px; overflow: hidden; } .navControl a { color: #FFF; text-decoration: none; } /* ============================================================================= Banner ========================================================================== */ #banner, #innerBanner { width: 100%; position: absolute; z-index: 1; top: 0; left: 0; overflow: hidden; height: 530px; background: #bbb; border-bottom: 32px solid #000; } #banner div.prev { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; background: url(/i/img/tranBg.png) repeat; } #banner div.next { position: absolute; top: 0; bottom: 0; right: 0; z-index: 3; background: url(/i/img/tranBg.png) repeat; } #banner ul { list-style: none; margin: 0; padding: 0; width: 9999px; position: absolute; left: 0; top: 100px; } #banner ul.bw { z-index: 1; } #banner ul.color { z-index: 2; } #banner li { display: inline-block; *display: inline; *zoom: 1; float: left; position: relative; height: 395px; } #banner img { max-width: 1100px; } #banner li.active img { -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); -ms-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); } #banner li div { position: absolute; z-index: 3; bottom: -25px; left: 0px; color: #FFF; font-style: normal; font-weight: 300; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); padding: 10px 20px; background: url(/i/img/bannerTextBg.png) repeat; background: rgba(0, 0, 0, 0.55); width: 420px; display: none; } #banner li.active div { display: block; } #banner li div h4 { margin: 0 0 3px; } #banner li div a { color: #FFF; font-weight: 600; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } #banner li div a:hover { color: #FFF; font-weight: 600; opacity: 0.8; } #bannerNav, #breadcrumb { margin-top: 435px; position: relative; z-index: 3; } .lt-ie8 #bannerNav .prev, .lt-ie8 #bannerNav .next, .lt-ie8 #bannerNav ul { margin-top: 435px; } #bannerNav a { color: #FFF; text-decoration: none; font-style: normal; font-weight: 600; font-size: 13px; float: left; margin-top: 2px; } #bannerNav a:hover { color: #b3b3b3; } #bannerNav a.disabled { color: #666666; cursor: default; } #bannerNav ul { list-style: none; margin: 0 10px; padding: 0; float: left; } #bannerNav li { display: inline; } #bannerNav ul a { width: 15px; height: 15px; text-indent: -9999px; display: block; background: #068edb; margin: 3px 3px 0; -moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.1); -ms-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.1); -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } #bannerNav ul li.selected a, #bannerNav ul a:hover { background: #043d86; } #bannerNav a:focus { color:Black; } /*Inner Banner-------------------------------------------------------------- */#innerBanner { height: 368px; } #bannerImg { margin-top: 100px; } #bannerImg img { width: 100%; } /*No Banner----------------------------------------------------------------- */.noBanner #innerBanner { display: none; } .noBanner .two-column .colA { margin-top: 40px; } .noBanner .two-column .colB { margin-top: 120px; } .noBanner #findATeacher { position: absolute; right: 20px; margin: 0; top: -20px; } /*Breadcrumb----------------------------------------------------------------- */#breadcrumb { margin-top: 146px; color: #999; z-index: 4; } #breadcrumb div { float: left; margin-top: 128px; max-width: 68%; /* text-overflow: ellipsis;*/ /* white-space: nowrap;*/ /* overflow: hidden;*/ background-color:Black; margin:5x; padding-left:5px; padding-right:5px; } .lt-ie8 #breadcrumb div { margin-top: 270px; } #breadcrumb a { color: #FFF; } /*Breadcrumb No Banner */ .noBanner #breadcrumb a { color: #068edb; } .noBanner #breadcrumb { margin-top: 0; } .noBanner #breadcrumb div { float: none; margin-top: 62px; } /* ============================================================================= Templates ========================================================================== */.main { width: 100%; float: left; clear: both; } /*One Column------------------------------------------------------------------ */.one-column .colA { width: 100%; float: left; margin: 0px 0 50px; } /*Two Column------------------------------------------------------------------ */.two-column .colA { position: relative; width: 67.5%; float: left; margin: 0px 0 50px; } .two-column .sharing { margin: -40px 0 50px; } .two-column .frsharing { margin: -60px 0 50px; } .two-column .colB { float: right; width: 27.9%; margin: 30px 0 50px; } .home .two-column .colB { margin: 30px 0 50px; } /*Three Column------------------------------------------------------------------ */.three-column .colA { width: 33.33%; float: left; } .three-column .colB { float: left; width: 33.33%; } .three-column .colC { float: right; width: 33.33%; } /*Two Column 75% 25% for apps------------------------------------------------------------------ */.two-column-app .colA { width: 69.28%; float: left; margin: 30px 0 50px; } .two-column-app .colB { float: right; width: 24.99%; margin: 30px 0 50px; } .home .two-column-app .colB { margin: 30px 0 50px; } /* ============================================================================= Specific Styles ========================================================================== *//*Box Style------------------------------------------------------------------- */ .boxStyle { background: #FFF; border: 1px solid #848484; border-bottom: 3px solid #043d86; padding: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; margin: 15px 0; } .lt-ie8 .boxStyle { padding: 3%; width: 93%; } .boxStyle h2 { margin: 0 0 20px; color: #043d86; font-size: 22px; } .boxStyle h2 p { color: #000; } /*Inline resource */ .leftresource { float: left; width: 50%; } .leftresource a, .rightresource a { display: inline-block; } .leftresource a:link img, .rightresource a:link img { border: 1px solid #fff !important; } .leftresource a:hover img, .rightresource a:hover img, .leftresource a:focus img, .rightresource a:focus img { border: 1px solid #7fcffb !important; } /*Button Style---------------------------------------------------------------- */ .btnStyle { /* spacing between buttons */ margin-top: 5px; margin-right: 5px; } /* .btnContainer .btnStyle { display: inline; border: 1px solid red; } */ .btnStyle, input.btnStyle { background: #043d86; border: 3px solid #011023; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; text-align: center; color: #FFF; text-transform: uppercase; font-size: 14px; font-style: normal; font-weight: 600; padding: 8px 12px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .btnDisabled { background:#999; border: 4px solid #999; cursor: wait; } a:hover.btnStyle, input:hover.btnStyle { background: #054fae; } /*Image Wrap------------------------------------------------------------------ */ .imgWrap { border: 3px solid #FFF; outline: 1px solid #b8b8b8; float: left; overflow: hidden; } .imgWrap a { display: inline-block; } .imgWrap a:link img { border: 1px solid #fff !important; } .imgWrap a:hover img, .imgWrap a:focus img { border: 1px solid #7fcffb !important; } .video { position: relative; z-index: 1; } .video .play { position: absolute; top: 50%; left: 50%; z-index: 2; margin: -19px 0 0 -19px; background-color: #000; opacity: 0.75; padding: 5px 12px 7px 13px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; cursor: pointer; } .play img { width: 13px; height: 17px; } .video span:hover.play { opacity: 1; } /*Icons----------------------------------------------------------------------- */.icon { display: block; text-align: left; text-indent: -9999px; } .icon.access { background: url(/i/img/icons.png) -28px -28px no-repeat; width: 18px; height: 18px; } .icon.download { background: url(/i/img/icons.png) -56px 0px no-repeat; width: 18px; height: 18px; } .icon.pay { background: url(/i/img/icons.png) 0px -56px no-repeat; width: 18px; height: 18px; } .icon.find { background: url(/i/img/icons.png) -56px -20px no-repeat; width: 18px; height: 18px; } .icon.facebook { background: url(/i/img/icons.png) 0px 0px no-repeat; width: 26px; height: 26px; } .icon.twitter { background: url(/i/img/icons.png) -46px -46px no-repeat; width: 27px; height: 27px; } .icon.print { background: url(/i/img/icons.png) -28px 0px no-repeat; width: 26px; height: 26px; } /*General Content------------------------------------------------------------- */ h2.heading { padding-bottom: 12px; border-bottom: 1px solid #7a7a7a; margin-bottom: 20px; } #content h4, #teacherResult h4, #store h4 { margin-bottom: 0; } /*Find a Teacher-------------------------------------------------------------- */#findATeacher { float: right; background: #068edb; color: #FFF; width: 100%; margin: -120px 0 0 0; -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); -ms-box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); width: 335px; } #findATeacher .headingWrap { position: relative; background: url(/i/img/questionIcon.png) 290px 25px no-repeat #043d86; padding: 15px; } /*#findATeacher .headingWrap .icon { background:; width: 24px; height: 23px; position: absolute; left: 120px; }*/ #findATeacher h2 { margin: 0 0 -3px; } #findATeacher .form { margin: 15px; } #findATeacher input[type="text"] { width: 210px; } #fr #findATeacher input[type="text"] { /*French #findATeacher*/ width: 168px; } #findATeacher .btnStyle { float: right; margin-top: 1px; } .lt-ie8 #findATeacher .btnStyle { float: right; margin-top: -40px; } /*Find a TeacherMain-------------------------------------------------------------- */#findATeacherMain { background: #068edb; color: #FFF; width: 100%; -moz-box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); -ms-box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); box-shadow: 0 0 13px rgba(0, 0, 0, 0.35); width: 335px; } #findATeacherMain .headingWrap { position: relative; background: url(/i/img//questionIcon.png) 290px 25px no-repeat #043d86; padding: 15px; } /*#findATeacher .headingWrap .icon { background:; width: 24px; height: 23px; position: absolute; left: 120px; }*/ #findATeacherMain h2 { margin: 0 0 -3px; } #findATeacherMain .form { margin: 15px; } #findATeacherMain input[type="text"] { width: 210px; } #findATeacherMain .btnStyle { float: right; margin-top: 1px; } .lt-ie8 #findATeacherMain .btnStyle { float: right; margin-top: -40px; } /*News Widget---------------------------------------------------------------- */ #newsWidget h2 { float: left; width: auto; margin: 0; } #newsWidget h2 + a { float: right; } #newsWidget ul, #latestCommunication ul { float: left; width: 100%; clear: both; list-style: none; margin: 0; padding: 0; } #newsWidget li, #latestCommunication li { display: block; width: 100%; margin: 10px 0; opacity: 0.5; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } #newsWidget li:first-child, #newsWidget li:hover, #latestCommunication li:first-child, #latestCommunication li:hover { opacity: 0.99; } #newsWidget .imgWrap { height: 90px; margin: 5px 10px 10px 0; } #latestCommunication .imgWrap, #collegeCommunicationsInner .imgWrap { margin: 5px 10px 10px 0; } #newsWidget .imgWrap img { width: 90px; } #newsWidget li:first-child .imgWrap { height: 90px; padding-bottom: 3px; } .colB #newsWidget li:first-child .imgWrap { margin-bottom: 35px; } #newsWidget ul span { font-style: italic; font-size: 13px; color: #686868; } #newsWidget ul h3, #latestCommunication ul h3 { margin: 0 0 3px; text-transform: none; } #newsWidget ul h3 a, #latestCommunication ul h3 a { text-decoration: none; color: #068edb; } #newsWidget ul h3 a:hover, #newsWidget ul h3 a:focus, #latestCommunication ul h3 a:hover, #latestCommunication ul h3 a:focus { color: #043d86 !important; } #newsWidget ul p, #latestCommunication p { margin: 0; } /*About Widget---------------------------------------------------------------- */ #aboutWidget h2 { margin: 0; } #aboutWidget p { margin: 10px 0 0; } #aboutWidget a { overflow-wrap: break-word; word-wrap: break-word; } #aboutWidget a:link img { border: 1px solid #fff !important; } #aboutWidget a:hover img, #aboutWidget a:focus img { border: 1px solid #7fcffb !important; } /*Members Widget-------------------------------------------------------------- */ #membersWidget ul, #innerNav ul { list-style: none; margin: 0; padding: 0; } #membersWidget h3, #innerNav h3 { margin: 10px 0 0; } #membersWidget li, #innerNav li { display: block; width: 100%; margin: 8px 0; } #membersWidget a, #innerNav li a { display: block; font-size: 16px; font-style: normal; font-weight: 600; color: #FFF; background: #068edb; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; text-decoration: none; padding: 4px 10px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } #membersWidget a:hover, #innerNav a:hover { background: #043d86; } #membersWidget .iconWrap { float: left; background: #043d86; padding: 8px; margin: -4px 15px 0 -10px; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } #membersWidget .iconWrap.access { padding: 7px 7px 9px 9px; } /*Inner Navigation------------------------------------------------------------- */ #innerNav { margin-bottom: 40px; } /*#innerNav ul ul { display: none; background: @accent2; margin: 0 10px 0; padding: 10px 0; .border-radius(0 0 5px 5px); } #innerNav ul ul li { margin:0; } #innerNav ul ul li a { background: none; font-size: 14px; font-weight: 500; padding: 0 10px; .border-radius(0 0 0 0); } #innerNav ul ul li a:hover { background: @accent; }*/ /*OCT CHANGE*/ #innerNav ul ul { /* display: none;*/ background: #043d86; margin: 0 10px 0; padding: 10px 0; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; behavior: url(/i/js/PIE.htc); } #innerNav ul ul li { margin: 0; } #innerNav ul ul li a { background: none; font-size: 14px; font-weight: 500; padding: 0 10px; -moz-border-radius: 0 0 0 0; -webkit-border-radius: 0 0 0 0; -ms-border-radius: 0 0 0 0; border-radius: 0 0 0 0; behavior: url(/i/js/PIE.htc); } #innerNav ul ul li a:hover { background: #068edb; } /*END OCT CHANGE*/ #innerNav.fixed { position: fixed; top: 0; } .guideMenu { display: none; position: fixed; top: 0; right: 0; background: #000; padding: 10px 20px; color: #FFF; } /*Become a Teacher Widget------------------------------------------------------ */ #becomeATeacherWidget { margin: 40px 0; position: relative; } #becomeATeacherWidget .content { background: #EEE; padding: 15px 100px 15px 15px; font-size: 15px; line-height: 22px; } #becomeATeacherWidget p { margin: 0 0 5px; } #becomeATeacherWidget img { position: absolute; right: -20px; bottom: 0; } /*Ad Widgets----------------------------------------------------------------- */ #sideColAd { margin: 40px 0 0 0; position: relative; } /*Callouts------------------------------------------------------------------- */ #callouts { background: #068edb; width: 100%; clear: both; color: #FFF; line-height: 26px; } #calloutsContent { float: none; position: relative; } #callouts .colA, #callouts .colB, #callouts .colC { padding: 0 20px; margin: 35px 0 45px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid #37a4e1; border-right: 1px solid rgba(255, 255, 255, 0.2); min-height: 420px; } .lt-ie8 #callouts .colA, .lt-ie8 #callouts .colB, .lt-ie8 #callouts .colC { width: 378px; } #callouts .colA { padding-left: 0; } #callouts .colC { border-right: none; padding-right: 0; } /*#callouts .colC.tooShort { position: absolute; right: 0; top: 0; bottom: 0; }*/ #callouts ul { list-style: none; margin: 0; padding: 0; } #callouts li { width: 100%; border-top: 1px solid #37a4e1; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 20px 0; } #callouts li:first-child { border: none; padding-top: 0; } #callouts .imgWrap { outline: 1px solid #043d86; /* width: 100%; height: 170px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; */ margin: 5px 0 15px; } #callouts .imgWrap img { width: 100%; } #callouts .play img { width: 13px; height: 17px; } #callouts a { color: #FFF; font-style: normal; font-weight: 600; } #callouts a:hover { color: #043d86; } .facebookLink { background: url(/i/img/facebookIcon.png) no-repeat left; padding: 7px 0 7px 25px; } /*Teacher Result--------------------------------------------------------------*/ #teacherResult .former { display:block; line-height:1.25em; margin-bottom:0.5em; } #teacherResult h2 { margin-bottom: 10px; } #teacherResult h2 div { margin: 0; padding: 0; border: 0; } #teacherResult h2 span.name, #teacherResult h2 li a.nameDropDown { float: left; width: auto; border: none; color: #043d86; margin: 0; } #teacherResult p.status { display: block; width: 100%; font-size:large; } #teacherResult h2 ul { position: relative; margin: 0; list-style: none; padding: 0; } #teacherResult h2 li { position: relative; float: left; margin: 2px 0 0 6px; } #teacherResult h2 li a.nameDropDown { position: relative; background: #043D86; width: 15px; height: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } #teacherResult h2 ul li ul { position: absolute; top: 20px; display: none; right: -100px; } #teacherResult h2 ul li ul li { background: #043D86; padding: 7px 20px 6px; width: 168px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #FFF; font-size: 14px; font-weight: 400; text-transform: capitalize; z-index:9999; } #teacherResult .nameDropDown .arrow { position: absolute; top: 8px; left: 3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; } #teacherResult h2 span { color: #bbb; } #teacherResult h4 { position: relative; padding-top: 10px; } #teacherResult h2 p { padding: 0; margin: 0; font-size: 13px; font-weight: 300; text-transform: capitalize; } #teacherResult article, #store article { width: 100%; border-bottom: 1px solid #7a7a7a; padding-bottom: 10px; margin-bottom: 10px; clear: both; } #teacherResult ul li { position: relative; } /*OCT CHANGE*/ #teacherResult ul li .right, #teacherResult h4 .right { position: absolute; top: 0; right: 0; font-weight: 600; font-style: italic; } #teacherResult h4 .right { padding-top: 10px; } /*END OCT CHANGE*/ /*NEW CHANGE OCT SEPT 18 2012*/ #teacherResult ul li .spacer { float: right; width: 30px; height: 30px; padding-left: 20px; } .spacer2 { float: right; width: 30px; height: 10px; padding-left: 20px; } /*#teacherResult h4 { float: left; width: 100%; }*/ .infoBtn { position: relative; display: inline-block; *display: inline; *zoom: 1; background: url(/i/img/icons/infoBtn.png) no-repeat; width: 18px; height: 18px; margin: -3px 6px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .infoBtn:hover { background: url(/i/img/icons/infoBtnHover.png) no-repeat; } #teacherResult a { cursor: pointer; } /*Store-----------------------------------------------------------------------*/ #store td.title { width: 300px; } #store td.price { width: 63px; color: #068edb; font-style: italic; font-weight: 600; text-align: right; white-space:nowrap; } #store td.cta { width: 162px; } #store div:last-child { border-bottom: none; } #store table { margin-bottom: 10px; } #store ul.threeCol .price { padding-left: 16px; } #store ul.threeCol, #store ul.twoCol { position: relative; list-style: none; padding: 0; margin: 0; clear: both; } #store ul.threeCol li { position: relative; float: left; width: 180px; margin: 0 25px 10px 25px; line-height: 18px; } #store ul.threeCol li:nth-child(3), #store ul.threeCol li.third { margin-right: 18px; } #store ul.threeCol li img { position: relative; width: 166px; height: 100px; border: 1px solid #dedede; margin-bottom: 10px; } #store ul.twoCol li { float: left; width: 254px; } #store ul.twoCol li:first-child { margin-right: 20px; } /*Members----------------------------------------------------------------------*/ .lt-ie8 #members .boxStyle { width: 800px; } #members .colA h2 { margin-left: 20px; } #members .colA .boxStyle { padding: 20px 0; } #members .colA ul { position: relative; float: left; width: 100%; margin: 0; padding: 0; list-style: none; } #members .colA a, #members .colA h4 { position: relative; display: block; padding: 10px 20px 10px; border-top: 1px solid #7a7a7a; line-height: 30px; } .lt-ie8 #members .colA a, .lt-ie8 #members .colA h4 { border-bottom: 1px transparent solid; float: left; width: 760px; vertical-align: top; } #members .colA a:nth-child(odd), #members .colA a.odd { background: #f5f5f5; } #members .colA h4 { margin: 0; } #members .colA img { margin-right: 20px; } #members .colA span { float: right; background: url(/i/img/arrow.png) no-repeat; width: 20px; height: 20px; margin-top: 5px; } #members .colA span:hover { margin-right: -2px; } /*Member Info------------------------------------------------------------------*/ #memberInfo { float: left; margin: 0 0 40px; } #memberInfo ul { background: #EEE; padding: 8px 10px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0; list-style: none; } .lt-ie8 #memberInfo ul { width: 315px; } #memberInfo li { display: block; width: 100%; float: left; margin: 2px 0; } #memberInfo span:first-child { color: #888; } #memberInfo span { display: block; } #memberInfo input { width: 80%; } #memberInfo h3 span { float: right; text-align: right; text-transform: capitalize; font-size: 13px; width: 25px; } /*Search-----------------------------------------------------------------------*/ .alertBox { float: left; width: 95.1%; background: #043d86; padding: 14px 20px 12px; color: #FFF; font-size: 14px; margin-top: 10px; } .alertBox .left { float: left; } .alertBox .right { float: right; font-weight: 500; font-style: italic; } #search ul { position: relative; margin: -20px; list-style: none; padding: 0; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } #search li { padding: 20px; border-bottom: 1px solid #7a7a7a; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } #search li:nth-child(even), #search li.even { background: #f5f5f5; } #search li h3 { margin: 0 0 5px 0; } #searchBox { float: left; width: 95.1%; background: #068edb; padding: 14px 20px 12px; } #searchBox input[type="text"] { width: 78%; } .lt-ie8 #searchBox input[type="text"] { width: 76%; } #search li p { margin: 0; } #search li span { color: #bbb; } #search ul:hover { color: #bbb; } #search ul li:hover { color: #000; } .lt-ie8 #search ul:hover { color: #000; } .lt-ie8 #search ul li:hover { color: #000; } #filterBox.boxStyle { margin-bottom: 0; border-bottom: 1px solid #848484; } #filterBox span { margin-right: 14px; } #searchNav ul { background: #eee; padding: 20px 0 20px 40px; } /*Contact---------------------------------------------------------------------*/ .contactForm { float: left; width: 100%; } .contactForm input[type="text"], .contactForm input[type="email"] { width: 73%; } .contactForm div { float: left; width: 100%; margin-bottom: 14px; } .contactForm div.selectWrap { background: url(/i/img/selectArrow.png) no-repeat 153px 0 #ffffff; width: 175px; margin-bottom: 0; } .contactForm div label { width: 65px; } .contactForm div.left { float: left; width: 47.2%; } .contactForm div.right { float: right; width: 47.2%; } .contactForm textarea, .contactForm div input.subject { width: 87%; } #contact tr.odd, #contact tr.odd:hover, #contact tr:hover { background: none; } .contact a { overflow-wrap: break-word; word-wrap: break-word; } .map { margin-top: 40px; /*float: left; width: 250px; height: 175px; margin-top: 40px;*/ } /*--- Address container at Payment Summary ------------------------------------------*/ .address, .updateAddress { display: inline-block; } .updateAddress { vertical-align: top; width: 30%; } .address { padding-bottom: 3.5em; } /*Simple Form------------------------------------------------------------------*/ .form.simple { background: #E4E4E4; border: 1px solid #AEAEAE; padding: 15px; } .form.simple label { float: none; } .form.simple table tbody tr td { padding-bottom: 10px; } /*Members----------------------------------------------------------------------*/ #calendar h3 { float: left; width: auto; margin-top: 0; } #calendar select { float: right; width: 20%; } #calendar .calNav { float: right; padding-left: 2%; margin-top: -7px; } #calendar .calNav a.prev, #calendar .calNav a.next { background: #068edb; font-size: 30px; color: #FFF; padding: 0px 15px 2px 14px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; text-decoration: none; } #calendar .calNav a.next { padding: 0px 14px 2px 15px; } #calendar table tr.odd { background: #FFF; } #calendar th { text-align: center; } #calendar tr, #calendar td { width: 131px; padding: 4px; } #calendar td { height: 111px; } #calendar .calDayNumber.previousMonth { color: #999; } #calendar td.currentDay { background: #e2f4fe; } #calendar td span { display: block; background: url(/i/img/calicon.png) no-repeat left center; font-size: 12px; padding: 2px 6px 2px 14px; line-height: 14px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .backBtn { position: fixed; background: #068edb; padding: 6px 15px; left: 40px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } /*Img Style--------------------------------------------------------------------*/ img.imgStyle { border: 3px solid #EEE; float: left; margin: 5px 15px 0 0; } img.imgStyle.right { float: right; margin: 5px 0 0 10px; } figure.imgStyle { float: left; display: table; width: 100px; margin: 5px 15px 0 0; } figure.imgStyle img.imgStyle { margin: 0; } figure.imgStyle.right { float: right; margin: 5px 0 0 10px; } figure.imgStyle.right img.imgStyle.right { margin: 0; } figcaption { font-style: italic; } .lt-ie9 figcaption { float: left; width: 100%; } .lt-ie9 figure.imgStyle.right figcaption { float: right; } /*Member Card-----------------------------------------------------------------*/ #memberCard { width: 100%; float: left; } #memberCard header { background: #068edb; -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); padding: 15px 20px; height: auto; border-bottom: 3px solid #043d86; } #memberCard #container { margin: 20px 0; font-size: 12px; color: #444444; line-height: 18px; font-weight: 600; } #memberCard h2 { font-size: 14px; } #memberCard h2 span { color: #aaaaaa; } #memberCard .callout { background: #068edb; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #FFF; padding: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 13px; font-weight: 300; } #memberCard .callout strong { color: #FFF; } #memberCard .french { color: #777777; } #memberCard p strong { color: #000; } #hearingSchedule table tr td h4:first-child { margin-top: 0; } #discounts .colA div { border-bottom: 1px solid #CCC; padding-bottom: 8px; margin-bottom: 20px; } .extensions { margin: 20px 0 0 0; background: #f5f5f5; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; padding: 10px; } #collegeCommunicationsInner .colA article { float: left; width: 100%; border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 20px; } #collegeCommunicationsInner .colA article p { margin: 0; } #collegeCommunicationsInner h1 { position: relative; } #collegeCommunicationsInner h1 a { position: absolute; right: 0; font-weight: 300; text-transform: capitalize; font-size: 15px; } .textModBox { position: absolute; left: 20px; top: 36px; } .noBanner .textModBox { position: absolute; left: 20px; top: 8px; } .lt-ie8 .textModBox { top: 65px; } .textModBox a { cursor: pointer; background: #043d86; color: #FFF; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; text-decoration: none; } .textModBox #linkSmall { font-size: 12px; padding: 5px 5px 3px 5px; } .textModBox #linkNormal { font-size: 14px; padding: 3px 5px 2px 5px; } .textModBox #linkLarge { font-size: 16px; padding: 1px 5px 2px 5px; } /*Accodion------------------------------------------------------------------*/ #accordion h2 { margin: 30px 0 0; } #accordion h3 { text-transform: capitalize; cursor: pointer; font-weight: 400; padding: 8px; border-bottom: 1px solid #dedede; } #accordion h3:hover { background: #EEE; } #accordion h3 span { font-size: 12px; color: #777; margin-left: 10px; } #accordion div { display: none; } /*Alternative Bullet Points--------------------------------------------------*/ ul.altBullet { margin: 0; padding: 0; list-style: none; } ul.altBullet li { background: url(/i/img/bulletAlt.png) left center no-repeat; padding-left: 20px; } /*Pagination------------------------------------------------------------------*/ .pagination { float: left; clear: both; margin: 10px 0 50px 0; background: #F2F2F2; border: 1px solid #7a7a7a; font-size: 12px; color: #777; text-align: center; font-weight: 600; width: 472px; } .pagination .previous a:hover, .pagination .previous a.current, .pagination .prev.current, .pagination .previous a, .pagination .prev a, .pagination .previous.disabled { border-left: none; } .pagination span.disabled, .pagination .previous.current, .pagination .prev.current, .pagination .next.current { color: #CCC; background: none; padding: 8px 14px 6px; float: left; display: inline-block; *display: inline; *zoom: 1; zoom: 1; /*border-left: 1px solid #7a7a7a;*/ font-weight: normal; } .pagination a:hover, .pagination a.current, .pagination .current { padding: 8px 14px 6px; display: inline-block; *display: inline; *zoom: 1; zoom: 1; background-color: white; float: left; border-left: 1px solid #7a7a7a; font-weight: bold; } .pagination .previous, .pagination .prev { border-left: none; } .pagination a, .pagination span { color: #777; text-decoration: none; padding: 8px 14px 6px; display: inline-block; *display: inline; *zoom: 1; zoom: 1; border-left: 1px solid #7a7a7a; margin: 0px; float: left; } .pagination a { cursor: pointer; } .pagination span { background: #FFF; } .pagination span.previous, .pagination span.next { background: #f5f5f5; color: #bbb; } /*ToolTip---------------------------------------------------------------------*/ .toolTipDrop { position: absolute; top: 25px; width: 180px; left: -80px; max-width: 240px; font-size: 13px; font-weight: 400; text-transform: none; color: #333; text-shadow: 0 0 1px #FFF; line-height: 18px; padding: 4px 8px; border: 1px solid #888; background: #eee; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; box-shadow: 0 0 2px #dedede; -webkit-box-shadow: 0 0 2px #dedede; -moz-box-shadow: 0 0 2px #dedede; text-decoration: none; z-index: 99999; display: none; } .toolTipDrop:after { content: ''; position: absolute; top: -6px; left: 82px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #888; } .toolTipPlease .tiptipClose { position: absolute; top: -9px; right: -9px; display: none; } /*Ad Boxes--------------------------------------------------------------------*/ .adBox300 { position: relative; float: left; background: #000; border: 17px solid #eee; /*width: 300px; height: 250px;*/ } .adBox300 img { max-width:100%; } #fourOhFour .adBox300 { margin-top: 40px; } .sharing * .alertBoxGood, .sharing * .alertBoxWarning, .sharing * .alertBoxBad, .sharing * .alertBoxGeneral { width:50%; } .alertBoxGood, .alertBoxWarning, .alertBoxBad, .alertBoxGeneral { background-color: #FFF; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; text-align: left; color: #000; text-transform: uppercase; font-size: 14px; font-style: normal; font-weight: 600; padding: 8px 12px 8px 40px; margin-bottom: 40px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; } .alertBoxGood { background: url(/i/img/icons/alertGood.png) no-repeat #ffffff; background-position: 10px center; border: 2px solid green; } .alertBoxWarning { /*AODA: Warning messages should be in red. */ /*background: url(/i/img/icons/alertWarning.png) no-repeat #ffffff;*/ /*border: 2px solid #e4de00;*/ background: url(/i/img/icons/alertBad.png) no-repeat #ffffff; background-position: 10px center; border: 2px solid red; } .alertBoxBad { background: url(/i/img/icons/alertBad.png) no-repeat #ffffff; background-position: 10px center; border: 2px solid red; } .alertBoxGeneral { background: url(/i/img/icons/alertGen.png) no-repeat #068edb; background-position: 10px center; border: 2px solid #043d86; color: #FFF; } a:hover.btnStyle, input:hover.btnStyle { background: #054fae; } /* ============================================================================= Footer ========================================================================== */ #printheader {display:none;} .printonly {display:none;} footer { clear: both; width: 100%; background: #043d86; color: #FFF; padding: 40px 0 30px; line-height: 22px; } #footerContent ul,#footerContent404 ul { margin: 0; padding: 0; float: left; width: 100%; list-style: none; } #footerContent li, #footerContent404 li { float: left; width: 18%; margin: 0 1% 0 1%; } #footerContent li ul, #footerContent404 li ul { margin: 5px 0 0 0; } #footerContent ul ul li, #footerContent404 ul ul li { width: 100%; margin: 4px 0; background: url(/i/img/footerBullet.png) no-repeat left 8px; padding-left: 8px; } #footerContent li:first-child ul li, #footerContent ul ul li:first-child, #footerContent404 li:first-child ul li, #footerContent404 ul ul li:first-child { margin: 4px 0; } #footerContent a,#footerContent404 a { text-decoration: none; color: #FFF; font-size: 16px; text-transform: uppercase; font-style: normal; font-weight: 600; } #footerContent404 a {color:#000000;} #footerContent ul ul a, #footerContent404 ul ul a { font-size: 16px; text-transform: none; font-weight: 300; } #footerContent a:hover #footerContent404 a:hover { color: #a6ccfc; } #toTop { text-align: center; color: #FFF; background: #000; display: none; } #toTop a { color: #FFF; text-decoration: none; } #toTop h2 { margin: 0; cursor: pointer; padding: 40px 0; } #subFooter { clear: both; width: 100%; background: #043d86; color: #FFF; line-height: 22px; } #subFooterContent { position: relative; border-top: 1px solid #36649e; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 30px 0; } #subFooter #footerIcons { position: absolute; right: 0; top: 35px; } #subFooterContent img { float: left; margin: 0 35px 0 0; } #subFooterContent p { margin: 0; } .cir {-moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } #subFooter #footerIcons a { display: inline-block; *display: inline; *zoom: 1; margin-left: 2px; opacity: 0.8; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; border-radius: 50%; width: 26px; height: 26px; background-color:#ffffff; } #subFooter #footerIcons a:hover { opacity: 1; } #subFooter a { color: #FFF; } #subFooter a:hover { color: #a6ccfc; } /*STYLE GUiDE--------------------------------------------------------------*/ #fonts .boxStyle div { background: #eee; width: 918px; margin: -20px -20px 10px -20px; padding: 10px 20px; border-bottom: 1px solid #CCC; } #loginContainer, #loginHeaderContent { max-width: 400px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } #loginHeaderContent { max-width: 248px; } #loginContainer { position: relative; z-index: 4; line-height: 26px; clear: both; } #loginContainer .boxStyle div { margin-bottom: 10px; } #loginContainer .boxStyle div input[type="text"], #loginContainer .boxStyle div input[type="password"], #loginContainer .boxStyle div input[type="email"], #subscription .colA input[type="email"] { width: 94%; } #loginContainer label { width: 100%; } .tableCellMobileOnly{ display:none; } .tableCellNotMobile{ display:table-cell; } /*============= Complaint Form ===========*/ #complaintForm select { width: 300px; overflow:scroll; } #complaintForm #main_0_columna_1_ddlRegionE{ height:40px; } #complaintForm #main_0_columna_1_ddlRegionF{ height:40px; } #complaintForm #ctl00_ContentPlaceHolder_MainContent_ddlProvinces,#complaintForm #ctl00_ContentPlaceHolder_MainContent_ddlCountry { height:40px; } #complaintForm #main_0_columna_1_ListBoxArea,#complaintForm #main_0_columna_1_ListBoxYourArea{ height: 180px; } /* For IE only*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #complaintForm select { width: auto; overflow:scroll; } #complaintForm select option{ width:330px; } #complaintForm #ctl00_ContentPlaceHolder_MainContent_ddlProvinces,#complaintForm #ctl00_ContentPlaceHolder_MainContent_ddlCountry, #complaintForm #main_0_columna_1_ddlProvinces, #complaintForm #main_0_columna_1_ddlCountry { /* width: inherit; */ } } /* For Firefox only*/ @-moz-document url-prefix() { #complaintForm select { width: 350px; overflow:scroll; } } #complaintForm select option{ width:330px; white-space:nowrap; } /*============= Online Forms ===========*/ .onlineforms legend { padding: 0 2px; font-weight: bold; } .onlineforms label { display: inline-block; line-height: 1.8; vertical-align: middle; } .onlineforms input[type="checkbox"] { margin-right:10px; } .onlineforms fieldset ol { margin: 0; padding: 0; } .onlineforms fieldset li { list-style: none; padding: 5px; margin: 0; } .onlineforms fieldset { border: 1px solid black; padding: 15px; margin: 0; } .onlineforms fieldset fieldset { /*border: none;*/ margin: 3px 0 0; } .onlineforms fieldset fieldset legend { padding: 0 0 5px; font-weight: normal; } .onlineforms fieldset fieldset label { display: block; width: auto; } .onlineforms em { font-weight: bold; font-style: normal; color: #f00; padding-top:5px; padding-left:5px; } .onlineforms label { width: 280px; } .onlineforms fieldset fieldset label { margin-left: 123px; /* Width plus 3 (html space) */ } .redasterisk { font-weight: bold; font-style: normal; color: #f00; } /*============= Responsive Design ===========*/ table.apptable { float: left; width: 70%; } .miniresponsiveselect { width: 28%; } /*============= Payment Form ===========*/ .paymentTbl table.apptable { float: left; width: 70%; } .paymentTbl #cardInfo { float: left; width: 30%; } /*============= Hearing Schedule Calendar ===========*/ .reflow .dayFlow { height: 75px; width: 75px; } /*============= Feedback Tool ===========*/ #feedbackPopup { position: fixed !important; z-index: 4; top: auto !important; bottom: 0 !important; height: 150px; width: 100%; margin: 0 auto; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); /*-moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;*/ background-color: #043d86 !important; color: #fff; font-weight: 600; text-align: center; padding: 20px; display: none; } .popUpBTN { background-color: #068edb; border: 3px solid #068edb; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; text-align: center; color: #FFF; text-transform: uppercase; font-size: 14px; font-style: normal; font-weight: 600; padding: 5px 10px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; margin-left: 7px; text-decoration: none; } .popUpBTN:hover { color: #FFF; cursor: pointer; } .closeBTN { background-color: #043d86; border: 2px solid #fff ; color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; /*position: absolute; right: 10px; top: 10px;*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; } .question { font-weight: bold; display: block; margin: 25px 0 0 0; } .MandatoryIndicator { color: Red; } .tblRating { border-collapse: collapse; border: none; width: 60%; font-size: 13px; font-style: normal; padding: 0; margin-left: 30px; } .tblRating td { border: none; background-color: #fff; } .rowRating { border-bottom: 1px solid #aeaeae; } .cellRating { text-align: center; white-space: nowrap; color: #999; font-weight: 600; } .tblRating .extraNote { display: none; } .addComment { margin: 10px 0 0 30px; display: block; padding: 0; } .divComment { display: none; margin-left: 30px; padding: 0; } .commentBox { width: 85%; } input[type="radio"] { margin: 0 15px; } .rate { margin: 0 15px; } #feedbackControl_rblFeedbackRating label { display: block; color: #666; } .finalCommentBox { width: 86%; } .emailBox { width: 50%; } .divButton { display: block; float: right; clear: right; margin: 15px 0; } /* ==|== media queries ====================================================== EXAMPLE Media Query for Responsive Design. This example overrides the primary ('mobile first') styles Modify as content requires. ========================================================================== */ @media only screen and (min-width: 1500px) { /* Style adjustments for viewports that meet the condition */ #innerBanner #bannerImg { position: relative; width: 1500px; margin: 100px auto 0; } } @media only screen and (max-width: 1240px) { /* Style adjustments for viewports that meet the condition */ body { font-size: 14px; } #container, #headerContent, #bannerNav, #calloutsContent, #footerContent, #footerContent404, #subFooterContent, #breadcrumb { max-width: 960px; } .two-column .colA { width: 59.38%; } .two-column .colB { width: 34.90%; } #banner { height: 495px; } #innerBanner { height: 333px; } #findATeacher { margin: -120px 0 0 0; } #bannerNav, #breadcrumb { margin-top: 400px; } #breadcrumb { margin-top: 111px; } #breadcrumb div { max-width: 60%; } #banner li div { bottom: 10px; } nav a, #fr nav a { font-size: 14px; padding: 5px 20px 5px 5px; } #fr nav a { font-size: 13px; } nav ul ul ul { width: 225px; } nav ul ul ul ul { left: 203px; width: 255px; } nav .info { width: 196px; } #fr nav ul ul ul { width: 241px; } #fr nav ul ul ul ul { left: 220px; width: 245px; } nav ul li ul a, nav ul li.hover ul a { font-size: 13px; padding: 5px 20px 5px 0px; } nav .info h4 { font-size: 13px; } #store ul.threeCol li:nth-child(3), #store ul.threeCol li.third { margin-right: 0; } .address { width: 250px; } .alertBox, #searchBox { width: 530px; } .lt-ie8 #breadcrumb div { margin-top: 240px; } .lt-ie8 nav ul ul ul { margin-top: 0; width: 195px; } .lt-ie8 nav ul ul ul ul { width: 205px; left: 205px; } .lt-ie8 #fr nav { width: 652px; } .lt-ie8 #callouts .colA, .lt-ie8 #callouts .colB, .lt-ie8 #callouts .colC { width: 30%; } .lt-ie8 #bannerNav .prev, .lt-ie8 #bannerNav .next, .lt-ie8 #bannerNav ul { margin-top: 400px; } .lt-ie8 nav { width: 638px; } .lt-ie8 #footerContent li:first-child, .lt-ie8 #footerContent404 li:first-child { margin-left: 0; } .lt-ie8 #members .boxStyle { width: 568px; } .lt-ie8 #members .colA a, .lt-ie8 #members .colA h4 { width: 528px; } #footerContent ul ul a, #footerContent404 ul ul a { font-size: 14px; } .lt-ie8 nav { width: 641px; } .miniresponsiveselect { width: 40% !important; } } @media only screen and (max-width: 1050px) { /* Style adjustments for viewports that meet the condition */ } @media only screen and (max-width: 1000px) { /* Style adjustments for viewports that meet the condition */ #callouts #calloutsContent { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #store ul.threeCol li:nth-child(3), #store ul.threeCol li.third { margin-right: 18px; } #store ul.twoCol li { margin: 10px 0; width: 100%; } .alertBox, #searchBox { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .noBanner #findATeacher { width: 33.2%; } .noBanner #findATeacher input[type="text"] { width: 60%; } .lt-ie8 nav ul ul ul { margin-top: 0; width: 175px; } .lt-ie8 nav ul ul ul ul { width: 185px; left: 185px; } .lt-ie8 nav { width: 650px; } .lt-ie8 #fr nav { width: 589px; } } @media only screen and (max-width: 980px) { /* Style adjustments for viewports that meet the condition */ .lt-ie8 nav { width: 597px; } nav a { font-size: 13px; } #fr nav a { font-size: 12px; } #searchBox input[type="text"] { width: 70%; } nav ul ul ul { width: 200px; } nav ul ul ul ul { left: 200px; width: 200px; } #fr nav ul ul ul { width: 205px; } #fr nav ul ul ul ul { left: 205px; width: 200px; } } @media only screen and (max-width: 960px) { /* Style adjustments for viewports that meet the condition */ #banner img { max-width: 800px; } #subFooterContent { padding: 30px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #footerContent li, #footerContent404 li { width: 100%; margin: 0; } #footerContent ul ul li, #footerContent404 ul ul li { width: auto; margin: 4px 8px 4px 0; background: url(/i/img/footerBullet.png) no-repeat left 8px; padding-left: 8px; } #footerContent li:first-child ul li, #footerContent ul ul li:first-child, #footerContent404 li:first-child ul li, #footerContent404 ul ul li:first-child { margin: 4px 8px 4px 0; } #footerContent li, #footerContent li:first-child, #footerContent404 li, #footerContent404 li:first-child { margin-bottom: 10px; } .address { float: left; text-align: left; width: 90%; } nav .info { width: 160px; } nav ul ul ul ul { width: 215px; left: 215px; } nav ul ul ul { width: 215px; } #fr nav ul ul ul { width: 225px; } #fr nav ul ul ul ul { left: 225px; width: 215px; } } @media only screen and (max-width: 950px) { /* Style adjustments for viewports that meet the condition */ .adBox300 { /* width: 180px; height: 150px;*/ } .lt-ie8 nav { width: 540px; } .lt-ie8 #fr nav { width: 546px; } } @media only screen and (max-width: 945px) { /* Style adjustments for viewports that meet the condition */ .adBox300 { /*width: 180px; height: 150px;*/ } nav .info { width: 160px; } nav ul ul ul ul { width: 215px; left: 215px; } nav ul ul ul { width: 215px; } .lt-ie8 nav ul ul ul { width: 160px; } .lt-ie8 nav ul ul ul ul { left: 160px; width: 160px; } } @media only screen and (max-width: 930px) { /* Style adjustments for viewports that meet the condition */ nav a { font-size: 12px; } nav ul ul ul { width: 200px; } nav ul ul ul ul { left: 200px; width: 200px; } #fr nav ul ul ul { width: 200px; } #fr nav ul ul ul ul { left: 200px; width: 200px; } .lt-ie8 nav ul ul ul { width: 160px; } .lt-ie8 nav ul ul ul ul { left: 160px; width: 160px; } } @media only screen and (max-width: 928px) { /* Style adjustments for viewports that meet the condition */ #fr nav a { font-size: 11px; } } @media only screen and (max-width: 920px) { /* Style adjustments for viewports that meet the condition */ nav a { font-size: 12px; } #subFooter #footerIcons { top: 66px; right: 20px; } #banner li div { width: 54%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 20px; } .contactForm textarea, .contactForm div input.subject { width: 93%; } #breadcrumb div { max-width: 55%; } } /*@media only screen and (max-width: 875px) { nav a { font-size: 11px; } nav .info { width: 150px; } nav ul ul ul ul { width: 184px; left: 184px; } nav ul ul ul { width: 184px; } }*/ @media only screen and (max-width: 900px) { /* Style adjustments for viewports that meet the condition */ #navigation { display: none; } .navControl { display: block; padding: 16px 42px; margin-top: 22px; } #navigation { position: absolute; top: 100px; width: 100%; margin-left: -20px; background: #043d86; color: #068edb; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #032654; border-bottom: 1px solid #056ea9; -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); display: none; } nav li { float: left; width: 100%; padding: 14px 0; border-bottom: 1px solid #032654; text-align: center; } nav a { background: none; color: #FFF; } #subNav ul { float: left; width: 100%; padding: 10px 0 10px 31%; border-bottom: 1px solid #056ea9; } #subNav li { display: block; padding: 10px; } nav a:hover, nav li.hover a { background: none; border: none; } nav { position: absolute; top: 0; margin: 0; width: 100%; } #navigation a { color: #FFF; } #subNav { background: #068edb; padding: 0 0 20px; margin: 255px 0 0; } /*#subNav ul li { float: left; margin: 4px; background: #111; padding: 10px 14px 10px 20px; .border-radius; }*/ #subNav .form { positiom: relative; float: none; clear: both; padding: 20px 20px 0; margin: 0; } #subNav input[type="text"] { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #subNav input[type="submit"] { left: 26px; top: 26px; } #subNav { float: none; clear: both; } nav ul ul { width: 0; height: 0; overflow: hidden; border: none; } #banner li div { padding-left: 40px; } nav a { font-size: 16px; } nav > div:focus,a:focus,li:focus,ul:focus { background-color: transparent !important; } nav a:hover, nav li:hover a, nav a.hover { background: none !important; border: 0; } .hasChildren.accessible-megamenu-top-nav-item:hover > * { background: none !important; border: 0; } } @media only screen and (max-width: 835px) { /* Style adjustments for viewports that meet the condition */ .alertBox, #searchBox { float: left; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #searchBox input[type="text"] { width: 60%; } .pagination { background: none; border: none; width: 100%; } .pagination a, .pagination span { background: #F2F2F2; border: 1px solid #7A7A7A; margin: 4px; } .pagination .previous, .pagination .prev { border-left: 1px solid #7a7a7a; } } @media only screen and (max-width: 800px) { /* Style adjustments for viewports that meet the condition */ #banner li div { padding-left: 60px; } .customfile { width: 100%; } .btnStyle.uploadBtn { width: 100%; margin-top: 20px; } .selectWrap.long { width: 80%; } #breadcrumb div { max-width: 50%; } .lt-ie8 #bannerNav { margin-top: -166px; } } @media only screen and (max-width: 780px) { #banner li div { bottom: 28px; padding-left: 20px; } #banner { height: 467px; } #bannerNav { margin-top: 373px; } } @media only screen and (max-width: 770px) { #bannerImg img { width: 770px; } .miniresponsiveselect { width: 55% !important; } .responsiveselect { width: 80% !important; } } @media only screen and (max-width: 768px) { .reflow tbody, .reflow th, .reflow tr, .reflow td { display:block; } .reflow .dayFlow { height: 75px; width: auto !important; } .calendarFlow td { text-align: center; height: 75px; width: auto !important; } } @media only screen and (max-width: 767px) { #complaintForm label { display: block; } #complaintForm select { width: 220px; } #complaintForm select option{ width: 250px; } #complaintForm textarea { width: 90%; } #complaintForm input[type="radio"] { margin-top: 12px; width: auto; float: left; } #complaintForm ul { padding-left: 0px; } #complaintForm ul li label { width: auto; } .map iframe { width: 100% } /* shopping card */ .tableCellMobileOnly{ display:table-cell; } .tableCellNotMobile{ display:none; } .updateAddress { width: 90%; } .onlineforms label { /* aligned with input fields */ width: 200px; } fieldset, .onlineforms fieldset { border: 0; padding: 0; display: table-cell; } .paymentTbl table.apptable { float: left; width: 100%; } .paymentTbl #cardInfo { float: left; width: 100%; margin-top: 50px; } /* buttons aligned and stretched out */ .btnContainer .btnStyle { width: 100%; margin-left: 0; } /* Force table to not be like tables anymore */ div.priceAndBuyContainer table, div.priceAndBuyContainer tbody, div.priceAndBuyContainer th, div.priceAndBuyContainer tr, div.priceAndBuyContainer td { display: block; } div.paymentTbl table, div.paymentTbl tbody, div.paymentTbl th, div.paymentTbl tr, div.paymentTbl td { display:block; } div#LBD_CaptchaDiv[style] { width: 100% !important; height: auto !important; } div#LBD_CaptchaImage[style] { width: 200px !important; height: 60px !important; } /* Align priceAndBuyContainer at Product page */ div.priceAndBuyContainer[style] { float: none !important; padding: 0 !important; } table.responsive { margin-bottom: 0; } .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } .pinned table { border-right: none; border-left: none; width: 100%; } .pinned table th, .pinned table td { white-space: nowrap; } .pinned td:last-child { border-bottom: 0; } div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; } div.table-wrapper div.scrollable table { margin-left: 35%; } div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } #store table { margin-bottom: 0; } .noBanner #findATeacher input[type="text"] { width: 50%; } } @media only screen and (max-width: 700px) { /* Style adjustments for viewports that meet the condition */ #banner li div { width: 50%; } #breadcrumb { z-index: 0; } .noBanner #findATeacher input[type="text"] { width: 45%; } .contactForm div.selectWrap { background: url(/i/img/selectArrow.png) no-repeat 120px 0 #ffffff; width: 140px; margin-bottom: 0; } } @media only screen and (max-width: 650px) { /* Style adjustments for viewports that meet the condition */ .contactForm div.left input, .contactForm div.right input { width: 86%; } .contactForm div.selectWrap { width: 100%; } } @media only screen and (max-width: 600px) { /* Style adjustments for viewports that meet the condition */ #logo img { width: 156px; height: 50px; } #banner li div { display: none; } #findATeacher .btnStyle { float: none; } #findATeacher { float: left; margin: 40px 0 0 0; } #findATeacher .headingWrap { padding: 10px; } #findATeacher .form { margin: 10px; } #searchBox input[type="text"] { width: 65%; } #breadcrumb { z-index: 2; } #breadcrumb div { max-width: 100%; } .two-column .colA, .two-column .colB { width: 100%; } .two-column .colB, .home .two-column .colB { margin-top: 0; } .adBox300 { /* width: 300px; height: 250px;*/ } #callouts #calloutsContent { padding-bottom: 35px; } #callouts .colA, #callouts .colB, #callouts .colC { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: none; border-bottom: 1px solid #36649E; border-bottom: 1px solid rgba(255, 255, 255, 0.2); min-height: 360px; margin-bottom: 0; padding: 0; } .lt-ie8 #callouts .colA, .lt-ie8 #callouts .colB, .lt-ie8 #callouts .colC { float: left; width: 100%; clear: both; } #callouts .colA { padding-bottom: 30px; } #callouts .colC { border-bottom: none; } #footerContent ul ul { display: none; } #footerContent li, #footerContent li:first-child { margin: 6px 10px; width: auto!important; } #footerContent li { float: none; } #subFooterContent img { float: none; margin-bottom: 20px; } #subFooter #footerIcons { top: 40px; right: 20px; } footer .partners { width: 100%; } #toTop { display: block; } /*#members ul li span { display: none; }*/ .noBanner #breadcrumb { margin-top: -20px; } .noBanner #findATeacher { position: relative; float: left; width: 100%; margin: 40px 0 0 20px; } footer { padding-bottom: 60px; } footer ul { position: relative; } footer .partners { position: absolute; bottom: -34px; } .noBanner .two-column .colB { margin-top: 0; } #banner li div { width: 100%; } #innerNav.hide { display: none; } #innerNav.fixed { top: 40px; } #innerNav.hide { top: 40px; right: 0; width: 240px; background: #000; } #innerNav.hide h3 { display: none; } #innerNav.hide ul li a { background: none; font-size: 13px; font-weight: 300; } .guideMenu.show { display: block; } .contactForm div.selectWrap { width: 180px; background-position-x: 154px; } .customfile { width: 75%; } .btnStyle.uploadBtn { width: auto; margin-top: 0; } .textModBox { top: 178px; } .noBanner .textModBox { top: 178px; } } @media only screen and (max-width: 560px) { /* Style adjustments for viewports that meet the condition */ #banner li div { width: 90%; } } @media only screen and (max-width: 520px) { #banner li div { width: 80%; } } @media only screen and (max-width: 480px) { /* Layout adjustments */ .two-column .colA { margin: 0 0 5px 0; } .two-column .colB { margin: 0 0 50px 0; } /*.tableCellMobileOnly{ display:table-cell; } .tableCellNotMobile{ display:none; }*/ /* align drop-down list selector at Product list */ .tableCellMobileOnly span { display: block; width: 80px; float: right; margin: 30px 0 0 10px; } /* Force table to not be like tables anymore */ .orderlines table, .orderlines thead, .orderlines tbody, .orderlines th, .orderlines td, .orderlines tr { display: block; } table.orderlines { border-top: 1px solid #999; } .orderlines th { display: none; } /* Hide table headers */ .orderlines tr { border-bottom: 1px solid #ccc; padding-top: .9em; } .orderlines tr.odd { background: none; } .orderlines td:nth-of-type(2), .orderlines td:nth-of-type(3), .orderlines td:nth-of-type(4) { /* Behave like a "row" */ border: none; /* border-bottom: 1px solid #ddd; */ position: relative; padding-left: 40%; } .orderlines td:nth-of-type(1) { padding-left: 6px; border: none; font-size: 1.2em; line-height: 1.5em; } .orderlines td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ vertical-align: middle; left: 6px; width: 35%; padding-right: 10px; white-space: normal; text-align: left; } /* Label the data */ .orderlines td:nth-of-type():before { content: "Description"; } .orderlines td:nth-of-type(2):before { content: "Price"; } .orderlines td:nth-of-type(3):before { content: "Quantity"; } .orderlines td:nth-of-type(4):before { content: "Total"; } .navControl { padding: 8px 12px; margin-top: 30px; } #banner, #innerBanner { height: 296px; } #banner li div { top: 100px; width: 100%; } #bannerImg img { width: 700px; } #bannerNav { margin-top: 202px; } #breadcrumb { margin-top: 73px; } #calendar { font-size: 12px; } #calendar td { height: 20px; } #calendar td span { display: none; } .contactForm div.selectWrap { width: 150px; background-position-x: 120px; } .customfile { width: 100%; } .btnStyle.uploadBtn { width: 100%; margin-top: 20px; } } @media only screen and (max-width: 458px) { /* Style adjustments for viewports that meet the condition */ .alertBox span { float: left; } } @media only screen and (max-width: 414px) { .popUpBTN { font-size: 12px; } .tblRating { width: 80%; } .tblRating .hideCell { display: none; } .tblRating .extraNote { display: block; padding: 0; margin: 0 0 0 50px; background-color: #fff; } .divComment { margin-left: 15px; padding: 0; } .commentBox { width: 85%; } .addComment { margin-left: 15px; width: 90%; } .emailBox { width: 90%; } .finalCommentBox { width: 90%; } } @media only screen and (max-width: 400px) { /* Style adjustments for viewports that meet the condition */ .miniresponsiveselect { width: 85% !important; } .responsiveselect { width: 95% !important; } #searchBox input[type="text"] { width: 50%; } #calendar th { padding: 4px 0; } .contactForm div.right { float: left; } .contactForm textarea, .contactForm div input.subject, .contactForm div.left, .contactForm div.right, .contactForm div input { width: 90%; } .contactForm .btnStyle { width: auto; } .contactForm div.selectWrap { clear: both; } .toolTipPlease .tiptipClose { display: inline; } .selectWrap.long { width: 96%; } } @media only screen and (max-width: 380px) { /* Style adjustments for viewports that meet the condition */ .adBox300 { /* width: 180px; height: 150px;*/ } #memberCard #container { width: 100%; } .commentarea textarea { width: 80%; } } @media only screen and (max-width: 360px) { /* Style adjustments for viewports that meet the condition */ #logo img { width: 100px; height: 32px; } #findATeacher input[type="text"] { width: 60%; } #fr #findATeacher input[type="text"] { width: 125px; } #findATeacher { width: 100%; } .commentarea textarea { width: 80%; } } @media only screen and (max-width: 340px) { #fr #findATeacher input[type="text"] { width: 105px; } } @media only screen and (max-width: 320px) { /* Style adjustments for viewports that meet the condition */ #findATeacher input[type="text"], .noBanner #findATeacher input[type="text"] { width: 60%; } #findATeacher .headingWrap { background-position: 240px 25px; } #loginContainer .boxStyle div input[type="text"], #loginContainer .boxStyle div input[type="password"], #loginContainer .boxStyle div input[type="email"], #subscription .colA input[type="email"] { width: 80%; } } /* ==|== Retina styles ======================================================= Declaring images at larger sizes ========================================================================== */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #subNav input[type="submit"] { background: url(/i/img/searchIcon@2x.png) no-repeat; background-size: 12px 12px; } .infoBtn { background: url(/i/img/icons/infoBtn@2x.png) no-repeat; background-size: 18px 18px; } .infoBtn:hover { background: url(/i/img/icons/infoBtnHover@2x.png) no-repeat; background-size: 18px 18px; } .icon.facebook { background: url(/i/img/footerFacebook@2x.png) 0px 0px no-repeat; background-size: 26px 26px; } .icon.twitter { background: url(/i/img/footerTwitter@2x.png) 0px 0px no-repeat; background-size: 26px 26px; } .icon.print { background: url(/i/img/footerPrinter@2x.png) 0px 0px no-repeat; background-size: 26px 26px; } #findATeacher .headingWrap { background: url(/i/img/questionIcon@2x.png) 290px 25px no-repeat #043d86; background-size: 24px 23px; } .alertBoxGood { background: url(/i/img/icons/alertGood@2x.png) no-repeat #ffffff; background-position: 10px center; background-size: 24px 24px; } .alertBoxWarning { background: url(/i/img/icons/alertWarning@2x.png) no-repeat #ffffff; background-position: 10px center; background-size: 24px 24px; } .alertBoxBad { background: url(/i/img/icons/alertBad@2x.png) no-repeat #ffffff; background-position: 10px center; background-size: 24px 24px; } .alertBoxGeneral { background: url(/i/img/icons/alertGen@2x.png) no-repeat #068edb; background-position: 10px center; background-size: 24px 24px; } .icon.access { background: url(/i/img/access@2x.png) 0 0 no-repeat; background-size: 18px 18px; } .icon.download { background: url(/i/img/download@2x.png) 0 0 no-repeat; background-size: 18px 18px; } .icon.pay { background: url(/i/img/pay@2x.png) 0 0 no-repeat; background-size: 18px 18px; } .icon.find { background: url(/i/img/find@2x.png) 0 0 no-repeat; background-size: 18px 18px; } #calendar td span { background: url(/i/img/calicon@2x.png) no-repeat left center; background-size: 10px 10px; } .selectWrap { background: url(/i/img/selectArrow@2x.png) no-repeat 120px 0 #ffffff; background-size: 12px 34px; } } /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } /* 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; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } 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 { 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; } } /* FALCON AUTHORED STYLES */ .openclose { position:relative; list-style: none!important; margin:0!important; padding:0!important; } .openclose dt, .openclose h4 { /* match standard anchor style */ margin: 0 0 2px 20px; padding: 0 0 0 20px; color: #068edb; text-decoration: underline; -moz-transition: color 0.3s linear; -webkit-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; cursor:pointer; background: url(/i/img/plusminus.png) no-repeat 0 7px; font-family: Helvetica, Calibri, Arial, sans-serif; font-style: normal; font-weight: 300; font-size: 16px; text-transform: none; } .openclose dt:hover, .openclose h4:hover { color: #043d86; } .openclose dt.activeQ, .openclose h4.activeQ { color: #043d86; background: url(/i/img/plusminus.png) no-repeat -1000px 7px;} .openclose dd { position:relative; padding: 0 0 14px;} .openclose ol { position:relative; margin:6px 0 20px 24px; } .openclose ol li{ list-style: decimal; margin:0; padding: 0; background: none; cursor: inherit; color: #000; text-decoration: none; font-size: 90%; } .openclose ol li.active { background: none; } .commentarea { margin-top: 40px; overflow: hidden; } .commentarea legend { width: 290px; float: left; margin-top: 7px;} .widelabel { width: 266px; display: inline-block; } .commentarea p { margin:0 0 8px; padding:0; } .commentarea small { font-size: 80%; color: #999; font-style: italic; margin-left: 8px;} .commentarea table { width: 100%; border: none; margin:0; padding:0; border-spacing:0;background-color: none;} .commentarea tr.odd { background: none!important; } .commentarea td { border: none; padding:0; background-color: none; white-space: nowrap;} .commentarea textarea { width: 95%; } @media only screen and (max-width: 1023px) { .commentarea legend { width: 100%; display: block; clear: both; margin-top:0;} .widelabel { width: auto; } .commentarea textarea { width: 92%; } .commentarea small { margin-left: 2px; display: block; clear: both; } } /*skip classes used for skipping menu content.*/ #skip a { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } #skip a:focus { position:static; width:auto; height:auto; } h1.heading { color: #043d86; padding-bottom: 12px; border-bottom: 1px solid #7a7a7a; margin-bottom: 20px; } /*PS Magazine Styles*/ .magMenu{ background: #f2f2f2; font-size: 14px; font-weight: 500; padding: 0 10px; border: 1px solid black; } .magMenu a{ color:black!important; } .back_issues .nav_left h4 a img { border:none; } #cover_thumbnails { } #cover_thumbnails div { /* width:10px; */ } #cover_thumbnails .year { height:230px; } #cover_thumbnails #two-thousand-six { height:420px; } #cover_thumbnails { margin-bottom:14px; } #cover_thumbnails table { margin-left:14px; border-collapse:collapse; } #cover_thumbnails table tr td { vertical-align:top; } #cover_thumbnails img { border:1px solid #666666; } #cover_thumbnails a { font-size:small;float:left; text-align:center; margin-right:1.5em; text-decoration:none; font-weight:bold; border:none; width:122px; margin-left:4px; padding:2px; } #cover_thumbnails a:hover { background:#0D2667; color:white; } #cover_thumbnails a img { } #cover_thumbnails h5 { clear:none; } #cover_thumbnails h5 a { width:auto; display:inline; padding:auto; margin:auto; } .backissues {width:600px;border-style:none;border:0px;} .backissues td { width:150px; border:0px; } .preps {background-color:#ffffff;} /*end styles ps*/ /*share styles*/ .share_content_top{ background-color:#ffffff; float:right; position:inherit; } .no_show_on_desktop { display:none; } .share_bottom_mobile, .follow_top_mobile { display:none; } /*mobile shares share_bottom_mobile follow_top_mobile share_content_top */ @media only screen and (max-width:900px) { .share_bottom_mobile { margin: 0 auto; display:block; } .share_content_top { display:none; } } @media only screen and (max-width:600px) { .follow_top_mobile { margin: 0 auto; display:block; } .follow_top { display:none; } } @media only screen and (max-width: 767px) { .no_show_on_mobile { display:none; } .no_show_on_desktop { display:block; } } /* update for announcements */ #newsWidget li p { min-height:50px; } @media only screen and (min-width : 480px) and (max-width : 1250px) { .videoFrame iframe { width:350px; height:250px; } } /*iPhone 6 in landscape*/ @media only screen and (min-width : 120px) and (max-width : 479px) { .videoFrame iframe { width:250px; height:150px; } } .homepage-middle { border-top: 1px solid black; }