/*
Colors:
Dark Blue: #012056
Dk Blue: #00cdf3
Lt Blue: #a3f0fe
Orange: #fea801

 */


/* Mobile first approach media queries under <768 pixels
grid (col-xs)
-------------------------------------------------- 
-------------------------------------------------- 
-------------------------------------------------- */

body {
    overflow-x:hidden;
    font-family:"Roboto Condensed", sans-serif;
    font-weight:400;
    font-size:62.5%; /* 16px × 62.5% = 10px */
	font-size:1em;
    background-color:#0350aa;
    margin:0 auto;
    padding:0;
    color:#333;
    line-height:1.4em;
    font-weight:400;
}

.container {padding:30px 0;}


/* LINKS
--------------------------------------------------------------------
*/
a,
a:hover,
a:focus,
a:active,
a.active {
    outline:0;
}

a:link, a:visited {color:#006ed0; text-decoration:none;}
a:hover, a:active {color:#00cdf3; text-decoration:underline;}   



/* HEADINGS & TYPE
----------------------------------------------------------------------
*/
h1, h2, h3, h4, p {text-align:left;}
h1 {color:#333; font-size:2.0em;}
h2 {color:#0350aa; font-size:1.7em;}
h3 {color:#006ed0; font-size:1.6em;}
h4 {color:#474747; font-size:1.5em;}

p {
    margin:14px auto;
    color:#333;
    line-height:1.5em;
    font-weight:400;
    font-size:15px;
}

ul {padding-left:20px;}
li {font-size:15px; line-height:1.6em; margin-left:0;}


/* PAGE ELEMENTS 
-----------------------------------------------------------------------
*/

#sites h2 {color:#fea801;}
#sites p {color:#fff;}
                                   

p.sue img {max-width:120px; padding:5px; border:solid 1px #454545;}



.bg-wh {background-color:#fff;}

.img-centered {margin:0 auto;}


/* PORTFOLIO
------------------------------------------------------------------------ */
#portfolio {background:#0350aa; height:1030px;} 
#portfolio h2 {color:#fea801;}
#portfolio p {color:#fff;}     

    #portfolio .site {width:100%; min-height:630px; text-align:center; background-color:#f1f1f1; border-radius:6px; padding:10px;}
    #portfolio .site h3 {color:#0350aa; font-size:18px; text-align:center; margin-top:10px;}
    #portfolio .site p {color:#545454; font-size:14px; padding-right:0;}   
    #portfolio .site .photo {width:100%; display:block;}
    #portfolio .site .copy {width:100%; display:block; color:#333;}
    #portfolio .site .copy p {color:#333;}
    #portfolio .site .photo img {max-width:210px; padding:5px; background-color:#fff; margin:0 auto; text-align:center;}


#intro .row, #portfolio .row, #contact .row {padding:0 20px;}

.carousel-control.right, .carousel-control.left  {background-image:none;}
.carousel-control.right {margin-right:-20px;}
.carousel-control.left {margin-left:-20px;}

.sue img {max-width:120px; padding:5px; border:solid 1px #454545;}


/* BUTTONS
------------------------------------------------------------------------ */
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {outline:0;}


a.btn {text-decoration:none; color:#fff;}
a.btn-default:hover, a.btn-default:visited {text-decoration:none;}

.btn-default {background-color:#f1f1f1; box-shadow:2px 2px 4px #929292; border:solid 1px #818181; padding:4px 8px;}

.btn-clear {background-color:Transparent; border:none; box-shadow:0 0 0 #f1f1f1;}



/* NAV 
	--------------------------------------------------------*/   	
#myNavbar {}	
.navbar {padding:0; margin:0 auto; background-color:#333;}
	
.navbar-right {
    border:none;
    margin:0 auto; 
    padding:0;
    border-radius:0;
}

.navbar-default .navbar-brand, .navbar-inverse .navbar-brand {
	margin:0; padding:0;}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-brand:active,
.navbar-inverse .navbar-brand.active {}

.navbar-brand img {max-height:36px;}
   
.collapse .navbar-collapse {border-color:rgba(255,255,255,.02);}

.navbar-toggle {
    border:solid 2px #ff0;
    background-color:#ccc;
}
                                                                      
.navbar-toggle .icon-bar {border:solid 1px #717171;}

.navbar-fixed-top .navbar-toggle {
	padding:8px 6px; 
	border:solid 1px #545454; 
	border-radius:6px;
    background-color:#c4c4c4;
    color:#006ed0;
}

.navbar-fixed-top .navbar-toggle:hover, .navbar-toggle .icon-bar:hover {background-color:#fff; border:solid 1px #fff;}

.navbar-right .navbar-nav>.active>a:hover,
.navbar-right .navbar-nav>.active>a:focus {
    color:#fff;
    padding:0; 
    margin:0;
    list-style-image:none; 
    list-style-type:none;    
}

.navbar .navbar-right li, .navbar .navbar-right li a:link, .navbar .navbar-right li a:visited {
    outline:0;
    color:#fff;
    padding:0 14px;
    margin:0;
    list-style-image:none;  
    list-style-type:none;
	font-size:14px;
	background-color:#333;
    font-family:sans-serif;
}

.navbar .navbar-right li a:hover, .navbar .navbar-right li a:active {
    outline:0;
    color:#00cdf3;
    padding:0 14px; 
    margin:0;
    list-style-image:none; 
    list-style-type:none;
	font-size:14px;
	background-color:#333;
}

.navbar .navbar-right li ul {min-width:200px; background-color:#545454;}

.navbar .navbar-right li ul.dropdown-menu li {background-color:#545454; border:none; padding:4px 10px; margin:0 auto; border-bottom:solid 1px #818181;}
	.navbar .navbar-right li ul.dropdown-menu li a:link, .navbar .navbar-right li ul.dropdown-menu li:active {color:#fff; background-color:#545454; border:none; padding:4px 10px; margin:0 auto;}
	.navbar .navbar-right li ul.dropdown-menu li a:hover, .navbar .navbar-right li ul.dropdown-menu li:visited {color:#a3f0fe; background-color:#454545; border:none; padding:4px 10px; margin:0 auto;}

.nav .navbar-right li.msg a {background-color:#df0005; border-radius:3px; font-size:13px;}
.nav .navbar-right li.msg a:link, .navbar-inverse .nav li.msg a:visited {color:#fff;}
.nav .navbar-right li.msg a:hover, .navbar-inverse .nav li.msg a:active {color:#fff;}

.navbar .navbar-right li ul li li {border:none;}
.navbar .navbar-right li li a:link, .navbar .navbar-right li li a:visited, 
.navbar .navbar-right li li a:hover, .navbar .navbar-right li li a:active {
	background-color:#545454;
	border:none;
}


.dropdown-menu li a:link,
.dropdown-menu li a:visited {
	padding:0; 
    margin:0;
    color:#fcc;
    border-top:none;
    list-style-image:none; 
    list-style-type:none;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:active {
    padding:0; 
    margin:0;
    color:#9d6a27;
    border-top:none;
    list-style-image:none; 
    list-style-type:none; 
}

.site-selector {margin-right:10px;}



/*	HEADER 
	---------------------------------------------------------------*/
	#header {margin:10px auto; text-align:center;}
	
    .intro {
		margin:30px auto 0 auto;
		text-align:center;
		color:#154f65;
		border:none;
		padding:50px 0 0 0;
		background:url(/images/tech-bg.jpg) no-repeat center center;
		background-size:cover;
		-webkit-background-size:cover;
		-moz-background-size:cover;
		-o-background-size:cover;
	}

	.intro-message {
		/*padding:120px 0 60px 0; margin:0 auto;*/
	}

		.intro-message > h1 {
			margin: 0 auto;
			text-shadow: 2px 2px 1px rgba(255,255,255,0.8);
			font-size: 3em;
			color: deepskyblue;
			padding: 30px 0;
			background: rgba(255, 255, 255, .2);
			filter: alpha(opacity=0.30);
			letter-spacing: normal;
		}
	
	.h1-small {font-size:0.7em;}
	.h1-x-small {font-size:0.64em; font-style:italic; text-shadow:1px 1px 1px rgba(255,255,255,0.8);}

	.intro-message > h3 {
		text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	}
		
		.text-small {font-size:12px}
		

/*	MAIN CONTENT
	--------------------------------------------------------------*/	
	.img-pad img {border:solid 2px #4b4b22;}
	

	

	/* CONTACT 
	---------------------------------------------------------- */



	/* FORMS
	---------------------------------------------------------- */
    fieldset {width:auto; margin:0 auto; text-align:center; padding:10px; font-size:14px; font-weight:400;}
    fieldset table {width:auto}
    fieldset table td {margin:0 auto; padding:4px 0;}
    legend {font-size:15px; font-weight:900; border:none; text-align:left; padding:0 15px; margin:0;}
    input, textarea, select, file, .radio, #recaptcha_response_field {
    	color:#000;
    	max-width:200px; 
    	height:auto; 
    	font-size:14px; 
    	border:solid 1px #818181; 
    	padding:3px 3px; 
    	border-radius:4px; 
    	box-shadow:2px 2px 4px #929292;
    	text-align:left;
    	font-weight:normal;
    }
    
    fieldset .key {text-align:right; color:#000;}
    fieldset .value {text-align:left; color:#000;}
    
    .g-recaptcha {padding:0; margin:0; transform:scale(0.77); -webkit-transform:scale(0.77); transform-origin:0 0; -webkit-transform-origin:0 0;}

	.table-responsive table th {vertical-align:bottom; font-size:20px;}
	
	.submit-form {width:100%; margin:10px auto; padding:20px; text-align:center; background:rgba(214, 206, 189, .4); filter:alpha(opacity=0.40); border-radius:8px; font-size:15px}
		.submit-form td {text-align:left;}
	
	.hold-all {margin:0; padding:5px 0;}
		.hold-inner {}
			.stack-left {margin:0; padding:0; text-align:left; border:none;}
			.stack-right {margin:0; padding:0 0 0 16px; text-align:left; border:none;}
	
	ul.errors li {list-style:none; list-style-image:none; margin:6px 0 6px 30px;}
	.btn-sm {width:auto; box-shadow:0 0 0; border-radius:6px; padding:2px 5px;}
				

	/* FOOTER
	---------------------------------------------------------- */
	.footer {
		margin:0 auto; 
		padding:12px 5px;
		text-align:center;
		background-color:#464646;
		color:#fff;
        font-family:sans-serif;
		font-size:11px;
		font-weight:normal;
		letter-spacing:0.08em;
		line-height:18px;
		border-top:solid 10px #1a1a1a;
	}
	
	.footer a:link, .footer a:visited {color:#faae4a; text-decoration:none}
	.footer a:hover, .footer a:active {color:#d27801; text-decoration:none}


	::-moz-selection {
		text-shadow:none;
		background:#a3f0fe;
	}

	::selection {
		text-shadow:none;
		background:#a3f0fe;
	}

	img::selection {
		background:0 0;
	}

	img::-moz-selection {
		background:0 0;
	}

	body {
		webkit-tap-highlight-color:#a3f0fe;
	}

    #contact {background:#f1f1f1;}
    #contact fieldset {background: #fff;}

    #contact .form-control
	    {
		    background: transparent;
		    border: 1px solid #0350aa;
		    border-radius: 2px;
		    box-shadow: none;
		    color: #016696;
		    margin-top: 5px;
		    margin-bottom: 15px;
            text-align:left;
	    }

    #contact label {font-weight: 500;}
    #contact input {height:44px;}

    #contact blockquote {border-left:solid 8px #fff;}
    #contact p.sue img {border:solid 2px #b2b2b2; padding:8px; background-color:#fff;}



/* MISC CSS
-------------------------------------------------- */

/* Dynamic Image Scaling */
img { max-width:100%; }  


.small {font-size:small;}
.italic {font-style:italic;}

.noBorder {
    border:0px;
}

.boxShadow {
	/* X axis,Y Axis, Blur */
	box-shadow:10px 10px 18px #000;
}

.textShadow {
	/* X axis,Y Axis, Blur */
	text-shadow:10px 10px 18px #fff;
}

.textShadowHalf {
	/* X axis,Y Axis, Blur */
	text-shadow:5px 5px 30px #000;
}

.logo img {
	height:50% \9; /*Force IE10 and below to size SVG images correctly*/
	max-height:50% !important;
}


/* MAIN CONTENT
------------------------------------------------------ */



/*
------------------------------------------------------
RESPONSIVE CSS    

MEDIA QUERIES
-------------------------------------------------- */

		/* Extra Small devices	(phones,			below <767px)    
		/* Small devices		(tablets,			≥768px  to 991px) 
		/* Medium devices		(desktops,			≥992px to 1199px) 
		/* Large devices		(large desktops,	≥1200px and up) 

-------------------------------------------------- */


/* Extra Small devices (phones up to 767px) 
-------------------------------------------------- */ 

 /* -FOUND ABOVE IN MOBILE FIRST CSS */
 


 
/* Small devices (tablets, 768px and up) 
grid (col-sm)
-------------------------------------------------- */
@media (min-width:768px) {
	
	body, p {font-size:16px; line-height:1.4em;}
	
	h1 {}
	h2 {font-size:20px; font-weight:900; line-height:normal;}
	h3 {font-size:18px; font-weight:900; line-height:normal;}
	h4 {font-size:16px;}
	
	input, textarea, select, file, .radio, #recaptcha_response_field {max-width:240px}


/* NAV 
	--------------------------------------------------------*/
	.navbar .navbar-right li, .navbar .navbar-right li a:link, .navbar .navbar-right li a:visited {
        padding:8px 12px 0 12px;
    }

    .navbar .navbar-right li a:hover, .navbar .navbar-right li a:active {
        padding:8px 12px 0 12px; 
    }
	
	.navbar-inverse ul.navbar-nav li {}
	
	.navbar-header {}

	.navbar-brand img {}


/*	HEADER 
	---------------------------------------------------------------*/

	.intro {
		text-align:center;
		color:#154f65;
		border:none;
		padding:40px 0;
		margin:50px auto 0 auto;
		background-size:cover;
		-webkit-background-size:cover;
		-moz-background-size:cover;
		-o-background-size:cover;		
		background-attachment:scroll;
		border:none;
	}

	.intro-message {
		padding:50px 0;
	}

		.intro-message > h1 {
			width: 100%;
			margin: 0 auto;
			text-shadow: 2px 2px 1px rgba(255,255,255,0.8);
			font-size: 2.5em;
			color: deepskyblue;
			padding: 10px 0;
			background: rgba(255, 255, 255, .2);
			filter: alpha(opacity=0.30);
			border-radius: 8px;
			letter-spacing: 1px;
		}
	
	.h1-small {font-size:0.8em;}

	.intro-message > h3 {
		text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	}

    
    
/* MAIN CONTENT
	-------------------------------------------------------*/
    #portfolio {height:740px;}
        #portfolio p {font-size:17px;}
        #portfolio .site {min-height:520px; padding:10px 50px;}
        #portfolio .site p {font-size:16px;} 
        #portfolio .site .photo img {max-width:320px; padding:10px; margin:10px auto;}	


/* FORMS
-----------------------------------------------------------*/
	fieldset table td {font-size:14px;}
	input, textarea, select, file, .radio, #recaptcha_response_field {
		
	}

	fieldset {border:solid 1px #818181;}
}

 /* Medium devices (desktops, 992px and up) 
 grid (col-md)
-------------------------------------------------- */
@media (min-width:992px)   {
	
	body, p {font-size:18px; line-height:1.4em;}
	
	h1 {font-size:24px; font-weight:900; letter-spacing:normal;}
	h2 {font-size:20px; font-weight:900;}
	h3 {font-size:17px; font-weight:900;}
	h4 {font-size:16px; font-weight:900;}
    
    
    /* NAV 
	--------------------------------------------------------*/
	#myNavbar {}

	.navbar-brand img {}
	


/*	HEADER 
	---------------------------------------------------------------*/
	#header {margin:0 auto;}
	.intro {
		text-align:center;
		color:#000;
		padding:34px 0;
		margin:60px auto 0 auto;
		border:none;
	}

	.intro-message {
		padding:50px 0 0 0;
	}

		.intro-message > h1 {
			width: 80%;
			margin: 0 auto;
			text-shadow: 2px 2px 1px rgba(255,255,255,0.8);
			font-size: 4em;
			color: deepskyblue;
			padding: 10px 0;
			background: rgba(255, 255, 255, .2);
			filter: alpha(opacity=0.30);
			border-radius: 0;
			letter-spacing: 1px;
		}

			.intro-message > h2 {font-size:3em;}

			#intro .row {
				padding: 0;
			}
		
		
    /* MAIN CONTENT 
	--------------------------------------------------------*/	
    .search {max-width:350px; float:right}
    
	.img-pad {padding:18px 0 10px 0; margin-bottom:3px;}
	.img-pad img {margin-bottom:5px; border:solid 2px #4b4b22; border-radius:6px; padding:2px; background-color:#fff;}
	
	/* ABOUT 
	---------------------------------------------------------- */
	.about {}


	/* FORMS
	-----------------------------------------------------------*/
	fieldset {font-size:15px; font-weight:600;}
	input, textarea, select, file, .radio, #recaptcha_response_field {font-size:15px; max-width:300px;}
    	
	.text-small {font-size:14px}
	.text-xsm {font-size:13px;}
	
	.hold-all {clear:both; padding:0;}
		.hold-inner {clear:both;}
			.stack-left {float:left; padding:5px 0; text-align:left;}
			.stack-right {float:right; padding:5px 0; text-align:right;}		

}

 /* Large devices (large desktops, ≥1200px and up) 
 grid (col-lg)
-------------------------------------------------- */
@media (min-width:1200px) {

	body {
		font-size: 16px;
		line-height: 1.4em;
	}

	h1 {
		font-size: 3.0em;
		color:deepskyblue;
	}

	h2 {
		font-size: 28px;
	}

	h3, legend {
		font-size: 20px;
	}

	h4 {
		font-size: 16px;
	}

	p {
		line-height: 1.4em;
	}


	/* NAV 
	--------------------------------------------------------*/
	.navbar {
		margin: 0;
		min-height: 60px;
	}

		.navbar .navbar-right li {
			font-size: 14px;
			padding: 5px 8px;
			margin-top: 14px;
		}

			.navbar .navbar-right li ul {
				margin-top: 15px;
			}

			.navbar .navbar-right li.welcome {
				padding-top: 5px;
			}

	.navbar-header {
	}

	a.navbar-brand img {
		margin: 0 0 0 20px;
		max-width: 80px;
	}


	/* HEADER 
	--------------------------------------------------------*/
	.intro-message {
		padding: 50px 0 80px 0;
	}


	/* MAIN CONTENT 
	--------------------------------------------------------*/



	/* DATA and FORMS 
	-------------------------------------------------------- */

	fieldset {
		width: auto;
		padding: 20px 30px;
		margin: 0 auto;
		text-align: center;
		border: solid 1px #006ed0;
		font-size: 15px;
		font-weight: 400;
	}

		fieldset table {
			width: auto;
			padding: 0;
			margin: 0 auto;
			text-align: center;
		}

	legend {
		padding: 0 20px;
		margin: 0;
		border: none;
		color: #006ed0;
	}

	label {
		color: #006ed0;
	}

	fieldset.left td {
		text-align: left;
		font-weight: 400;
		font-size: 15px;
	}

	fieldset table td {
		margin: 0 auto;
		padding: 10px 0;
		font-size: 15px;
	}

	table tr {
		font-size: 15px;
		font-weight: 400;
		margin: 8px 5px;
	}

	table td {
		font-size: 14px;
		padding: 5px;
	}

	.filter table td {
		padding: 12px 5px;
	}


	li {font-size:17px; line-height:2em;}
	input, textarea, select, file, #recaptcha_response_field {width:500px; font-size:15px; font-weight:400;}
	.btn-sized {width:180px;}
		
		input[type=radio]:not(old) {box-shadow:0 0 0 #fff; width:30px; font-weight:normal;}
		input[type=checkbox]:not(old){box-shadow:0 0 0 #fff; width:30px; font-weight:normal;}


	.g-recaptcha {transform:scale(1.0);-webkit-transform:scale(1.0);transform-origin:0 0;-webkit-transform-origin:0 0;}
	
    .sue img {max-width:120px; padding:5px; border:solid 1px #454545;}

    #portfolio {
        height: 580px;
    }
	
    #portfolio .site h3 {color:#0350aa; font-size:22px; text-align:left; margin-top:0;}
    #portfolio .site p {color:#545454; font-size:16px; padding-right:80px;}  

    #portfolio .site {width:100%; min-height:350px; text-align:center; background-color:#f1f1f1; border-radius:6px; padding:20px;}
    #portfolio .site .photo {width:50%;}
    #portfolio .site .copy {width:50%; color:#333;}
    #portfolio .site .copy p {color:#333;}
    #portfolio .site .photo img {max-width:430px; padding:10px; background-color:#fff; margin-top:0;}
}