/* == RESET BY ERIC MEYER =============================================================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;} body{line-height:1;} ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:''; content:none;} table{border-collapse:collapse; border-spacing:0;} /* == VARIABLES FOR LESS =============================================================*/ @darkblue : #03244d; @lightblue : #496e9c; @darkorange : #dd550c; @lightorange: #f68026; .border-radius (@tl:0px, @tr:0px, @br:5px, @bl:5px) { -webkit-border-radius: @tl @tr @br @bl; -moz-border-radius-topleft: @tl; -moz-border-radius-topright: @tr; -moz-border-radius-bottomright: @br; -moz-border-radius-bottomleft: @bl; border-radius: @tl @tr @br @bl; } .box-shadow (@x: 0, @y: 5px, @blur: 5px, @spread: -5px, @color: #000) { -webkit-box-shadow: @x @y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @color; box-shadow: @x @y @blur @spread @color; } .transition(){ -webkit-transition: background 3s ease-in-out; -moz-transition: background .5s ease-in-out; -o-transition: background .5s ease-in-out; transition: background .5s ease-in-out; } .vertical-gradient(@start: rgba(0,0,0,0), @stop: rgba(0,0,0,0.1)) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@stop)); background: linear-gradient(top, @start 0%,@stop 100%); background: -o-linear-gradient(top, @start 0%,@stop 100%); background: -ms-linear-gradient(top, @start 0%,@stop 100%); background: -moz-linear-gradient(top, @start 0%,@stop 100%); background: -webkit-linear-gradient(top, @start 0%,@stop 100%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1A000000',GradientType=0)"; } /* == CLEAR FIX ======================================================================*/ .cf:before, .cf:after{content:""; display:table;} .cf:after{clear:both;} .cf{zoom:1;} /* == GENERAL TAGS ===================================================================*/ body{/* Commented out because IE is stupid min-height:480px; */ font-family:Verdana, Geneva, sans-serif; font-size:12px; overflow-x: hidden;} a{color:@lightblue; text-decoration:none;} a:hover{color:@darkorange; text-decoration:underline;} blockquote{margin-left:25px;} h1, .h1{border-bottom:#ccc 1px solid; font:2.2em "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; line-height:normal; margin-bottom:5px;} h2, .h2{font:2.0em "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; line-height:normal;} h3, .h3{font:1.7em "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; line-height:normal;} h4, .h4{font:1.5em "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; line-height:normal;} h5, .h5{font:1.2em "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; line-height:normal;} h6, .h6{border-bottom:1px solid @darkblue; color:@darkblue; font:1.2em "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-weight:600; line-height:normal; margin-bottom:10px; text-align:left;} p{font-size:12px; line-height:1.3em; padding-bottom:13px;} pre{color:#666; font-family:"Courier New", Courier, monospace; font-size:12px; line-height:1.5em; margin-left:30px; padding-bottom:13px;} ol{padding-left:20px; padding-bottom:13px;} ol li{line-height:1.3em; list-style:decimal; margin:5px 15px; padding:0 0 3px 8px;} ol li ol, ol li ul{padding-bottom:0;} ol li ol li{list-style:lower-alpha; padding-bottom:0; } ol li ol li ol li{list-style:lower-roman; padding-bottom:0;} ul{margin:0; padding-bottom:13px;} ul > li{background:url(/template/styles/images/bulletArrow2.gif) left 4px no-repeat; line-height:1.3em; list-style:none; margin:5px 15px; padding:0 0 3px 8px;} ul > li a{margin:0; padding:0;} ul > li ul, ul > li ol{padding-bottom:0;} ul > li ul > li{background:url(/template/styles/images/bulletArrow.gif) left 4px no-repeat; padding-bottom:0;} table tr td, table tr th{padding:5px;} strong{font-weight:bold;} em{font-style:italic;} /* == BOX STYLES AND COLLAPSIBLE PANELS =============================================*/ .box{ .border-radius(1px,1px,1px,1px); .box-shadow(0,0,3px,rgba(0,0,0,0.5)); .vertical-gradient(); border:rgba(204,204,204,1.0) solid 1px; margin:0 0 20px 0; overflow:hidden; padding:0; .title{background:#777; color:#fff; display:block; font-weight:bold; padding:5px 10px;} } .boxList > li{background:0 none; border-bottom:1px solid #d9d9d9; color:#666; display:block; font-size:12px; font-style:normal; font-weight:normal; line-height:16px; margin:0; padding:0; text-align:left; text-shadow:none; vertical-align:top;} .boxList > li:last-child{border-bottom:0;} .lists a {color:#666; display:block; font:11px; overflow:hidden; padding:5px 15px; &:hover{background:#777; color:#fff; text-decoration:none;} img{float:left; margin-right:15px;} span{display:block; line-height:16px;} span.serv{margin-left:79px;} } .keyTable{.border-radius(4px,4px,4px,4px); .box-shadow(0,0,3px,rgba(0,0,0,0.5)); background:#f4f4f4; border:rgba(204,204,204,1.0) solid 1px; width:100%; tbody{ tr{border-bottom:1px solid #d9d9d9; display:table-row; td{line-height:16px; display:table-cell; width:50%; ul{padding-bottom:0; li{font-size:12px;} } } } tr.letter{background:#fff; font-weight:400;} } tr:last-child{border-bottom:0;} } .cpTab, .cpLink, .cpContent { border-top: 1px #ccc solid; } .boxList div:first-child { border-top: none; } .problemForm input, .problemForm textarea { max-width: 95%; } .cpTab, .cpLink{cursor:pointer; line-height:2em; margin:0; outline:none; padding-left:10px; -moz-user-select:none; -khtml-user-select:none;} .cpTab:hover, .cpLink:hover{background:#666; color:#fff;} .cpTab:hover a, .cpLink:hover a{color:#fff;} .cpTab:hover > .link > a{color:#fff;} .cpTab > .link{} .cpTab > .link:hover > a, .cpTabLink:hover > a{color:#fff; &:hover{color:#fff;} } .cpTab > .link > a, .cpLink > a{color:#000; display:block; text-decoration:none; &:hover{border-bottom:none; color:#fff; text-decoration:none;} } .cpContent{background:#f9f9f9; color:#000; margin:0; padding:10px;} .CollapsiblePanelOpen > .cpTab{background:#666; color:#fff;} .linkPrint{cursor:pointer; float:right; height:38px; margin:0 0 15px 15px; overflow:hidden; width:98px;} .lpLink{background:url(/oit/images/linkPrintG.png) 0 0 no-repeat; float:left; height:34px; width:48px;} .lpLink:hover{background-position:0 -35px;} .lpPrint{background:url(/oit/images/print.png) 0 0 no-repeat;cursor:pointer; float:right; margin:0 0 15px 15px; overflow:hidden; height:34px; width:50px;} .lpPrint:hover{background-position:0 -35px;} /* == NEED HELP SLIDEOUT ===========================================================*/ .slideOutContainer { position: absolute; z-index: 5000; } .slideOutTrigger { background: url(/oit/images/needHelp.png) center left no-repeat; cursor: pointer; height: 96px; position: fixed; top: 200px; width:103px; /*width:156px;*/ z-index: 5000; } .slideOutTrigger h5 { color: #fff; font-family: Verdana, Geneva, sans-serif; padding: 27px 0 0 17px; position: relative; text-shadow: #666 0px 1px 1px; text-transform: uppercase; } .slideOut { background: rgba(73,110,156,.8); position: absolute; left: 35px; top: 0; width: 100%; z-index: 4000; } .slideOut .slideContent { background: #fff; margin: 0 auto; padding: 20px 25px; } /* == MISCELLANEOUS CLASSES ========================================================*/ .block{display:block;} .blockouthelp { overflow: hidden; position: relative; } .blue{color:@darkblue;} .blueHeader{background:url(/template/styles/images/sidebarH1reverse.jpg) center center #496e9c repeat-x; border-bottom:#c0c0c0 solid 1px; color:#fff; font-size:1.5em; height:25px; padding-top:5px; text-indent:12px; width:100%;} .clear{clear:both;} .halves{width:50%;} .headingBg { background: #666; color: #fff; } .lastUpdated{clear:both; font-size:9px; font-style:italic; text-align:right;} .left{float:left;} .listColumns ul{float:left;} .midContent{float:left; margin:10px 0 0 0; min-height:333px; padding:10px 25px 0 25px; width:425px;} .more{background:url(/template/styles/images/bulletArrow.gif) right 4px no-repeat; font-family:Verdana, Geneva, sans-serif; font-size:10px; font-weight:bold; padding-right:10px; padding-bottom:20px; text-align:right;} .more a:hover{color:@darkorange;} .newsItem{background:url(/template/styles/images/bulletArrow2.gif) left 8px no-repeat; line-height:20px; margin-left:10px; padding:0 0 17px 12px;} .noBorder{border:none;} .orange{color:@darkorange;} .orangeDecorBar{background:@lightorange; font-size:1px; height:2px; margin:20px auto; text-align:center; width:185px;} .quarters{width:25%;} .right{float:right;} .rss{border-bottom:none; float:right; margin:-27px 0 0;} .serviceImg{float:right; margin:10px;} .thirds{width:33%;} .toTopWrap{position:fixed; bottom:25px; left:0; width:100%; z-index:3000;} .toTopWrap a{border-bottom:none; height:35px; width:77px;} .toTop{width:1120px; margin:0 auto;} .toTopImage{float:right;} .weather{font-weight:bold; padding:5px 0 0 0; text-align:center;} /* == HOMEPAGE SLIDESHOW ===========================================================*/ .flexslider{position:relative;} .rslides {list-style:none; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%;} .rslides li {background:none; display: none; left: 0; margin:0; padding:0; position: absolute; top: 0; width: 100%;} .rslides li:first-child {display: block; float: left; position: relative;} .rslides img {border: 0; display: block; float: left; height: auto; width: 100%;} .flexslider:hover .rslides_nav {background:url(/oit/images/arrows.gif) top left no-repeat; height:61px; left:0; opacity: 0.5; position:absolute; top:35%; width:38px;} .flexslider:hover .next{background:url(/oit/images/arrows.gif) top right no-repeat; left:auto; right:0;} /* == BEGIN "MOBILE FIRST" LAYOUT ====================================================*/ header{background:@darkblue; color:@lightblue; padding-top:5px; a, a:hover{color:#fff; text-decoration:none;} .logo{background:url(/oit/images/mLogoSub.png) center center no-repeat; cursor:pointer; height:61px; margin:10px auto 15px auto; width:150px;} .searchIcon{display:none;} .searchForm, .topLinks{text-align:center;} .searchForm{height:20px; margin:0 auto; position:relative; width:150px; .searchBox{height:18px;} .searchField{background:#fff; border:none; color:gray; float:left; font-size:11px; letter-spacing:.1em; height:15px; outline:none; padding:1px; width:150px;} .searchButton{position:absolute; right:2px; bottom:5px;} } .topLinks{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:normal; margin:10px 0 15px 0; a:hover{text-decoration:underline;} } .titleArea{color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:14px; padding-bottom:3px; text-align:center; .mainHeading{display:block;} .subHeading{display:block; font-size:12px; padding:3px 0;} .mainHeading a, .subHeading a, .mainHeading a:hover, .subHeading a:hover{border-bottom:none; color:#fff;} } } nav[role="navigation"]{background:@darkorange; border-bottom:@lightorange 3px solid; font-size:0.8em; height:27px; text-shadow:0 1px 1px #666; width:100%; .touchdown{ background:@darkorange url(/oit/css/images/selectDwn.png) right top no-repeat; border:none; color:#fff; cursor:pointer; display:block; font-size:14px; height:27px; margin:0 auto; width:80%; -moz-appearance:none; -webkit-appearance:none; &:focus,:active{} option{padding:10px 0; &:hover{color:@lightorange;} } } } .contentArea{display:block; .contentDivision{background-color:#fff; display:block; overflow:hidden; padding:10px; position:relative; .breadcrumb{font-size:.8em;} .news{height:176px; margin:2%; width:96%;} .photos{background:#f4f4f4; margin:2%; width:96%;} .mainContent{overflow:hidden; .sectionBlocks{float:left; margin:12px 0 0 0; width:100%; .sectionBlock{margin:0 0 4% 0; padding:10px; h3{hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto;} img{display:none;} ul{padding-bottom:0;} } } .homeSections{margin:2%; max-height:none; width:92%; } } .homeSectionTop{background:@lightblue; color:#fff; display:block; height:22px; overflow:hidden; width:100%; a, a:hover{border:none; color:#fff; font:12px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; line-height:22px; text-decoration:none;} h1{border:none; float:left; font:12px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; margin:0; padding:3px 0 3px 5px; text-transform:uppercase;} ul {display:block; float:right; margin:0; overflow:hidden; padding:0; li{background:none; border-left:1px solid @darkblue; display:block; float:left; margin:0; overflow:hidden; padding:0; a{padding:4px 5px; &:hover{background:@darkblue;} } } .facebook{background:#3b5999;} .rss{background:@darkorange;} .twitter{background:#04aeda;} } } .newsHeadlines{display:block; height:154px; overflow:auto; position:relative; width:100%; ul{display:block; margin:0; padding:0; li{background:none; border-top: 1px solid #ccc; display:block; height:25px; line-height:25px; margin:0; overflow:hidden; padding:0; a{color:#333; display:block; height:25px; padding:0 5px; position:relative; text-decoration:none; &:hover{background:#03244d; color:#fff; .newsDate{color:#fff;} } .newsDate{display:none;} .newsHeadline{display:block; height:25px; overflow:hidden; padding:0 1%; text-overflow:ellipsis; -o-text-overflow:ellipsis; -icab-text-overflow:ellipsis; -khtml-text-overflow:ellipsis; -moz-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; white-space:nowrap;} } } } } .homeSections{border: #ccc 1px solid; float:left; margin:2%; min-height:107px; padding:0; width:96%; a{color:#333; border-bottom:none; overflow:hidden; text-decoration:none; &:hover{color:#fff;} } a img{background:transparent; margin:0 10px 0 0; max-width:100%;} ul li a{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } } } .footerWrap{color:#f4f4f4; display:block; font-size:8pt; text-align:center; footer{background-color:@darkblue; border-bottom:3px solid @darkorange; color:#fff; overflow:hidden; padding:10px 5px; a{color:#f4f4f4;} .footSection{float:left; line-height:12px; min-height:50px; text-align:center; width:100%;} .footSection ul{padding:0;} .footSection ul li{background:none; padding-bottom:6px; list-style:none; margin:0;} .footSection:last-child{float:right;} .footSection p{font-size:12px; line-height:normal; padding-bottom:0;text-align:center;} .social{margin-top:10px;} .socialDetails{background:url(/template/images/social/socialBG.png) 0 -127px no-repeat; height:22px; margin:0 auto; padding:0; width:200px;} a.social:hover{border-bottom:none;} .middleSection{border-top:1px solid @lightblue; border-bottom:1px solid @lightblue; margin:5px 0; padding:10px 0;} } .subfooter{color:#03244d; padding:10px 5px; a{color:@darkblue; &:visited{color:@darkblue;} .last{border-right:none;} } } } .touchdown-list{display:none;} .skip {left:-999em; position:absolute;} .toTopWrap{display:none;} /* == MEDIA QUERY (BETTER PHONES) ====================================================*/ @media only screen and (min-width:295px){ header{ .logo{background:url(/oit/images/mLogo.png) center center no-repeat; height:39px; width:211px;} .searchIcon{background:url(/oit/images/mSearch.png) center center no-repeat; cursor:pointer; display:block; height:39px; position:absolute; right:10px; top:18px; width:39px;} .searchForm, .topLinks{display:none;} .searchForm{width:270px; .searchBox{background:url(/template/styles/images/searchField.png) center center no-repeat;} .searchField{background:transparent; margin:1px 0 0 20px; width:220px;} .searchButton{right:13px;} } .titleArea{font-size:18px; .subHeading{font-size:14px;} } } .contentArea{ .contentDivision{ .mainContent{ .sectionBlocks{ .sectionBlock{ img{display:block; float:right;} } } .homeSections{margin:2%; min-height:187px; max-height:none; width:24%;} } .newsHeadlines{ ul{ li{ a{ .newsDate{color:#999; display:block; height:25px; padding:0 1%; position:absolute; right:0; text-align:right; text-transform:uppercase; top:0; width:50px; z-index:0;} .newsHeadline{margin-right:55px;} } } } } .homeSections{margin:2%; width:96%; ul{background:url('/oit/images/helpdesk.png') 10px center no-repeat; min-height:107px; padding-left:90px; padding-bottom:0;} ul.img { background: url('/oit/images/img.png') 10px center no-repeat; } ul.idm { background: url('/oit/images/idm.png') 10px center no-repeat; } ul.spcs { background: url('/oit/images/spcs.png') 10px center no-repeat; } } } } } /* == MEDIA QUERY (STEP UP FROM PHONES) =====================================================================*/ @media only screen and (min-width:640px){ body {background:#f4f4f4 url(/template/styles/images/bodyBackground2.png) top center repeat-x;} .headerWrap{height:140px;} header{background:transparent; height:105px; position:relative; .logo{background:url(/oit/images/headerLogo.png) center center no-repeat; float:left; height:90px; margin:15px 0 0 0; width:220px;} .searchIcon{display:none;} .searchForm, .topLinks{display:block; text-align:center;} .searchForm{margin-top:-2px; padding-left:5px; position:absolute; right:0; top:3px; width:179px; .searchBox{background:url(/template/styles/images/searchField3.png) center center no-repeat;} .searchField{font-size:9px; letter-spacing:normal; line-height:10px; margin:2px 0 0 7px; padding:0; width:170px;} .searchButton{right:3px; top:3px;} } .topLinks{font-size:9px; list-style:none; margin:3px 0 0 0; padding:0; position:absolute; right:185px; text-align:right; top:0; a, a:hover, a:visited{color:@lightblue;} } .titleArea{bottom:20px; font-size:24px; right:0; position:absolute; text-align:right; .mainHeading{display:block;} .subHeading{display:block; font-size:16px; padding-top:5px;} } } nav[role="navigation"]{height:27px; position:absolute; z-index:1000; a{color:#fff; display:block; height:27px; line-height:27px; margin:0; padding:0 15px; text-decoration:none; text-transform:uppercase;} ul, li{background:none; float:left; font-size:12px; padding:0;} #mainNavUL{text-wrap:none; white-space:nowrap; width:100%; li{border-right:1px solid @lightorange; margin:0; padding:0; position:relative; text-align:center; width:19.8%; &:hover,:focus{background:@lightorange; border-bottom:none; height:30px; ul.navChild{left:0; top:27px; a{background:none;} } } ul.navChild{background:@lightorange; .box-shadow(); .border-radius(); top:-999em; padding:0 0 6px 0; position:absolute; white-space:normal; width:100%; a{.border-radius(); height:auto; line-height:27px; text-align:left; text-transform:capitalize; &:hover,:focus{background:@darkorange;} } li,a{float:none;} li{border-right:none; height:auto; width:100%; &:hover,:focus{background:@darkorange;} span{visibility:hidden;} a.itProLock{background:url(http://www.auburn.edu/oit/images/icon_lock.png) 10px center no-repeat; padding-left:25px;} } } } li.sfHover, li.sfHover > a {background:@lightorange; border-bottom:none; height:30px; ul.navChild{top:27px; a{ &:hover,:focus{background-color:@darkorange; border-bottom:none;} } li{height:auto; &:hover,:focus{background-color:@darkorange;} } } } li:last-child{border-right:none;} } .touchdown{display:none;} } .touchdown-list{display:block;} .contentArea{background:#fff; border-bottom:1px #d7d7d7 solid; float:left; width:100%; .contentDivision{ .homeSections{margin: 0 1% 2% 1%; width: 47%; } .news, .photos{float:left; margin:0 1% 2% 1%; position:relative; width:47%;} .photos{height:176px;} .mainContent{margin-right:225px; min-height:600px; .sectionBlocks{float:left; margin:12px 2% 0 0; width:48%; .sectionBlock{padding:10px; img{} } } } .cotactInfo{position:absolute; right:10px; top:74px; width:215px; .lists li{ a{padding:5px 10px;} img{margin-right:5px;} span{margin-left:26px;} } } } } .footerWrap{display:block; margin:0; overflow:hidden; padding:15px 0 0 0; width:100%; footer{background:@darkblue; margin:0; overflow:hidden; padding:18px 0; width:100%; .footSection{width:33%;} a, a:visited{color:#f4f4f4; &:hover,:active{color:#f4f4f4; text-decoration:underline;} &:visited{border-bottom:none; color:#f4f4f4;} } .middleSection{border:none; border-left:1px solid @lightblue; border-right:1px solid @lightblue; margin:0; padding:0;} } .subfooter{border-top:@darkorange 1px solid; clear:both; line-height:18px; padding:15px 0 10px 0; text-align:center; width:100%; } } } /* == MEDIA QUERY (Full Display) =====================================================================*/ @media only screen and (min-width:950px){ .pageWrap{margin:0 auto; overflow:hidden; width:950px;} nav[role="navigation"]{border:1px solid @lightorange; border-bottom:none; border-top:none; width:948px; #mainNavUL{ li {width:189px;} li:last-child {width:188px;} } } .contentArea{border:#d7d7d7 1px solid; border-bottom:none; border-top:none; width:948px; .contentDivision{ .news, .photos{} .mainContent{ .homeSections {min-height:150px;} } } } .contentArea_bottom{background:url(/template/styles/images/content_bottom_bg.png) center center no-repeat; float:left; height:18px; margin-bottom:15px; width:950px;} .footerWrap{background:url(/oit/images/footerOIT.png) top left no-repeat; float:left; padding:92px 0 0 0; width:950px; footer{padding:18px 0; .footSection{width:315px;} .footSection:last-child{float:left;} } .subfooter{background:url(/template/styles/images/subFooterBG.png) top center no-repeat;} } }