/*----------------------------------------------------------------------------------------------------------------*\
    This is the responsive containers excempt the navigation which is done with java script
\*----------------------------------------------------------------------------------------------------------------*/
.dashb_outer{ float: right; width: 99%}
.dashb_inner{ float: right; width: 98%}
.loggedinlogoutbox_outer{ float: right; width: 99%}
.loggedinlogoutbox{ float: right; width: 33%}
.box { float: left; }
#root { max-width: 1280px; margin: 0 auto; }
#header_noads { width: 99%; margin-left: 1%; margin-right: 1%; margin-bottom: 0%; margin-top: 3em;}
#header { width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 0%; margin-top: 5em;}
#content1 { width: 78%; margin-left: 1%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%;}
#box5 { width: 49%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%;}
#box6 { width: 49%; margin-left: 1%; margin-right: 0%; margin-bottom: 0%; margin-top: 1%;}
#box7 { width: 49%; margin-left: 1%; margin-right: 0%; margin-bottom: 0%; margin-top: 1%;}
#box8 { width: 49%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%;}
#content2 { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
#content2a { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
#sidebar { width: 19%; margin-left: 0%; margin-right: 1%; margin-bottom: 1%; margin-top: 1%;}
#footer {width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 1%; margin-top: 1%; }

.responsive1 { width: 728px; height: 90px; }

.respondside2 { width: 160px; height: 600px; }

.errorstatement {color: red;} 

@media only screen and  (max-width: 768px) {
	#header { width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 0%; margin-top: 5em;}
	#content1 { width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
	#box5 { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%;}
	#box6 { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
	#box7 { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%;}
	#box8 { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
	#content2 { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
	#content2a { width: 99%; margin-left: 0%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
	#sidebar { width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 0%; margin-top: 1%; }
	#footer { width: 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 1%; margin-top: 1%; }
	.responsive1 { width: 320px; height: 50px; }
	.respondside2 { width: 320px; height: 50px; }
}

img {
	max-width: 100%;
	height: auto;
}

.sprite {
background:url('https://cdn.softservenews.com/sprite_jim.jpg');
}

/* CSS - Media Queries */ 

@media screen and (max-width:768px) {
	.a_alert {
		width:300px;
		height:200px;
		background-size:458px;
		background-position:0px 200px;
	}
}
@media screen and (max-width:420px) {
	.logo {
		width:392px;
		height:116px;
		background-size:393px;
	}
}
@media screen and (max-width:300px) {
	.logo {
		width:257px;
		height:76px;
		background-size:259px;
	}
	.a_alert {
		background-position:0px 171px;
		width:257px;
		height:171px;
		background-size:392px;
	}
	.globeNW {
		background-position:0px -98px;
		width:254px;
		height:127px;
		background-size:328px;
	}
	.globeNE {
		background-position:0px -227px;
		width:254px;
		height:127px;
		background-size:328px;
	}
}

/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */
 
.the_spritessoftserve01, .the_spritesglobene, .the_spritesglobenw, .the_spritesaurora-alerts
{ max-width: 100%; background-size: 100%; background-image: url('https://cdn.softservenews.com/sprite_jim_new.jpg'); }
 
.the_spritessoftserve01 { background-position: 0 0%; background-size: 100%; }
.the_spritesglobene { background-position: 0 26.565465%; background-size: 129.096045%; }
.the_spritesglobenw { background-position: 0 61.100569%; background-size: 129.096045%; }
.the_spritesaurora-alerts { background-position: 0 100%; background-size: 152.333333%; }

/*----------------------------------------------------------------------------------------------------------------*\
    All the below is for the navagation
\*----------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------*\
    BASIC RESET - please use a better one in production
\*----------------------------------------------------------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Times New Roman", Times, sans-serif;
}

.pageContainer {
	max-width: 1280px;
	padding: 0px 10px;
    margin: 0 auto;
}

.textContainer {
    padding-top: 20px;
    
    text-align: center;
}

.textContainer a {
	color: #333;
}




/*----------------------------------------------------------------------------------------------------------------*\
    NAV
\*----------------------------------------------------------------------------------------------------------------*/
.nav {
	background: #333;
	  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;

}

.nav .navControl {
	display: none;
	
	cursor: pointer;
}

.nav ul {
	list-style: none;
}

.nav li {
	display: block;
	
	position: relative;
	
	z-index: 1;
	
	
}

.nav a {
	padding: 10px 20px;
	display: block;
	
	color: #fff;
	text-decoration: none;
	text-align: center;
}

.nav a:hover {
	color: #FFCC66;
}

.nav span {
    display: none;
}

.nav .dropdown {
    text-align: center;
}

.nav .dropdown li {
	margin: 0;
	display: inline-block;
}

.nav .dropdown a {
    padding: 0;
    border-right: 0;
    margin-right: 10px;
    
    font-size: 0.8em;
}

.nav .dropdown li:last-child a {
    margin-right: 0;
}

.nav .dropdown ul {
    display: none;
}

/*----------------------------------------------------------------------------------------------------------------*\
    Responsive Sprites - Added by Brian Johnson Design ********* START *********
\*----------------------------------------------------------------------------------------------------------------*/


.sprite_aurora_alerts {
	width:100%;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
}
.sprite_aurora_alerts a {
	background-image:url('https://cdn.softservenews.com/aurorasprite.jpg');
	display:block;
	height:0;
	padding-bottom:66%;
	background-position:0 0;
	background-size:588.333%;
}
.sprite_what_causes {
	width:100%;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
}
.sprite_what_causes a {
	background-image:url('https://cdn.softservenews.com/aurorasprite.jpg');
	display:block;
	height:0;
	padding-bottom:66%;
	background-position:20.4778% 0;
	background-size:588.333%;
}
.sprite_soft_serve {
	max-width:457px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite_soft_serve a {
	background-image:url('https://cdn.softservenews.com/aurorasprite.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:29.54%;
	background-position:45.9% 0;
	background-size:388%;
}
.sprite_north_kp {
	max-width:354px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite_north_kp a {
	background-image:url('https://cdn.softservenews.com/aurorasprite.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:50%;
	background-position:100% 0;
	background-size:498.588%;
}
.sprite_north_ea {
	max-width:354px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite_north_ea a {
	background-image:url('https://cdn.softservenews.com/aurorasprite.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:50%;
	background-position:74.9114% 0;
	background-size:498.588%;
}



.sprite2_soft_serve {
	max-width:457px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite2_soft_serve a {
	background-image:url('https://cdn.softservenews.com/aurorasprite2.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:29.2%;
	background-position:27.7% 99%;
	background-size:656%;
}
.sprite2_sun {
	max-width:375px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite2_sun div {
	background-image:url('https://cdn.softservenews.com/aurorasprite2.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:89.29088277858%;
	background-position:0% 0%;
	background-size:428.219971%;
}
.sprite2_aurora {
	max-width:475px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite2_aurora div {
	background-image:url('https://cdn.softservenews.com/aurorasprite2.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:75.704225352%;
	background-position:28.9% 0%;
	background-size:520.9507%;
}
.sprite2_kpna {
	max-width:684px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite2_kpna a {
	background-image:url('https://cdn.softservenews.com/aurorasprite2.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:49.8826%;
	background-position:100% 0%;
	background-size:347.300469483568%;
}
.sprite2_kpea {
	max-width:684px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.sprite2_kpea a {
	background-image:url('https://cdn.softservenews.com/aurorasprite2.jpg');
	width:100%;
	display:block;
	height:0;
	padding-bottom:49.8826%;
	background-position:59.7% 0%;
	background-size:348%;
}


/*----------------------------------------------------------------------------------------------------------------*\
    Responsive Sprites - Added by Brian Johnson Design  ********* END  **********
\*----------------------------------------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------------------------------------------------*\
    MEDIA QUERIES
\*----------------------------------------------------------------------------------------------------------------*/
@media all and (min-width: 768px) {
	.nav li {
		margin-right: -4px;
		display: inline-block;
	}
	
	.nav a {
	   border-right: 1px solid #555;
	}
	
	.nav .dropdown {
	    display: none;
	    
	    background: #333;
	    
        position: absolute;
        top: 100%;
        left: 0;
    }
    
    .nav .dropdown li {
        display: block;
    }
    
    .nav .dropdown a {
        padding: 10px;
        margin-right: 0;
        
        white-space: nowrap;
        text-align: left;
    }
    
    .nav span {
        display: inline;
        
        position: relative;
        left: 5px;
    }
    
    .nav a:hover + .dropdown,
    .nav .dropdown:hover {
        display: block;
    }
}