/* http://meyerweb.com/eric/tools/css/reset/    v2.0b1 | 201101    NOTE:WORK IN PROGRESS   USE WITH CAUTION AND TEST WITH ABANDON */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,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline: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}/* remember to define visible focus styles! :focus{outline:?????}*//* remember to highlight inserts somehow! */ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* HTML ELEMENTS */
body {
	background: #000 url(../img/bg2.png) top left repeat;
	
	font:normal normal 14px "Century Gothic", sans-serif;
	color:#013f4c;
	}

/* long version of above ^^
body {
	background-color: #000;
	background-image:url(../img/bg.jpg);
	background-position: top left;
	background-repeat: repeat;
	}  */

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

hr {
	border-top:#000 1px solid;
	border-bottom:#fff 1px solid	
}

h3 {
	font-size:18px;
	font-weight:bold;
}

/* HELPFUL ELEMENTS */

.centered {
	width:1000px;
	margin:0 auto	
}

.spacer {
	display:block;
	width:100%;
	height:0px;
	clear:both /*this is what clears our left and right floating elements */	
}

.chcyan {
	color:#05d6ff
	}
	
.bolding {
	font-weight:bold;
	}

.clear {
	display:block;
	width:100%;
	clear:both;
}

/* LAYOUT ELEMENTS */

header#tophead {
	height:120px;
	/*text-align:center;*/
	line-height:120px;
	background:#00252d;
	background-image:url(../img/headerbg.png);
}

	header#tophead a {
		height:120px;
		float:left;
	}

	#logo {
		/*font-family: 'Coda', cursive;*/
		font-family:"Century Gothic", sans-serif;
		font-size:48px;
		font-weight:normal;
		color:#fff;
		text-shadow:#333 2px 2px 2px;
		text-decoration:none;	
	}

nav#main_nav {
	height: 50px;
	background:	#013f4c;
	line-height:50px /*same height and line-height centers text vertically*/
}
	nav#main_nav ul {
		text-align:center
	}
		nav#main_nav ul li {
			display:inline	
		}
			nav#main_nav ul li a {
				font-size:18px;
				font-weight:bold;
				color: #fff;
				text-shadow:#333 1px 1px 0;
				text-decoration:none;
				padding:0px 12px	
			}
			nav#main_nav ul li a#selected, nav#main_nav ul li a:hover {
				color: #05d6ff
			}
			nav#main_nav ul li a#selected {cursor:default}
			
			nav a { transition: color 1s; -moz-transition: color 1s; -webkit-transition: color 1s;}

article#main_col{
	padding:0 0 0 200px;
	width:600px;
	float:left	
}
			
	article p {
		text-shadow:#fff 1px 1px 0		
	}
/*---Home--*/
	section#primary_home {
		padding:10px 5% 10px 0;
	}
	
	section#second_left {
		width:45%;
		padding:0 2.5% 0 0;
		float:left;
	}
	section#second_right {
		width:45%;
		padding:0 2.5% 0 5%;
		float:left;
		
	}
/*--Features--*/
	section#feathead1{
		margin:10px 0 0 0;
		padding:0 0 0 5%;
		height:50px;
		line-height:50px;
		width:91%;
		background-color:#05d6ff;
		border:#000 2px solid;
		float:left;
	}
	section#feathead1 h3{padding:0 0 0 5%;}
	
	section.fleftcol{
		height:50px;
		line-height:50px;
		border:#000 1px solid;
		width:66%;
		float:left;
	}
	section.frightcol{
		height:50px;
		line-height:50px;
		border:#000 1px solid;
		width:25%;
		padding:0 5% 0 0;
		float:left;
	}
	section.fleftcol p{padding:0 0 0 5%}
	section.frightcol p{padding:0 0 0 5%}
	
/*--Services--*/

	section.servleftcol h3{padding:10px 0 0 5%;}
	section.servrightcol h3{padding:10px 0 0 5%;}
	
	section.servleftcol{
		height:250px;
		background-color:#CCC;
		box-shadow:#666 2px 2px 2px;
		width:45%;
		float:left;
		margin:10px 5% 0 0;
		
	}
	section.servrightcol{
		height:250px;
		background-color:#CCC;
		box-shadow:#666 2px 2px 2px;
		width:45%;
		margin:10px 5% 0 0;
		
		float:left;
	}
	section.servleftcol p{padding:5px 0 0 5%}
	section.servrightcol p{padding:5px 0 0 5%}

/*--Support--*/

	section.suppcol h3{padding:10px 0 0 5%; color:#fff}
	section.suppcol{
		height:200px;
		background-color:#013f4c;
		box-shadow:#666 2px 2px 2px;
		width:28%;
		float:left;
		margin:10px 5% 0 0;	
		}
	section.suppcol p{padding:5px 0 0 5%; color:#fff; text-shadow:#333 1px 1px 0;	}
	section.suppcol a{text-decoration:none}

/*--About--*/

	section.aboutcol h3{padding:10px 0 0 5%; color:#fff}
	section.aboutcol{
		height:200px;
		background-color:#00252d;
		box-shadow:#666 2px 2px 2px;
		width:91%;
		float:left;
		margin:10px 5% 0 4%;	
		}
	section.aboutcol p{padding:5px 5% 0 5%; color:#fff; text-shadow:#333 1px 1px 0;	}
	
	
	section.aboutcol:nth-of-type(2){
		background-color:#05d6ff;
		box-shadow:#666 2px 2px 2px;
	}
	section.aboutcol:nth-of-type(2) h3{padding:10px 0 0 5%; color:#00252d}
	section.aboutcol:nth-of-type(2) p{color:#00252d; text-shadow:#ccc 1px 1px 0;	}

	section.aboutcol:nth-of-type(2){
		margin:10px 5% 0 4%;
	}
	
	section.aboutcol:last-child{ margin:10px 5% 10px 4%;}
	
	/*--contact--*/
	section.contactcol h3{padding:10px 0 0 5%; color:#fff}
	section.contactcol{
		height:400px;
		background-color:#00252d;
		box-shadow:#666 2px 2px 2px;
		width:91%;
		float:left;
		margin:10px 5% 0 4%;	
		}
	section.contactcol p{padding:5px 0 0 5%; color:#fff; text-shadow:#333 1px 1px 0;	}
	.contactleft {
		height:400px;
		width:20%;
		float:left;
	}
	.contactright {
		height:400px;
		width:75%;
		float:left;
	}
	
	.contactright textarea {height:200px; width:100%;}
	
/*--main--*/
article#rightcol {
	padding: 10px 0 0 0;
	width:200px;
	float:left
}
	article#rightcol p:nth-child(2), article#rightcol p:nth-child(3) {
		padding: 10px 0 0 0;
	}

aside{
	position:absolute;
	width:200px;
	float:left
}

	aside div{
		display:block;
		width:180px;
		height:180px;
		background:#000;
		margin:10px 10px;
		float:right;
		border-radius:10px;
		-moz-border-radius:10px;
	}
	aside div p{
		font-size:14px;
		padding:20px 10px;
	}
	
	aside div:nth-child(1){background:#00252d;
		color:#fff;}
	aside div:nth-child(2){background:#013f4c;
		color:#fff;}
	aside div:nth-child(3){
		background:#05d6ff;
		color:#00252d
		}
	
#smallbreak {
	display:none;
}
	
footer {
	padding:0 0;
	font-size:12px;
	height:50px;
	background:#013f4c;
	
	/*background-image:url(../img/footerbg1.png);*/
	
}
	footer p {
		float:right;
		color:#FFFFFF;
		padding:10px;
		font-weight:700;
	}
	
	footer div#footlogo{
		float:right;
	}
	/*footer div#footlogo img{
		height:50px;
		width:83px;
	}*/
	footer nav {
		float:left;
		line-height:50px;
	}
		footer nav ul li {
			display:inline;
			
		}
			footer nav ul li a {
				color: #05d6ff;
				font-weight:700;
				text-shadow:#000 1px 1px 0;
				text-decoration:none;
				padding:10px 8px
			}
			footer nav ul li a#selected, footer nav ul li a:hover {
			color: #fff
			}
			footer nav ul li a#selected {cursor:default}

@media only screen and (max-width: 1000px){
	.centered {
		width:98%;
		position:relative
		}
	
	
			
	article#main_col{
		width:68%;
		padding:0 0 0 0;
	}
	
	/*--Support--*/


	section.suppcol{
		
		width:45%;
		
		}
	

	/*--Main--*/	
	
	article#rightcol{
		width:30%;
	}


	aside{
		width:98%;
		position:relative;
		float:none;
		
		
	}
	
		aside div{
			float:left;
			margin:10px 10px;
		}
		
	#smallbreak {
		display:block;
		height:10px;
	}
		
}

@media only screen and (max-width: 768px){
	


	#logo {
		/*font-family: 'Coda', cursive;*/
		font-family:"Century Gothic", sans-serif;
		font-size:24px;
		font-weight:normal;
		color:#fff;
		text-shadow:#333 2px 2px 2px;
		text-decoration:none;	
	}
	
	nav#main_nav {
		height: 60px;
		line-height:30px /*same height and line-height centers text vertically*/
		
	}
	
	article#main_col{
		width:98%;
		padding:0 0 0 0;
	}
	
	/*--Support--*/
    /* Switched back to 3 columns*/

	section.suppcol{
	
		width:28%;
		}

	
	/*--Main--*/
	
	article#rightcol{
		width:98%;
	}
	article#rightcol p{
		width:30%;
		float:left;
		
	}
	
		article#rightcol p:nth-child(2) {
			padding: 0 4%;
		}
		article#rightcol p:nth-child(3) {
			padding: 0 0 0 0;
		}
	
	footer{
		height:150px;
		float:none;
		text-align:center
		}
	footer p {
		float:none;
		color:#FFFFFF;
		padding:10px;
		font-weight:700;
	}
	
	footer div#footlogo{
		float:none;
	
}





}

@media only screen and (max-width: 480px){

	#logo {
		font-size:18px;

	}
	
	nav#main_nav {
		height:auto;
		line-height:auto;	
	}
		nav#main_nav ul li a {
			display:block;
			padding:0;
			height:40px;
			line-height:40px;
			background:#00252d;
			margin:0 0 3px
		}
		
		nav#main_nav ul li a:first-child {
			margin:3px 0;
		}
			
	article#main_col{
		width:98%;
		
	}
			
	article#rightcol {
		padding:10px 0;
		width:98%;
		float:none;
		left:0;
		
	}
	
/*--Services--*/

section.servleftcol{
		
		width:90%;
		margin:10px 5% 0 5%;
	}
	section.servrightcol{
		
		width:90%;
		margin:10px 5% 0 5%;
		
	}
	
/*--Support--*/


	section.suppcol{
	
		width:95%;
		margin:10px 5% 0 4%;	
		}
	
/*--About--*/

	section.contactcol p{font-size:10px;}
	
	
/*--main--*/			
	aside{
		width:98%;
		position:relative;
		left:0
	}
	
		aside div{
			float:left;
			
		}
		aside div:nth-child(even){
			float:right
		}
	
	
		
		
		footer p, footer nav{
			float:none;
			margin:0 auto;
			text-align:center
		}

				/*footer nav ul li a {
					padding:10px 12px;
					display:inline-block
				}*/
	
}