/* 
	Styles for AARNet mirror.
 */
html {
	background: url(/images/html-bg.gif) repeat; 
}

body { 		padding: 0; 
		margin: 0; 
		padding-left: 0; 
		padding-right: 0; 
		margin-left: 0; 
		margin-right: 0; 
}
		

a	{
	text-decoration: underline;
	color: #000000;
}
a:visited	{  
	color: #000000; }
a:active { color: #CC0000; }
a:hover  { color: #CC0000; }

a.contents {
    font-family: Verdana, Arial, Helvetica, sans-serif
}

a.contents:active { color: #CC0000; }
a.contents:hover  { color: #CC0000; }


.noa { background-color: #609aff; }

/* Redfine the size of headings */
h1 { font-size: 1.15em; letter-spacing: 0.5em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif }
h2 { font-size: 1.1em; font-weight: bold; letter-spacing: 0.3em; font-family: Verdana, Arial, Helvetica, sans-serif  }
h3 { font-size: 1.05em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif  }
h4 { font-size: 1.0em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif  }
h5 { font-size: 0.95em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif  }
h6 { font-size: 0.9em; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif }

h1.path { letter-spacing: normal; }

pre {
	font-family: "Lucida Console", monospace; 
	font-size: 12px;
}

p { 
    font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;
}


.updatedetails { 
	font-family: "Lucida Console", monospace; 
	font-size: 12px;
}

.searchbrowse { 	font-size: 0.8em ; 
					text-decoration: none; 
					font-family: Verdana, Arial, Helvetica, sans-serif;
			        background-color: "#8D8D8D";

			   }
.searchbrowse a { 
					position: relative; 
					color: #FFFFFF;
			/*		left: 1.5em;	*/
				}
.searchbrowse a:visited { 
					position: relative; 
					color: #FFFFFF;
			/*		left: 1.5em;	*/
				}
.searchbrowse a:hover {  	color: #CC0000; }
.lhsmenu { 		font-size: 0.8em; 
				text-decoration: none; 
				font-family: Verdana, Arial, Helvetica, sans-serif;
		 }
.lhsmenu a {
				position: relative; 
				left: 1.5em;
		   }

.menuitem { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; } 

.menuheading { font-weight: bold; 
		font-size: 12px; 
		font-family: Verdana, Arial, Helvetica, sans-serif;  
	       color: #FFFFFF;
	}

.mainbodycontent {	font-size: 0.9em; 
					margin-left: 8%; 
					margin-right: 5%; 
					font-family: Verdana, Arial, Helvetica, sans-serif;
				 }
				 
th, td { /* For the benefit of Netscape 4.x */
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main archive list is on the home page. The list is displayed 
   within a table.
 */
.mainarchivelist { 	font-family: Georgia, "Times New Roman", Times, serif;}
.mainarchivelist td { 	/* For the benefit of Netscape 4.x */
						font-size: 0.8em; 
						font-family: Georgia, "Times New Roman", Times, serif;
					}

.footer { 	font-size: 0.8em; 
			text-align: center; 
			margin-right: 1em; 
			font-family: Verdana, Arial, Helvetica, sans-serif; 
			color: #FFFFFF;
		}
	
.footer a       {
        text-decoration: underline;
        color: #FFFFFF;
}
.footer a:visited       {
        color: #FFFFFF; }
.footer a:active        {
        color: #CC0000;
}
	
.footer a:hover {  	color: #CC0000; }

address { font-style: normal; font-weight: bold }

.sitesubheading { 	font-size: 1.1em; 
					font-weight: bold; 
					color: #FFFFFF; 
					background-color: #609AFF;
					font-family: Verdana, Arial, Helvetica, sans-serif;
				 }
.sitesubheading2 { 	font-size: 0.8em; 
					font-weight: normal; 
					color: #FFFFFF; 
					background-color: #282b7c;
					margin-left: 19%;
					font-family: Verdana, Arial, Helvetica, sans-serif;
				 }

/* What's New could have been implemented by tables, but using CSS and divs is much better */
.whatsnew-box { 	border-style: solid; 
				border-width: 1px;
				margin-right: 20%; 
				margin-left: 20%; 
				border-color: #609AFF;
		  }
.whatsnewheading { 	font-size: 0.8em; 
					font-weight: bold; 
					color: #000000; 
					background-color: #609AFF; 
					margin-top: 0px; 
					margin-right: 0px; 
					margin-bottom: 0px; 
					margin-left: 0px; 
			/*		padding-top: 0.5em; */ 
					padding-right: 1em; 
			/*		padding-bottom: 0.5em;  */ 
					padding-left: 1em; 
					font-family: Verdana, Arial, Helvetica, sans-serif; 
				}
.sponsorheading { 	font-size: 0.8em; 
					font-weight: bold; 
					color: #609AFF; 
					background-color: #FFFFFF; 
					margin-top: 0px; 
					margin-right: 0px; 
					margin-bottom: 0px; 
					margin-left: 0px; 
			/*		padding-top: 0.5em; */ 
					padding-right: 1em; 
			/*		padding-bottom: 0.5em;  */ 
					padding-left: 1em; 
					font-family: Verdana, Arial, Helvetica, sans-serif; 
				}
.whatsnewcontent { 	font-size: 0.8em; 
					margin-top: 0px; 
					margin-right: 0px; 
					margin-bottom: 0px; 
					margin-left: 0px; 
					padding-top: 0.5em; 
					padding-right: 1em; 
					padding-bottom: 0.5em; 
					padding-left: 1em; 
					color: #000000; 
					background-color: #FFFFFF; 
					font-family: Verdana, Arial, Helvetica, sans-serif;
				 }

.breadcrumbtrail { 	font-size: 0.8em; 
					text-align: right; 
					margin-right: 1em; 
					font-family: Verdana, Arial, Helvetica, sans-serif;
				 }

.start-of-link { display: none; }

.aarnetlogo {
	padding: 35px 15px 0 0;
	float: right;
	}

.mirrortitle {
	padding: 10px 0 0 0;
	float: left;
	}

.menublock { 
 	padding: 10px 10px 10px 10px;
	float: center;
	}

ul.popular-list {
    list-style: none;
    display: block;
    margin: 0 auto;
    padding: 0;
    padding-left: 1rem;
}

ul.popular-list li {
    display: table;
    width: 17rem;
    height: 5rem;
    background: #333;
    margin-bottom: 15px;
    margin-right: 15px;
    overflow: hidden;
    text-align: center;
    background: #9da2a6;
    float: left;
    font-weight: normal;
}
ul.popular-list li:nth-child(2n) {
    ackground: #e97400;
    background: #d5d5d5;
}
.popular-list li:hover, 
.popular-list li:hover:nth-last-child(1), 
.popular-list li:hover:nth-child(2n), 
.popular-list li:hover:nth-child(3n) {
    color: #fff;
    background: #232323;
    border-bottom: 6px solid #e97400;
}
ul.popular-list li a:link,
ul.popular-list li a:active,
ul.popular-list li a:visited {
    display: table-cell;
    vertical-align: middle;
    color: #000;
    padding: 11px;
    width: 100%;
    height: 100%;
    font-size: 18px;
    text-decoration: none;
}
ul.popular-list li a:hover {
    color: #fff;
}

/* NEW */

html, body {
            margin: 0px;
            font-family: 'Open Sans', sans-serif;
            height: 100vh;
			min-height: 100vh;
        }
	
		ul{
			list-style: none;
		}
	
		*{
			box-sizing: border-box;
		}
	
		.page-wrap {
			min-height: 100vh;
			height: 100vh;			
		}
	
        .container-wrap {
            width: 100%;
			background: url("https://www.aarnet.edu.au/images/hero-cards-background-v5.png");
			background-position: top -10.3125rem center;
			background-repeat: no-repeat;
			background-size: 106.25rem auto;
			margin-bottom: 10px;
        }
		
        .content-body {
			padding: 4rem 0;
			width: 90%;
        }
        
        .content, .footer-internal, .container, .content-body {
            /*customize position*/
            display: block;
			max-width: 77.5rem;
			padding: 0 1.25rem;
			margin: 0 auto;
        }



        h1 {
            padding-top: 40px;
            padding-bottom: 20px;
            font-weight: normal;
        }
        p {
            font-size: 17px;
        }
	
		.header-wrap {
			background: url("https://www.aarnet.edu.au/uploads/images/online-portal-header.jpg");
			display: block;
			min-height: 10.625rem;
			background-position: 50%;
			background-repeat: no-repeat;
			background-size: cover;
		}
	
		.header-internal {
			
			width: calc(100% - 2.5rem);
		}

		.header-menu {
			display: block;
			background: #FFFFFF;
			border-radius: .25rem;
			max-height: 4.375rem;
			width: calc(100% - 2.5rem);
			margin: 2.5rem 0 0 1.25rem;
			padding: 0px 1.25rem;
			box-shadow: 0 0 0.5rem rgb(0 0 0 / 15%);
    		position: fixed;
    		transition: background-color .3s cubic-bezier(.5,0,.5,1),opacity .3s cubic-bezier(.5,0,.5,1);
			z-index: 1002;
		}

		.main-logo {
			float: left;
			display: relative;
			padding-top: 15px;
		}
	
		.aarnet-header-logo {
			height: 2.5rem;
    		margin-left: .75rem;
			width: auto;
			display: block;
			max-width: 100%;
		}

		.main-menu {
			float: right;
			display: flex;
			
		}
	
		a.menu-item {
			cursor: pointer;
			font-size: .875rem;
			margin-right: 1.875rem;
    		position: relative;
			color: #000;
			text-decoration: none;
			line-height: 4.375rem;
			-webkit-tap-highlight-color: rgba(0,0,0,.1);
    		transition-duration: .3s;
			transition-property: background-color,color,opacity,border,border-color,background-position,outline,box-shadow,border-bottom,text-decoration,left,top,transform,-webkit-text-decoration;
			transition-timing-function: cubic-bezier(.5,0,.5,1);
			transform-origin: center center;
			font-weight: bold;
		}
	
		a.menu-item:hover {
			color: #f47920;
			
		}
	
		a.menu-item:hover:before {
			background-color: #f47920;
			bottom: 0;
			content: "";
			display: block;
			height: 2px;
			height: 0.125rem;
			left: 0;
			position: absolute;
			width: 100%;	
			box-sizing: border-box;
		}
	
		.divider {
			position: relative;
			margin-left: 20px;
		}
	
		.divider:before {
			background-color: #e1e1e1;
			content: "";
			display: block;
			height: 3.125rem;
			left: -1.5625rem;
			position: absolute;
			top: 0.625rem;
			width: 0.0625rem;
		}
	
		.top-menu {
			float: right;
			color: #FFFFFF;
			margin-top: 15px;
		}
	
		a.top-menu-item {
			color: #FFFFFF;
			text-transform: uppercase;
			text-decoration: none;
		}
	
		a.top-menu-item:hover {
			text-decoration: underline;
		}
		
		.main-text {
			text-align: center;
		}
	
        .button {
            width: 100%;
            padding: 50px;
            display: inline-block;
            text-align: center;
            margin: 10px;
            transition: .3s ease;
			text-decoration: none;
			border-radius: .375rem;
			color: #FFFFFF;
        }
	
		.button.staff-login {
			background-color: #0C5164;
		}
	
		.button.non-aarnet-login {
			background-color: #887EBB;
		}
	
		.button.download-client {
			background-color: #7BAE92;
		}
	
		.button:hover {
			text-decoration: underline;
			color: #FFFFFF;
			background-color: #F7941D;
		}
	
        .btn-text {
            color: #FFFFFF;   /*customize button font color */
            font-size: 1.5rem;
			text-transform: uppercase;
        }
        .made-with {
            padding-top: 15px;
            padding-bottom: 0;
            margin-bottom: 0;
        }
        .made-with a {
            text-decoration: underline;
        }
        .right {
            margin-left: 15px;
        }
        .right > span{
            display: block;
        }

        .zoom-logo {
            width: 400px;
            height: 147px;
        }
        .footer {
            text-align: center;
            background-color: #000000;
			width: 100%;
			position: relative;
			clear: both;
			padding-bottom: 20px;
        }
	
        .footer a {
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
			text-decoration: none;
        }
	
		.footer-links {
			color: #b8b8b8;
			line-height: 4rem;
			font-size: .875rem;
		}
	
		.footer-links a, .footer-links a:visited, .footer-links a:active {			
			color: #b8b8b8;		
			text-decoration: none;
			margin-left: 1.5625rem;
		}
	
		.footer-links a:hover {
			opacity: .8;
		}
	
		.acknowledgement {
			color: #FFFFFF;
			line-height: 1.875;
			margin: 0 auto;
			max-width: 43rem;
			font-size: 1.125rem;
			font-weight: bold;
			padding-top: 10px;
		}
	
		.footer-bottom {
			position: relative;
			display: block;
		}
	
		.footer-logo {
			width: 33%;
			position: relative;
		}
	
		.aarnet-footer-logo {
			width: 200px;
		}
	
		.footer-socials img {
			max-height: 36px;
			margin-left: 20px;
			padding-top: 10px;
		}
	
		* {
		  box-sizing: border-box;
		}

		.column {
		  float: left;
		  width: 33.33%;
		  padding: 10px;
		}
	
		.column.main-buttons {
			margin-bottom: 80px;
		}

		.row:after {
		  content: "";
		  display: table;
		  clear: both;
		}

		/* STATUS PAGE */

		.layout-content.status.status-index .page-status {
			border: 0px;
			text-shadow: 0px;
			margin-bottom: 50px;
			margin-top: 20px;
		}

		.layout-content.status.status-index .components-section .components-container.one-column .component-container:nth-child(odd) {
			background-color: #F7F7F7;
		}

		.subscribe-button {
			position:relative;
			border: 2px solid #71C7F0; 
			border-radius: 4px; 
			padding: 0.75rem 1.25rem;
			background-color:#71C7F0;
			float: right;
			clear: both;
		}

		.subscribe-button:hover {
			border: 2px solid #F7941D;
			background-color:#F7941D;
		}

.portal-header-name {
			position: relative;
			left: 10px;
			font-size: 20px;
			top: -15px;
			border-left: 1px solid #BECDD4;
			padding-left: 15px;
		}

@media screen and (min-width: 770px) {
	.dropdown-menu {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
box-shadow: 0 0 0.5rem rgb(0 0 0 / 15%);
border-radius: .25rem;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-menu:hover .dropdown-content {
  display: block;
}
}
	

        @media screen and (max-width: 769px) {
			
			.page-wrap {
				min-height: auto;
				height: auto;

			}
			
			.portal-header-name {
				position: relative;
				font-size: 12px;
				top: -45px;
				left: 145px;
				border-left: 0px;
				padding-left: 0px;
				max-width: 70px;
				word-break: normal;
				display: block;
			}
			
			.subscribe-button {
				float: none;
				width: 100%;
				text-align: center;
			}
			
			.top-menu {
				float: none;
				display: block;
				text-align: center;
				width: 100%;
				margin: 0 0 0 1.25rem;
				padding-top: 15px;
			}
			
			.main-menu {
				display: none;
			}
			
			.header-menu {
				margin-top: 2.6rem;
			}
			
            .column {
			  float: none;
			  width: 100%;
			  padding: 0px;
			}
			
			.button {
				margin: 0px;
				margin-bottom: 20px;
			}
			
			.column.main-buttons {
				margin-bottom: 0px;
			}
			
			/* MOBILE MENU */
			
			
			/* Nav menu */
				.nav{
					position: fixed;
					background-color: #FFFFFF;
					overflow: hidden;
					top: 125px;
					right: 20px;
					box-shadow: 0 0 0.5rem rgb(0 0 0 / 15%);
					border-radius: .25rem;
					width: calc(100% - 2.5rem);
				}
			
				ul.menu {
					padding-left: 0px;
					margin: 0px;

				}
				.menu a{
					display: block;
					padding: 20px;
					color: #F7941D;
					text-decoration: none;
				}
				.menu a:hover{
					background-color: #F9F9F9;
				}
				.nav{
					max-height: 0;
					transition: max-height .5s ease-out;
				}
			
			/* Menu Icon */
				.hamb{
					cursor: pointer;
					float: right;
					padding: 35px 20px;
				}/* Style label tag */
			
				.hamb-line {
					background: #000000;
					display: block;
					height: 3px;
					position: relative;
					width: 35px;

				} /* Style span tag */

				.hamb-line::before,
				.hamb-line::after{
					background: #000000;
					content: '';
					display: block;
					height: 100%;
					position: absolute;
					transition: all .2s ease-out;
					width: 100%;
				}
				.hamb-line::before{
					top: 8px;
				}
				.hamb-line::after{
					top: -8px;
				}

				.side-menu {
					display: none;
				} /* Hide checkbox */
			
				/* Toggle menu icon */
				.side-menu:checked ~ nav{
					max-height: 100%;
				}
				.side-menu:checked ~ .hamb .hamb-line {
					background: transparent;
				}
				.side-menu:checked ~ .hamb .hamb-line::before {
					transform: rotate(-45deg);
					top:0;
				}
				.side-menu:checked ~ .hamb .hamb-line::after {
					transform: rotate(45deg);
					top:0;
				}
			
        }