@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,600italic);


/* ---------------------- */
/* Global HelpDesk Styles */
/* ---------------------- */
#left-column ol { margin: 10px 0 15px 15px }
#left-column ol li { margin: 8px 0 }
li { font-size: 100% }
nav#horizontalnav { padding-top: 10px }
.sf-menu > li > a { font-family: "Source Sans Light"; font-size: 1.2em }
ul.list-login { margin: 0 }
.semi-bold { font-weight: 600 }
.bold { font-weight: bold }
.italic { font-style: italic }
.etsu-blue { color: #002147 }
.etsu-yellow, a.etsu-yellow:visited { color: #FFC72C }
.box-section a { color: #002147 }
.box-section a:visited { color: #002147 }
.font-reduction { font-size: 0.9em }
#message-ribbon span.font-reduction-x2 { font-size: 0.7em !important; color: rgb(255, 196, 35); padding: 5px 0 0 0; margin: 0px; display: block }
ul.square { list-style-type: none; margin-left: 0; padding-left: 0 }
ul.square li { margin-bottom: 5px }
ul.square li:before { content: "\25a0"; padding-right: 8px; color: #cdc0ac }
div.two-column ul.square { margin-left: 0 }
ul.list-style-arrow li a:before { content: "\00BB "; margin-right: 5px }
.margin-bottom-10 { margin-bottom: 10px }
hr { border: none; border-bottom: dotted 2px #FFC423; margin: 20px 0 }
div.highlight-box { padding: 15px; background: rgb(239, 239, 239) none repeat scroll 0% 0%; border: 1px solid rgb(204, 204, 204); font-size: 0.9em; margin: 10px 0px }
div.highlight-box em { font-weight: bold; font-size: 1.1em }
div.two-column { width: 45%; display: inline-block; margin: 20px 2% 20px 2% }
.line-height-150 { line-height: 1.5em }


table.blue-gray { border: solid 1px #ddd; margin: 20px 0 }
table.blue-gray th { border-bottom: solid 1px #295a8e; border-top: solid 1px #295a8e; background: rgb(51, 108, 170); padding: 5px 10px; opacity: 1; color: #fff; vertical-align: middle }
table.blue-gray th:first-child { border-left: solid 1px #295a8e }
table.blue-gray th:last-child { border-right: solid 1px #295a8e }
table.blue-gray td { padding: 5px 10px; background: #efefef; border-bottom: solid 1px #dfdfdf }

.box-section { background-color: #f5f1e4; border: solid 1px #e2d5c0; width: 99.4% }
.container_24 .grid_15a { width: 620px; float: left; display: inline; margin-right: 5px }
.container_24 .wrapper { display: inline-block; overflow: visible }

div.p18 #left-column a { color: #346aa7 }
div.p18 #left-column h3 { font-family: "source sans pro",arial,helvetica,sans-serif; font-size: 20px; line-height: 32px; color: #002147; padding-bottom: 0; padding-top: 10px }
div.p18 #left-column h4 { font-family: "source sans light",arial,helvetica,sans-serif; font-weight: bold; font-style: italic; font-size: 1.35em; margin-top: 20px }
div.p18 #left-column .polaroid { padding: 5px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 1px solid rgb(204, 204, 204); box-shadow: 5px 5px 0 rgba(0,0,0,0.06) }
div.p18 #left-column .lab-img { width: 60%; display: block; margin: 20px auto }

figure { width: 100%; margin: 20px 0 }
figure > img { display: block; margin: 0px auto;  background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 1px solid rgb(207, 207, 207); box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.06); padding: 5px }
figure > figcaption { font-size: 0.85em; position: relative; font-style: italic; border-top: 1px solid rgb(204, 204, 204); margin: 15px 50px; padding-top: 10px }

/* ---------------------- */
/*   Navigation Styles    */
/* ---------------------- */
.hd_pagehading, .hd_pagehading:hover, .hd_pagehading:visited { text-decoration: none; color: #002147 !important }

.sf-arrows .sf-with-ul { padding-right: 0 }
.sf-arrows .sf-with-ul:after { content: none } /* removes arrows added by styles.css */

a.sf-with-ul { border: 1px solid #fff; border-bottom: none }
a.sf-with-ul:hover, .sfHover > a { background: #f5f1e4; border: 1px solid #e3d6c1; border-bottom: none } /* hover state for top level horizontal navigation */
.sf-menu { margin-bottom: 0 }
.sf-menu li.drop-content-mega { transition: margin-bottom 0.5s ease 0.5s }
.sf-menu li.drop-content-mega:hover { margin-bottom: 215px } /* forces a bottom margin when the mega menu drops */
.sf-menu li a { padding-bottom: 17px; padding-top: 5px }
.sf-menu li a:hover { border-bottom: none !important } /* adds room for hover state background to extend to dropdown menu */
.sf-menu li > ul { box-shadow: 5px 5px 0px rgba(0,0,0,0.06); background-color: rgb(245, 241, 228); border: 1px solid #E3D6C1; border-bottom: 6px solid #FFC72C; border-top: none }
.sf-menu li li > a:hover { background: #e3d7c4; color: #002147 }
.sf-menu > li > a:only-child { padding-bottom: 11px; border: #fff solid 1px }
.sf-menu > li > a:only-child:hover { border-bottom: solid 4px #FFC72C !important }
.sf-menu > li > a:only-child:active, .sf-menu > li > a:only-child:visited { background: #fff; border: #fff solid 1px }

.sf-mega { box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.06); background: rgb(245, 241, 228) none repeat scroll 0% 0%; display: block; position: absolute; width: 948px;
	/* The next rule governs the alignment of the mega dropdown. This will have to be adjusted if the top-levl horizontal nav items change  */
	left: -366px; padding: 10px 0; border: 1px solid #E3D6C1; border-top: none; border-bottom: 6px solid #FFC72C; z-index:1000 }
.sf-menu #help-list-mega { width: 62%; margin-right: 5% }
.sf-menu #help-list-mega ul { display: block }
.sf-menu #help-list-mega i { margin-right: 10px; width: 20px }
.sf-menu #help-list-mega i#classrooms:before { display: block; content: url("/helpdesk/pictures/classrooms.svg"); margin-top: -3px; width: 20px; height: 16px }
.sf-menu #help-list-mega i#d2l:before { display: block; content: url("/helpdesk/pictures/d2l.svg"); width: 15px; height: 15px }
.sf-menu #help-list-mega i#labs:before { display: block; content: url("/helpdesk/pictures/labs.svg"); margin-top: -3px; width: 23px; height: 16px }
.sf-menu #help-list-mega ul { position: inherit; top: 0 }
.sf-menu #help-list-mega ul li { background: #F5F1E4; display: inline-block; float: left; height: 30px; width: 25%; border-bottom: solid 1px #ede5d5; padding-top: 5px }
.sf-menu #help-list-mega ul li:nth-child(n+21) { border-bottom: none }
.sf-menu #help-list-mega ul li a, .sf-menu ul li a { color: #002147; font-family: "Source Sans Pro"; font-size: 0.9em; border: none }
/*
.sf-menu a[target="_blank"] { background-image: url('/helpdesk/pictures/icon_newwindow_tan.png'); background-repeat: no-repeat; background-position: 95% center }
.sf-menu a[target="_blank"]:hover { background-image: url('/helpdesk/pictures/icon_newwindow_tan.png'); background-repeat: no-repeat; background-position: 95% center }
*/
.sf-menu #help-list-mega a img.new-window-icon { margin-left: 5px }
.sf-menu ul li { background: #F5F1E4; height: 30px; border-bottom: solid 1px #ede5d5; padding-top: 5px }
.sf-menu #contact-us-mega { margin: 0; padding: 0; font-family: "Source Sans Pro" }
.sf-menu #contact-us-mega i { color: #002147; font-size: 2.5em; display: block; text-align: center; padding-top: 15px }
.sf-menu #contact-us-mega p { text-align: center; margin: 0; padding: 0 }
.sf-menu #contact-us-mega a { display: block; text-align: center; margin: 0; padding: 0; text-decoration: underline; line-height: 1 }

a.masterTooltip { text-decoration: none }

/* RIGHT COLUMN CATEGORY NAV */
div.box-section:first-child { margin-top: 15px }
div.related-topics-nav, div.support-contact { margin-bottom: 30px }
ul.related-topics { list-style-type: none; padding-left: 5px }
ul.related-topics li { border-bottom: solid 1px #EDE5D5 }
ul.related-topics li:hover { background: #E3D7C4 }
ul.related-topics li:last-child { border-bottom: none !important }
ul.related-topics li a { text-decoration: none; display: block; padding: 7px 10px 7px 5px }
ul.related-topics span.category-hover { display: none }

div.support-contact p { padding: 10px 10px 25px 47px; line-height: 1.5em }
div.support-contact p:first-line { font-weight: bold }


/* ---------------------- */
/*    Home Page Styles    */
/* ---------------------- */
#highlight-box { width: 100%; font-family: "Source Sans Light"; margin-bottom: 30px }

#get-help-in-person { background-color: #ccc; width: 67%; height: 100%; float: left }
#message-ribbon { background: transparent linear-gradient(to bottom, rgba(0, 53, 112, 0.75) 0%, rgba(0, 33, 71, 0.75) 100%) repeat scroll 0% 0%; background: -moz-linear-gradient(top, rgba(0,53,112,0.75) 0%, rgba(0,33,71,0.75) 100%); background: -webkit-linear-gradient(top, rgba(0,53,112,0.75) 0%,rgba(0,33,71,0.75) 100%); background: linear-gradient(to bottom, rgba(0,53,112,.75) 0%,rgba(0,33,71,.75) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#003570', endColorstr='#002147',GradientType=0 ); color: #FFF; height: 43%; margin: 12% 0px; padding: 0px 20px; border-top: 3px double rgba(69, 141, 201, 0.65) }
#message-ribbon i { margin-right: 8px; line-height: 1.3 }
#message-ribbon p { font-size: 1.8em; line-height: 1.1em; padding-top: 15px }
#message-ribbon em:after { content: "\A"; white-space: pre } 
a#directions-info {  }
a#directions-info:after { content: " »"; text-decoration: none }

#get-help-remotely { width: 33%; height: 100%; float: left; background: transparent linear-gradient(to bottom, #003570 0%, #002147 100%) repeat scroll 0% 0%; background: -moz-linear-gradient(top, #003570 0%, #002147 100%); background: -webkit-linear-gradient(top, #003570 0%, #002147 100%); background: linear-gradient(to bottom, #003570 0%, #002147 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#003570', endColorstr='#002147',GradientType=0 ); color: #FFF }
#get-help-remotely p { border-top: 1px solid rgb(69, 141, 201); margin: 2px 5px; padding: 20px; font-size: 1.4em; text-align: center; color: #FFC423 } 

ul#remote-help { list-style-type: none; padding: 20px 35px; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; border-top: 1px solid rgb(69, 141, 201); margin: 2px 5px }
ul#remote-help li { margin: 7px 0; border-bottom: 1px solid rgb(0, 65, 138); padding-bottom: 7px }
ul#remote-help li:first-child { text-align: center; }
ul#remote-help li:nth-child(6) { border-bottom: none }
ul#remote-help li i { margin-right: 8px; font-size: 1.3em }
ul#remote-help li a { color: #fff }
ul#remote-help li span { font-size: 1.2em; margin-right: 7px }

#left-column { margin-bottom: 30px !important }
.grid_15a { width: 620px; float: left; display: inline }
#right-column { margin-bottom: 30px }

#get-help-with { min-height: 345px; margin-bottom: 30px }
ul#help-list { list-style-type: none; margin: 0; padding: 10px 20px 10px 20px; height: 100%; overflow: auto; }
ul#help-list li { display: block; float: left; text-align: center; min-height: 87px; margin: 0px; border-bottom: 1px solid #e6dac8; border-right: 1px solid #e6dac8 }
ul#help-list li:hover { background-color: #E3D7C4 }
ul#help-list li i { display: block; margin-bottom: 10px; font-size: 1.6em }
ul#help-list li a { color: #002147; text-decoration: none; display: block; padding: 17px 0 }
i#classrooms:before, div#classrooms-nav i#classrooms:before { display: block; content: url("/helpdesk/pictures/classrooms.svg"); width: 28px; height: 25px; margin: 0 auto; padding-bottom: 0 }
div#classrooms-nav i#classrooms:before { margin-top: 5px }
i#d2l:before { display: block; content: url("/helpdesk/pictures/d2l.svg"); width: 28px; height: 25px; margin: 0 auto; padding-bottom: 0 }
i#labs:before, div#labs-nav i#labs:before { display: block; content: url("/helpdesk/pictures/labs.svg"); width: 32px; height: 25px; margin: 0 auto; padding-bottom: 0 }
div#labs-nav i#labs:before { margin-top: 3px !important }

#how-to .container { width: 100% }
#how-to .buffer { padding: 10px 30px 10px 45px }
#how-to .column { display: inline-block; margin-right: 5% }
#how-to .column:nth-child(2) { margin-right: 0 }
#how-to p { font-weight: bold }

div#new-to-etsu { height: 148px; margin-bottom: 30px }
div#get-training { height: 168px; margin-bottom: 30px }
div#tech-alerts { height: 166px; margin-bottom: 40px }

#service-status { height: 290px; background: #f5f1e4 url('https://www.etsu.edu/_resources/pictures_global/publicmap.png') no-repeat 0 -23px }
#service-status .container { padding: 0 15px 10px 20px; color: #002147 }
#service-status p { font-weight: bold; padding: 0 }
ul#service-status-items { list-style-type: none; margin: 15px 0px 10px; padding: 0 0 10px 0; border-bottom: 4px double #E6DAC8 }
ul#service-status-items li { margin-bottom: 1px; padding-bottom: 3px; border-bottom: 1px solid #E6DAC8 }
ul#service-status-items li:last-child { border-bottom: none }
ul#service-status-items li a { color: #002147 }
ul#status-legend { list-style-type: none; padding: 0; margin: 5px 0 }
ul#status-legend li:before { content: "\2022 "; font-size: 2.5em; vertical-align: middle; margin-right: 5px }
ul#status-legend li:first-child:before { color: #339900 }
ul#status-legend li:nth-child(2):before { color: #ffd800 }
ul#status-legend li:last-child:before { color: #c51d02 }

.box-section h2 { font-size: 1.8em; background: #FFC72C; height: 40px; padding: 0; position: relative; left: -12px; color: #002147; top: -12px; box-shadow: 4px 4px 0 rgba(0,0,0,0.06); display: inline-block; min-width: 230px; padding-right: 20px; z-index: 1 }
.box-section h2 i.fa { line-height: 1.5; margin-left: 15px; margin-right: 15px }

/* ---------------------- */
/*  Hours Calendar Styles  */
/* ---------------------- */
#hours {
position:relative;
background-color: #fff;
border: 1px solid #e0e0e0;
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
font-weight:bold;
}    
.hours_today
{
	background: #003269;
	background: -moz-linear-gradient(top, #003876 0%, #002147 60%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003876), color-stop(60%,#002147));
	background: -webkit-linear-gradient(top, #003876 0%,#002147 60%);
	background: -o-linear-gradient(top, #003876 0%,#002147 60%);
	background: -ms-linear-gradient(top, #003876 0%,#002147 60%);
	background: linear-gradient(to bottom, #003876 0%,#002147 60%);
	padding: 10px 0;	

}
#hours td {width: 14%;}

.hoursbox {
background-color: #B9CDe5;
}    

.hours_header{
background-color: #002A5C;
text-align:center;
color: #FFF;
font-size: 1.2em;
}    

.hours_header a:link, .hours_header a:visited {
background-color: #002A5C;
color: #FFF;
}

.hours_subheader{
background-color: #002A5C;
text-align:center;
color: #FFF;
	width: 14%;
}    

.hours_today {
background-color: #002A5C;
color: #FFF;
}
.calendar-calendar .month-view .full td.multi-day div.monthview
{
	height:2.4em;
}
.calendar-calendar div.single-day .d_4 .view-item .calendar {
height: 58px;
}
th,td {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}
@media only screen and (max-width: 590px)
{
	/* 
 * Max width before this PARTICULAR table gets nasty
 * This query will take effect for any screen smaller than 760px
 * and also iPads specifically.
 * */
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: solid 1px #eee;
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	th, td
	{
		padding:.2em;
	}
	.hidden
	{
		display:none;	
	}
	.hiddenB
	{
		display:block;
	}
	.hours_header
	{
		margin-bottom:1px;
	}
	.hours_subheader
	{
		display:none;
	}
	.past_days
	{
		display:none;
	}
	.hoursbox
	{
		border-width:1px;
		border-bottom:solid;
		border-color:black;
	}
	.article_normal
	{
		display:none;
	}
	.article_small
	{
		display:block;
	}
	
	iframe
	{
		max-width:475px;
		width:100%;
	}
	.table-label
	{
		display:block;
	}
	thead.hide-thead
	{
		display:none;
	}
	.td-head
	{
		font-weight:bold;
	}
	.td-head > p
	{
		font-weight:bold;
	}
	tr.collapse-lines-low
	{
		display: block;
    		border-bottom: 1px solid #000;
		border-right:  1px solid #000;
		border-left:   1px solid #000;
	}		
	#hours td {width:100%;}
}

/* ---------------------- */
/*  Interior Page Styles  */
/* ---------------------- */
div.p18 #left-column { font-size: 0.9em }
div.p18 #right-column { padding-bottom: 160px; background: transparent url("/helpdesk/pictures/right-column-decor.png") no-repeat scroll right bottom / 85% auto }
div.category-page #right-column { padding-bottom: 0; background: none }

div.p18 #left-column img { max-width: 100%; height: auto; margin-top: 15px; margin-bottom: 15px }
#left-column > *:first-child { padding-top: 0 }
#left-column p { text-align: justify }

.hd-breadcrumb { margin-right: 5px; color: #FFC72C }
div.p18 i#accounts, div.p18 i#classrooms, div.p18 i#email, div.p18 i#goldlab, div.p18 i#computers, div.p18 i#goldlink, div.p18 i#labs, div.p18 i#mobile, div.p18 i#networks, div.p18 i#phones, div.p18 i#printers, div.p18 i#security, div.p18 i#software, div.p18 i#tech-alerts, div.p18 i#new-users, div.p18 i#television, div.p18 i#audio-video, div.p18 i#conferencing, div.p18 i#research, div.p18 i#teaching, div.p18 i#websites, div.p18 i#training { margin-top: 3px }

div.p18 i#computers { margin-top: 6px }

div.p18 i#classrooms.fa-3x:before { display: inline-block; content: url("/helpdesk/pictures/classrooms.svg"); width: 45px; height: 40px; margin-top: 0px; text-decoration: none }
div.p18 i#labs.fa-3x:before { display: inline-block; content: url("/helpdesk/pictures/labs.svg"); margin-top: -2px; width: 50px; height: 44px; text-decoration: none }

div.p18 i#windows:before { display: inline-block; content: url("/helpdesk/pictures/windows-yellow.svg"); width: 28px; height: 25px; margin-top: 3px; text-decoration: none }
div.p18 i#classrooms:before { display: inline-block; content: url("/helpdesk/pictures/classrooms-yellow.svg"); width: 28px; height: 25px; margin-top: 3px; text-decoration: none }
div.p18 i#labs:before { display: inline-block; content: url("/helpdesk/pictures/labs-yellow.svg"); margin-top: 0px; width: 32px } 

div.p18 div.box-section h2 { font-size: 1.7em }
div.p18 div.box-section h2 i.fa { margin-top: 0 !important; margin-right: 10px }
div#new-location img { width: 100% }

.fa-2point5x { font-size: 2.5em !important }
.light-gray { color: #dfdfdf; margin-right: 5px }

.tooltip { display:none; position:absolute; border:1px solid #333; background-color:#002147; border-radius:5px; padding: 5px 10px; color:#fff; font-size:12px; z-index: 100 }

div.category-heading { margin: 20px auto 0 auto; text-align: center; }
i.fa-3x { color: #002147; margin-top: -1px !important; }
h2.hd-category-header { color: #002147; display: inline-block; font-size: 2.6em; }
p.tagline { border-top: solid 1px #dedede; border-bottom: solid 1px #dedede; width: 66%; margin: 10px auto 50px auto; font-family: "sorts italic", Georgia, serif; text-align: center; color: #002147; font-size: 1.2em; line-height: 1.5em }

h2.hd-page-header { color: #002147; margin-top: 10px }
h2.hd-page-header span { display: block; color: rgb(51, 108, 170); font-size: 0.7em; font-style: italic; padding-top: 5px; line-height: 24px }

ul.topics-list { list-style-type: none; padding: 0; margin: 0; text-align: center }
ul.topics-list li { display: inline-block; width: 142px; height: 172px; padding: 3px; background-color: #f5f1e4; border: solid 1px #e3d6c1; margin: 0 0 10px 5px; text-align: left }
ul.topics-list li:first-child { margin-left: 0 }
ul.topics-list li a { display: block; position: relative; height: 102px; vertical-align: middle; padding: 20px; color: #002147 !important; text-decoration: none; font-family: 'Source Sans Pro'; font-weight: 300; font-size: 1.3em; line-height: 1.25; transition: background-color 0.5s, color 0.5s }
ul.topics-list li a.contact-us { border-top: solid 2px #FFC423; border-bottom: solid 2px #FFC423; height: 48px; padding: 45px 20px; }
ul.topics-list li a:hover { background-color: #e3d6c1; color: #b4ada2 !important }
ul.topics-list li a.contact-us:hover { border-top: solid 2px #e3cea0; border-bottom: solid 2px #e3cea0; }
/* ul.topics-list li a:after { content: "\00BB"; display: none; color: #002147 } */
ul.topics-list li a span.need-more { font-size: 0.8em; font-weight: bold; display: block }
ul.topics-list li a span.category-hover { display: none }
ul.topics-list li a:hover span.category-hover { display: block; position: absolute; color: #002147; font-size: 84px; font-family: Arial, sans-serif; top: 7%; left: 35% }
/* ul.topics-list li a:hover:after { display: block; position: relative; font-size: 3.0em; top: -25%; left: 25% } */
ul.topics-list + h3 { margin-top: 30px }

#left-column ul.topics-list { font-size: 1.1em }

/* TRAINING TOPICS LIST */
ul#training-topics-list { margin: 70px 0 0 0; padding: 0 }
ul#training-topics-list li { display: inline-block; width: 29%; margin: 0 2% 40px 2%; height: 90px; border-bottom: solid 1px #efefef }
ul#training-topics-list li a { text-decoration: none; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; color: #002147; font-size: 1.2em; display: block }
ul#training-topics-list li a i { width: 60px; height: 90px; display: inline-block; font-size: 2.5em; float: left; transition: color 0.5s }
ul#training-topics-list li a:hover i { color: #FFC423 }
ul#training-topics-list li a span { font-size: 0.8em; color: #346aa7; display: block; padding-top: 3px }
ul#training-topics-list li a i#d2l:before { width: 40px; height: 40px; margin-left: 0; }
ul#training-topics-list li a i#classrooms:before { content: url(/helpdesk/pictures/classrooms.svg); width: 40px; height: 40px; margin-top: -5px; text-decoration: none; margin-left: 0; transition: content 0.5s }
ul#training-topics-list li a i#d2l:before { transition: content 0.5s }
ul#training-topics-list li a:hover i#classrooms:before { content: url(/helpdesk/pictures/classrooms-yellow.svg); }
ul#training-topics-list li a:hover i#d2l:before { content: url(/helpdesk/pictures/d2l-yellow.svg) }


/*  ACTION BUTTONS */
a.action-button { display: block; padding: 8px 0; margin-bottom: 10px; text-align: center; color: #fff; border-radius: 5px; text-decoration: none; text-shadow: 1px 1px 0 #333; font-size: 1.07em; transition: background 0.5s; background: #dedede }
a.action-button:last-of-type { margin-bottom: 30px }

a.action-button.blue { background: #3f85be; background: -moz-linear-gradient(top, #3f85be 0%, #245290 100%); background: -webkit-linear-gradient(top, #3f85be 0%,#245290 100%); background: linear-gradient(to bottom, #3f85be 0%,#245290 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f85be', endColorstr='#245290',GradientType=0 ); border: solid 1px #1f4f83; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset; }
a.action-button.blue:hover { background: -moz-linear-gradient(top, #4592c8 0%, #204989 100%); background: -webkit-linear-gradient(top, #4592c8 0%,#204989 100%); background: linear-gradient(to bottom, #4592c8 0%,#204989 
100%); 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4592c8', endColorstr='#245290',GradientType=0 ) }

a.action-button.red { background: rgb(225,88,49); background: -moz-linear-gradient(top, rgba(225,88,49,1) 0%, rgba(194,44,24,1) 100%); background: -webkit-linear-gradient(top, rgba(225,88,49,1) 0%,rgba(194,44,24,1) 100%); background: linear-gradient(to bottom, rgba(225,88,49,1) 0%,rgba(194,44,24,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e15831', endColorstr='#c22c18',GradientType=0 ); transition: background 0.5s; border: solid 1px #a32413; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset; }
a.action-button.red:hover { background: rgb(241,111,61); background: -moz-linear-gradient(top, rgba(241,111,61,1) 0%, rgba(194,44,24,1) 100%); background: -webkit-linear-gradient(top, rgba(241,111,61,1) 0%,rgba(194,44,24,1) 100%); background: linear-gradient(to bottom, rgba(241,111,61,1) 0%,rgba(194,44,24,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16f3d', endColorstr='#c22c18',GradientType=0 ); transition: background 0.5s; }

a.action-button.green { background: #5ab378; background: -moz-linear-gradient(top, #5ab378 0%, #3a894e 100%); background: -webkit-linear-gradient(top, #5ab378 0%,#3a894e 100%); background: linear-gradient(to bottom, #5ab378 0%,#3a894e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ab378', endColorstr='#3a894e',GradientType=0 ); border: solid 1px #2c7642; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset; }
a.action-button.green:hover { background: -moz-linear-gradient(top, #60bb80 0%, #348146 100%); background: -webkit-linear-gradient(top, #60bb80 0%,#348146 100%); background: linear-gradient(to bottom, #60bb80 0%,#348146 
100%); 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60bb80', endColorstr='#348146',GradientType=0 ) }

a.action-button i { margin-left: 5px; transition: color 0.5s }
a.action-button:hover i { color: #FFC72C }


div#link-button-list { margin: 10px auto; width: 300px }
a#dell-store-link, a#apple-store-link { display: inline-block; height: 40px; width: 100px; text-align: center; padding: 100px 10px 0 10px; text-decoration: none; font-weight: bold; border-radius: 5px; border: solid 1px #fff; transition: background-color 0.5s, border 0.5s }
a#dell-store-link:hover, a#apple-store-link:hover { background-color: #f5f1e4; border: solid 1px #e2d5c0 }

a#dell-store-link {  background: url('/helpdesk/pictures/dell-logo.svg') no-repeat 20px 15px / 80px 80px; margin-right: 40px }
a#apple-store-link { background: url('/helpdesk/pictures/apple-logo-dkgray.svg') no-repeat 15px 0 / 90px 90px }


ul.resourcesList { padding: 20px; list-style-type: square; background: #efefef; border-radius: 5px; border: solid 1px #ccc; width: 80%; margin: 20px 0 }
ul.resourcesList li { margin-bottom: 15px; margin-left: 15px }


/* RIGHT COLUMN > BOX-SECTION > CONTACT US */
#contact-us { margin-bottom: 30px }
#contact-us .container p { padding-bottom: 0 }
#contact-us .container p:last-of-type { padding-bottom: 10px }
span#call { margin-right: 25px }
span#email { margin-right: 15px }
span#browse { margin-right: 2px }

/* LEFT COLUMN > CONTACT PAGE > FORM RULES */
body#formBody { overflow: hidden !important }
iframe#contact-form { height: 600px }
div#contact-us span#location, div#contact-us span#hours, div#contact-us span#phone, div#contact-us span#email-address { display: block; font-weight: bold }

/* RIGHT COLUMN > BOX-SECTION > NEW LOCATION */
#new-location { background: transparent none repeat scroll 0% 0%; border: medium none }
#new-location img.polaroid { position: relative; top: -35px; z-index: 0; padding: 3px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 1px solid rgb(204, 204, 204) }

table.hours-of-operation th { text-align: left; padding: 3px 0 }
table.hours-of-operation td { padding: 3px 30px 3px 0 }

i.fa.fa-user { margin-top: 0 !important }


/* LEFT COLUMN > PHONE INSTRUCTIONS PAGE */
#phone-instructions { list-style-type: none; margin: 30px 0; padding: 0px; text-align: center }
#phone-instructions li { display: inline-block; margin-right: 40px }
#phone-instructions li a { width: 120px; height: 20px; padding: 125px 0 5px 0; display: block; text-align: center; font-weight: bold; text-decoration: none; border: solid 1px #fff; transition: bakcground-color 0.5s, border 0.5s }
#phone-instructions li a:hover { background-color: #F5F1E4; border: 1px solid #E2D5C0; border-radius: 5px }
#analog-phones { background: transparent url("/helpdesk/pictures/analog-phone-240.png") no-repeat scroll 0% 0% / 120px 120px }
#digital-phones { background: transparent url("/helpdesk/pictures/digital-phone-240.png") no-repeat scroll 0% 0% / 120px 120px }
#voip-phones { background: transparent url("/helpdesk/pictures/voip-phone-240.png") no-repeat scroll 0% 0% / 120px 120px }

	
div.wrapper { width: 100% }
div.available-network { display: inline-block; width: 45%; padding: 2%; margin: 20px 0 }
div.available-network i { text-align: center; margin: 0px auto; display: block; padding-left: 8px; padding-bottom: 10px }
div.available-network span { display: block; font-size: 1.3em; text-align: center }
div.available-network p { text-align: center !important }

#wireless-instructions-list h4 { margin-top: 0 !important }

div.img-btn { width: 626px; padding: 1px; margin-bottom: 20px }
div#windows-getting-started { background: url("/helpdesk/pictures/windows-getting-started-video-bg.jpg") no-repeat; background-position: 0; transition: background-size 1s, background-position 1s; width: 100%; background-size: 100% }
div#windows-getting-started a { display: block; width: 95%; height: 61%; color: #fff !important; text-decoration: none; padding: 5% 0 5% 5%; font-size: 2.0em; font-family: "Source Sans Light"; line-height:1.3em; transition: padding-left 0.5s, text-decoration 0.5s; transition-timing-function: ease-in-out }
div#windows-getting-started a:hover { text-decoration:underline; padding-left: 8% }

div#windows-help-articles { background: url("/helpdesk/pictures/windows-help-articles-bg.png") no-repeat; background-position: 0; transition: background-size 1s, background-position 1s; width: 100%; background-size: 100% }
div#windows-help-articles a { display: block; width: 95%; height: 61%; color: #002147 !important; text-decoration: none; padding: 5% 0 5% 5%; font-size: 2.0em; font-family: "Source Sans Light"; line-height:1.3em; transition: padding-left 0.5s, text-decoration 0.5s; transition-timing-function: ease-in-out }
div#windows-help-articles a:hover { text-decoration:underline; padding-left: 8% }


div#training { margin-top: 145px }
div#training .container { padding: 0 20px 10px 20px; font-size: 1.0em; line-height: 1.5em }
div#training span#call { font-weight: bold }
div#training span#email { font-weight: bold }

@media only screen and (min-width: 996px) { 
	#highlight-box { height: 242px }
	
	#get-help-with { min-height: 345px; margin-bottom: 40px}
	ul#help-list li { width: 16.5% }
	ul#help-list li:nth-child(6n+0) { border-right: none }
	ul#help-list li:nth-child(n+19) { border-bottom: medium none }
	
	#how-to { height: 290px}
	#how-to .container { width: 100% }
	#how-to .buffer { padding: 10px 30px 10px 45px }
	#how-to .column { display: inline-block; width: 47%; margin-right: 5% }
	
	#new-to-etsu .container, #contact-us .container, #get-training .container { padding: 0 20px 10px 20px }
	.helpful-links .container { padding: 0 20px 10px 40px }
	#new-to-etsu p { margin: 0; padding: 0 0 10px 0 }
	#new-to-etsu ul { margin-left: 0; padding-left: 0 }
	#new-to-etsu ul li { display: inline-block; width: 45%; line-height: 1.6 }
	
	#right-column ul.topics-list li:nth-child(6n+0) { margin-left: 0 }
	#left-column ul.topics-list li:nth-child(4n+1) { margin-left: 0px !important }
	
	div.grid_7 .box-section { width: 260px !important; float: right }
	
	/* Checking for HiDPI displays and offering up high-res images for the #highlight-box when needed */
	@media only screen and (-webkit-min-device-pixel-ratio: 1),
	only screen and (   min--moz-device-pixel-ratio: 1),
	only screen and (     -o-min-device-pixel-ratio: 1/1),
	only screen and (        min-device-pixel-ratio: 1) {
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-637.jpg') no-repeat; background-size: 637px 242px }
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) { 
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-1274.jpg') no-repeat; background-size: 637px 242px }
	}
}

@media only screen and (max-width: 995px) {
	.sf-mega {  width: 766px;
		/* Use the value below when 'Tech Alerts' is re-added to the nav */
		/* left: -196px; */
		left: -305px }
	.sf-menu #help-list-mega { width: 74%; margin-right: 1% }
	
	#highlight-box { height: 190px }
	#get-help-in-person { min-height: 190px }
	
	#message-ribbon { margin-top: 10% }
	#message-ribbon p { font-size: 1.4em; padding-bottom: 5px }
	
	#get-help-remotely p { padding: 10px; font-size: 1.2em }
	ul#remote-help { padding: 0 20px; font-size: 0.9em }	
	
	.grid_15a { width: 502px !important; float: left; display: inline }
	.box-section h2 { padding-right: 0 }
	
	ul#help-list li { width: 24.5% }
	ul#help-list li:nth-child(4n+0) { border-right: none }
	ul#help-list li:nth-child(n+21) { border-bottom: medium none }
	
	#how-to { min-height: 290px }
	#how-to .container { width: 100% }
	#how-to .buffer { padding: 10px 30px 10px 45px }
	#how-to .column { display: inline-block; width: 47%; margin-right: 5% }

	#new-to-etsu { height: auto }
	#new-to-etsu .container, #contact-us .container { padding: 0 20px 10px 20px }
	#new-to-etsu p { margin: 0; padding: 0 0 10px 0 }
	#new-to-etsu ul { margin-left: 0; padding-left: 0 }
	#new-to-etsu ul li { display: inline-block; width: 45%; margin-right: 4%; line-height: 1.6 }
	
	#service-status { background-position: -75px -23px }
	
	ul.topics-list li { width: 110px; height: 110px }
	ul.topics-list li a { height: 90px; padding: 10px }
	ul.topics-list li a:hover span.category-hover { display: block; position: absolute; color: #002147; font-size: 72px; top: 0%; left: 35% }
	ul.topics-list li a.contact-us { padding: 29px 10px }
	
	div.p18 #right-column { padding-bottom: 130px }
	
	#contact-us .container span { display: block }
	
	/* Checking for HiDPI displays and offering up high-res images for the #highlight-box when needed */
	@media only screen and (-webkit-min-device-pixel-ratio: 1),
	only screen and (   min--moz-device-pixel-ratio: 1),
	only screen and (     -o-min-device-pixel-ratio: 1/1),
	only screen and (        min-device-pixel-ratio: 1) {
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-637.jpg') no-repeat; background-size: 515px 195px }
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) { 
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-1274.jpg') no-repeat; background-size: 515px 195px }
	}
}

@media only screen and (min-width: 768px) and (max-width: 995px) {
	ul.topics-list li:nth-child(6n+0) { margin-left: 0 }
}

@media only screen and (max-width: 767px) {
	/* body header { height: 150px } */
	.siteheading { padding-left: 300px }
	#mobile_top_nav ul { margin: 0; padding: 5px 0 25px 0 }
	.row-logo-nav { height: 75px }
		
	#highlight-box { height: 160px; margin-bottom: 0 }
	.grid_15a { width: 100% !important; float: left; display: inline }
	.box-section h2 { padding-right: 20px }
	#get-help-in-person { width: 100%; min-height: 160px }
	#get-help-remotely { width: 100%; margin-bottom: 30px; height: 130% }
	#get-help-remotely p { text-align: center; font-size: 1.4em }
	
	#message-ribbon { height: auto; margin-top: 0; padding: 0; border-top: none; background: none }
	#message-ribbon p { background: transparent linear-gradient(to bottom, rgba(0, 53, 112, 0.85) 0%, rgba(0, 33, 71, 0.85) 100%) repeat scroll 0% 0%; border-top: 3px double rgba(69, 141, 201, 0.65); padding: 10px 20px; text-align: center }
	#message-ribbon a { padding: 10px; display: block; text-align: center; margin: 20px auto; border-radius: 5px; width: 37%; color: rgb(0, 33, 71); font-size: 1.1em; background: rgba(255, 199, 44, 0.9) none repeat scroll 0% 0%; border-top: 1px solid rgb(255, 221, 127) }
	#message-ribbon i { color: #002147 }
	
	ul#remote-help { padding: 0 90px }
	ul#remote-help li { margin: 8px 0; padding-bottom: 8px }
	
	#get-help-with { min-height: 345px; margin-bottom: 30px}
	ul#help-list li { width: 24.5% }
	ul#help-list li:nth-child(4n+0) { border-right: none }
	ul#help-list li:nth-child(n+21) { border-bottom: medium none }
	
	div#how-to { min-height: 290px}
	div#new-to-etsu { min-height: 148px}
	div#get-training { min-height: 168px }
	div#tech-alerts { min-height: 166px; margin-bottom: 30px }
	div#service-status { min-height: 290px }
	
	#how-to .container { width: 100% }
	#how-to .buffer { padding: 10px 30px 10px 45x }
	#how-to .column { display: inline-block; width: 100%; margin-right: 0 }
	
	#new-to-etsu ul li { margin-right: 4% }
	
	#service-status { background-position: 100px -23px }
	
	div.p18 #right-column { background: none; padding-bottom: none }
	
	div.category-heading { margin-top: 50px }
	
	a.action-button:last-of-type { margin-bottom: 50px }
	#contact-us .container span { display: block }
	
	/* Checking for HiDPI displays and offering up high-res images for the #highlight-box when needed */
	@media only screen and (-webkit-min-device-pixel-ratio: 1),
	only screen and (   min--moz-device-pixel-ratio: 1),
	only screen and (     -o-min-device-pixel-ratio: 1/1),
	only screen and (        min-device-pixel-ratio: 1) {
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-420.jpg') no-repeat; background-size: 420px 160px }
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) { 
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-840.jpg') no-repeat; background-size: 420px 160px }
	}	
}
@media only screen and (min-width: 421px) and (max-width: 767px) {
	ul.topics-list li:nth-child(3n+1) { margin-left: 0 }
}


@media only screen and (max-width: 420px) {
	.container_24, .main {margin: 0px 0px 0px 5px;}
	
	body header { height: 75px }
	.siteheading { padding-left: 10px }
	#mobile_top_nav ul { margin: 0; padding: 5px 0 25px 0; }
	.row-logo-nav { height: 20px }
	
	#headingmenuwrapper { padding-top: 0 }
	
	#highlight-box { height: 114px; margin-bottom: 0 }
	.grid_15a { width: 100% !important; float: left; display: inline }
	.box-section h2 { padding-right: 0 }
	#get-help-in-person { width: 100%; min-height: 150px }
	
	#message-ribbon { height: auto; margin-top: 0; padding: 0; border-top: none; background: none }
	#message-ribbon p { background: transparent linear-gradient(to bottom, rgba(0, 53, 112, 0.85) 0%, rgba(0, 33, 71, 0.85) 100%) repeat scroll 0% 0%; border-top: 3px double rgba(69, 141, 201, 0.65); padding: 10px 20px; font-size: 1.2em !important; text-align: left; }
	#message-ribbon a { padding: 10px; display: block; text-align: center; margin: 20px auto; border-radius: 5px; width: 50%; color: rgb(0, 33, 71); font-size: 1.1em; background: rgba(255, 199, 44, 0.9) none repeat scroll 0% 0%; border-top: 1px solid rgb(255, 221, 127) }
	#message-ribbon i { color: #002147 }
	
	#get-help-remotely { width: 100%; margin-bottom: 30px; height: 200px }
	ul#remote-help { padding: 10px 40px 0 10px }
	ul#remote-help li, ul#remote-help li:first-child {text-align:left;}
	
	#get-help-with { min-height: 345px; margin-bottom: 30px }
	ul#help-list { padding: 10px }
	ul#help-list li { width: 32.9% }
	ul#help-list li:nth-child(3n+0) { border-right: none }
	ul#help-list li:nth-child(4n+0) { border-right: 1px solid #e6dac8 }
	ul#help-list li:nth-child(12n+0) { border-right: none !important }
	ul#help-list li:nth-child(n+13) { border-bottom: 1px solid #e6dac8 }
	ul#help-list li:nth-child(n+22) { border-bottom: medium none }
	
	div#how-to { min-height: 290px }
	div#new-to-etsu { min-height: 148px }
	div#get-training { min-height: 168px }
	div#tech-alerts { min-height: 166px; margin-bottom: 30px }
	div#service-status { min-height: 290px }
	
	#how-to .container { width: 100% }
	#how-to .buffer { padding: 10px 30px 10px 45px }
	#how-to .column { display: inline-block; width: 100%; margin-right: 0 }
	
	#service-status { background-position: -20px 0 }
	
	div.category-heading { margin-top: 50px }
	
	ul.topics-list li { margin-left: 10px }
	ul.topics-list li:nth-child(2n+1) { margin-left: 0 }
	
	div.p18 #right-column { background: none; padding-bottom: none }
	
	a.action-button:last-of-type { margin-bottom: 50px }
	#contact-us .container span { display: block }
	
	/* Checking for HiDPI displays and offering up high-res images for the #highlight-box when needed */
	@media only screen and (-webkit-min-device-pixel-ratio: 1),
	only screen and (   min--moz-device-pixel-ratio: 1),
	only screen and (     -o-min-device-pixel-ratio: 1/1),
	only screen and (        min-device-pixel-ratio: 1) {
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-420.jpg') no-repeat; background-size: 394px 150px }
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) { 
		#get-help-in-person { background:url('/helpdesk/pictures/library-ext-840.jpg') no-repeat; background-size: 394px 150px }
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
/* Idea for IE-specific media query comes from https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ */
	#get-help-in-person { background:url('/helpdesk/pictures/library-ext-637.jpg') no-repeat 100% }
	header h1 a#etsulogo { background: url("/cmsroot/templateimages/header_logo.png") no-repeat scroll 0 0 / 195px 72px rgba(0, 0, 0, 0); }
}