﻿@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700); 

/* Reset all web browser defaults HTML Elements to fit inside the window */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;	/* Keep all HTML Elements inside the page */
}

/* ---------------------------
	General Styles
   --------------------------- */

html {
	-webkit-font-smoothing: antialiased;
	/*text-rendering: optimizelegibility;*/
}

/* Added on 08-08-2020 */
body {
	background: #E1E3E4;
	padding: 2%;	/* All around space from the edge of web browser */
	font-family: 'Josefin Sans', sans-serif;
	font-size: 22px;
	color: #FAFAFA;	/* Off White color */
	line-height: 26px;
	text-align: justify;	/* make text nicer with left and right equal in spaces */
}

header {
	padding: 2%;	/* Move the text logo down */
	height: 125px;	/* Control the height of the header box */
	font-family: "Josefin Sans", sans-serif;
	font-size: 24px;
	color:#4B70A0;
	text-align: center;
	/* Added CSS3 color gradient background for Scientific Data Systems, Inc. header */
	background: #E1E3E4; /* Added for old browsers that do not support CSS3 color gradients */ 
    background: -webkit-linear-gradient(#E1E3E4, #D3EAF2, #E8F0F1); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#E1E3E4, #D3EAF2, #E8F0F1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#E1E3E4, #D3EAF2, #E8F0F1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#E1E3E4, #D3EAF2, #E8F0F1); /* Standard syntax (must be last) */
}

/* Customize for SDS logo Large Text = Scientific Data Systems, Inc. */
.sds-logo-ltext {
	font-family: "Josefin Sans", sans-serif;
	font-size: 38px;
	font-weight: 700;
	color:#1EA3FF;
	text-align:center;
}
/* Customize for SDS logo Small Text = Warrior Data Acquisition Systems */
.sds-logo-stext {
	font-family: "Josefin Sans", sans-serif;
	font-size: 22px;
	font-weight: 400;
	color:#4B70A0;
	text-align:center;
}
	

/* SDS Full width picture. May also be used as a picture slider in the future */
.banner {
	width: 100%;
}

/* make the banner horizontal lenght euqal to the length of nav links and always fit inside a window */
.banner img {
	width: 100% !important;	/* Make the image banner line up horizontal with Navigation links */
	height: auto;
	padding: .5% 0;	/* gap space .5% top-bottom, 0 gap left-righ */
}

/* 08-20-2020 borrowed from SDS-Products.css 100% width column */
.fullwdith {
	float: left;
	width: 100%;	/* % of section + % of aside must not be over 98% */
	/*padding: 2%; /* Original. The vertical space between the main content under heading h2 and the sidebar */
	padding: 0;
	margin: 1% 0;
	background-color: #DAEBF4; /* #E8F0F1; #6B6B6B;*/
	color: #000;
}

/* Left column Warrior Data Acquisition Software Description */
section {
	float: left;
	width: 65%;	/* % of section + % of aside must not be over 98% */
	/*padding: 2%; /* Original. The vertical space between the main content under heading h2 and the sidebar */
	padding: 0;
	margin: 1% 0;
	background-color: #E8F0F1;/*#6B6B6B;*/
	color: #000;
}

/* Right column Latest News, SDS Telemetry System, Warrior Cased Open Logging Systems */
aside {
	float: right;
	width: 33%;	/* % of section + % of aside must not be over 98% */
	/*padding: 2%; Original*/
	padding: 0;
	/*margin: 1% 0; Original*/
	margin: 1% 0;	/* 1% = Top-Bottom space, 0 = Left-Right space*/
	background-color: #DFE8EB;/* #C0C0C0; #6B6B6B = dark gray */;
}

/* ---------------------------
	Navigation
   --------------------------- */
										/* Begin of SDS Dropdown Menu */
 ul {
 	list-style: none;
 	padding: 0px; 
 	margin: 0px;
}
  
  ul li {
  	display: block;position: relative;
  	float: left;
  	border:none
}
  li ul {
  	display: none;
}
  
  ul li a {
  	display: block;
  	background: #00477D; /* background: #4B70A0 = original background of NAV links. New 12-04-2015  = #67B6C8*/
  	padding: 5px 10px 5px 10px; 
  	text-decoration: none; 
    white-space: nowrap;
    color: #fff;	/* Original white color = #fff */
}	
  
  ul li a:hover {
  	background: #4B70A0;	/* #EBEBEB */
}	
  
  li:hover ul {
  	display: block; 
  	position: absolute;
}
  
  li:hover li {
  	float: none;
}
  
  li:hover a {
  	background: #47678F;	/* When user moves the mouse over */
}	
  
  li:hover li a:hover {
  	background: #0090bf;	/* Light Blue when user select */
}	
  
#drop-nav li ul li {
	border-top: 0px;
}
  											/* End of SDS Dropdown Menu */

/* Control the border, font thickness of Dropdown Menu Navigation Links */ 
nav ul {
	margin: 0;
	padding: 0;
	float: left;
	font-family: "Josefin Sans", Helvetica, Arial, sans-serif;	/* added 08-12-2020*/
	font-weight: 400;
}

nav ul li {
	list-style: none;
	float: left;
}

nav ul li a {
	display: block;
	color: #fff;
	text-decoration: none;
	/*font-weight: bold; */
	padding: 7px;	/* Control the thickness of Navigation links font */
	border-left: solid 1px #FDD017; /* make divider thickness between links */	
}

nav ul li a:hover {
	/*background: #1E4059;*/
	background: #47678F;	/* Hover the main link */
}

/* For different web browsers compability */
nav ul li a:active {
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
	   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
	        box-shadow: 0 0 5px rgba(0, 0, 0, 0.8) inset;
}
/* End of Navigation Links */

/* Aside SDS News Backgroud */
.SDSNewsBackground {
	background:  #D3EAF2;
	float: right;
	width: 33%;
	color: #333333;
	padding: 0;
	/*margin: 1% 0; Original*/
	margin: 1% 0;	/* 1% = Top-Bottom space, 0 = Left-Right space*/
	font-size: 12px;
	line-height: 18px;
	/* Added CSS3 gradient background 02-23-2016 */
	background: #E8F0F1; /* For browsers that do not support CSS3 gradients */ 
    background: -webkit-linear-gradient(#E8F0F1, #D3EAF2, #E8F0F1); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#E8F0F1, #D3EAF2, #E8F0F1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#E8F0F1, #D3EAF2, #E8F0F1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#E8F0F1, #D3EAF2, #E8F0F1); /* Standard syntax (must be last) */
}

/* Customize for SDS News Headline */

/* Added on 08-10-2020 for Kevin's new Warrior Repair Utility */
/*
.sdsheadline {
    margin: 0 auto;
    font-size: 18px;
    color: white ;
    font-family: Arial, Helvetica, sans-serif;
    margin: 10px 0;	
    width: 100%;    /* Added on 08-10-2020 
    /* width: 760px; Removed on 08-10-2020 
    background-color: #FF0000;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
}
*/


.sdsnewstitle {
	font-family: "Josefin Sans", sans-serif;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
	/*width : 100%;*/
	color: white;
	margin: 0;
	background-color: #4B70A0;
	text-align:center;
}

/* Customize for SDS Product Titles */
.sdsproducttitle {
	font-family: "Josefin Sans", sans-serif;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
	/*width : 100%;*/
	color: white;
	margin: 0;
	background-color: #4B70A0;
	text-align:center;	
}

/* Customize for SDS Product Titles Fancy */
.sdsproducttitlefancy {
	font-family: "Josefin Sans", sans-serif;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
	/*width : 100%;*/
	color: white;
	margin: 0;
	background-color: #1EA3FF;/*#4B70A0;*/
	text-align:center;
    border-top-left-radius: 15px; /* Added 08-10-2020 */
	border-top-right-radius: 15px;
	/*border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px; // Removed on 08-10-2020 */
    
}

.newsdate {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: #0086B2; /*#4B70A0;*/	
	font-family: Arial, Helvetica, sans-serif;
	margin: 1px 0;
}

/* Use for small text to describe picture description */
.sds-small-text {
	font-size: 10px;
	line-height: 10px;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
}	

p{
	text-indent: 3%;	/* indent 5 space for every new paragraph using tag <p> */
	/* Added 03-29-2016 */
	font-size: 16px;
	color: #000000; /* Original = #00477D;	 */
	font-weight: 400;
	/*font-family: Arial, Helvetica, sans-serif; * Original b4 using google font josefin san */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 22px;
}

/* Make text a little different than the rest of the page */ 
.news {
	font-size: 16px;
	font-weight: 600;
	/*font-family: Arial, Helvetica, sans-serif; * Original b4 using google font josefin san */
	font-family: 'Josefin Sans', sans-serif;
	line-height: 22px;
	padding: 4px;	/* Virtical space between colum four and colum four last */
	margin: 4px;	/* Space for Top-Bottom, Left-right between paragraph */
} 

/* Make text a little different than the rest of the page p.intro */ 
.intro {
	font-size: 16px;
	font-weight: 400;
	/*font-family: Arial, Helvetica, sans-serif; * Original b4 using google font josefin san */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 22px;
	padding: 4px;	/* Virtical space between colum four and colum four last */
	margin: 4px;	/* Space for Top-Bottom, Left-right between paragraph */
} 

/* text description for SDS Products */ 
.sdsproduct {
	font-size: 15px;
	font-weight: 400;
	/*font-family: Arial, Helvetica, sans-serif; * Original b4 using google font josefin san */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: black;
	line-height: 20px;
	padding: 3px 6px;	/* Virtical space between colum */
	margin: 4px;	/* Space for Top-Bottom, Left-right between paragraph */
} 

h2{
	text-align: center;
	line-height: 125%;	/* 25% bigger the the text defined in the body of 22px */
}


/* Customize for SDS Product Description Title */
.sds-title-long {
	font-family: "Josefin Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 35px;
	width : 100%;
	color: white;
	margin-top: -10px;	/* Make it line up with the brief product description headline */
	/*font-family: Arial, Helvetica, sans-serif;*/
	text-align:center;
	margin-left: 0px; /* make the headline line up with the background */
	margin-right: 0px;
	background-color: #4B70A0;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
								/* CSS3 Code for SDS Homepage index.html file ended HERE */
								
/* ------------------------------------------------------------------------------------------------------
						Code for CSS3 responsible for all other SDS html pages started HERE
   ------------------------------------------------------------------------------------------------------ */
  
/* A class for Top Left Column used in SDS Products, included the Warrior 8 Data Acquisition Software page */
.TopLeftColumn {
	float: left;
	width: 45%;	/* % of section + % of aside must not be over 98% */
	/*padding: 2%; /* Original. The vertical space between the main content under heading h2 and the sidebar */
	padding: 1%;
	margin: 1% 0;
	background-color: #007DB8; /*#003966 #E8F0F1 #6B6B6B;*/
	color: #fff;
}

/* A class for Top Right Column used in SDS Products, included the Warrior 8 Data Acquisition Software page */
.TopRightColumn {
	float: right;
	width: 45%;	/* % of section + % of aside must not be over 98% */
	/*padding: 2%; Original*/
	padding: 0;
	/*margin: 1% 0; Original*/
	margin: 1% 0;	/* 1% = Top-Bottom space, 0 = Left-Right space*/
	background-color: #003966;/* #DFE8EB; #C0C0C0; #6B6B6B = dark gray */;
}


/* ---------------------------
	Buttons
   --------------------------- */

.btn {
	width: auto;
	background: #0090bf;
	border: 1px solid #1e728c;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	
	/* IE7 inline-block fix */
	zoom: 1;
	*display: inline;
	
	margin: 0;
	outline: none;
	padding: 10px 20px 11px;
	position: relative;
	text-align: center;
	text-decoration: none;
	
	/* Fancy box shadows */
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	
	/* CSS3 transitions */
	-webkit-transition: background-color 0.15s ease-in-out;
	   -moz-transition: background-color 0.15s ease-in-out;
	     -o-transition: background-color 0.15s ease-in-out;
	        transition: background-color 0.15s ease-in-out; 
}

.btn:hover {
	/*color: #fff;*/
	color: yellow;
	background-color: #0086b2;
}

.btn:active {
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
	   -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
	        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
	color: #fff;
}

.btn-large {
	padding: 8px 15px;	/* 8px = height of the button. 15px = width of the button */
	font-size: 16px;
	font-weight: 100;
	border-top-right-radius: 20px;	/* Added 08-12-2020 */
	border-bottom-right-radius: 20px;
}


.btn-secondary {
	font-size: 20px;
}

.btn-small {
	padding: 4px 12px;	/* 8px = height of the button. 15px = width of the button */
	font-size: 12px;
	font-weight: 100;
	border-top-right-radius: 20px;	
	border-bottom-right-radius: 20px;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active {
	background: none;
	border: none;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
}

.btn-secondary:hover {
	text-decoration: underline;
}

.btn-secondary:active {
	position: relative;
	top: 1px;
}


footer {
	font-family: "Josefin Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
	float: left;
	width: 100%;
	/*padding: 2%; Orginal = 2% . Control the footer box height*/
	padding: 1%;
	margin: 1% 0;
	background-color: #6B6B6B;
	text-align:center;	/* Added 08-12-2020 */
}

/* Remove all underline links, change color, when links are visited */
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}


/* ---------------------------------
	Overflow, Elements Wrapping
	Fixes for various web browsers
   --------------------------------- */
  
 /* Prevent elements wrap around each other when normal flow top to bottom is altered to float to the right */
.container:before,
.container:after {
  content: "";
  display: table;
}
.container:after {
  clear: both;
}

/* section */
.section:before,
.section:after {
  content: "";
  display: table;
}
.section:after {
  clear: both;
}

/* aside */
.aside:before,
.aside:after {
  content: "";
  display: table;
}
.aside:after {
  clear: both;
}

/*This code section is used to contain float to prevent division conent wrap around another */
.clearfix:before,	/* dynamically generated element above and below */ 
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1; /* For old web browers IE6/7 (trigger has Layout)*/ 
} 


										/* RWD Media Queries Starts Here */

	/* for Ipad screen resolution */
@media only screen and (max-width: 780px) {
	
	section {
		width: 100%;
	}
	
	aside {
		width: 100%;	/* SDS News Cased/Open, Telemetry will folllow to the bottom of Software intro section */
	}
    
     
	footer {
		width: 100%;	/* Footer will folllow to the bottom of SDS News, Cased hole, Telemetry */
	}
	
	/* Added 03-09-2016 to make SDS News background dynamically shrinked according to the user screen resolution */
	.SDSNewsBackground {
		width: 100%;
	}
	
	h2 {
		font-size: 105%;
	}
	
	p {
		font-size: 95%;
	}
}

	/* for Iphone 5 screen resolution */
@media only screen and (max-width: 580px) {
	
	h2 {
		font-size: 95%;
	}
	
	p {
		font-size: 88%;
	}
    
}

/* RWD Media Queries Ends Here */


 /* 
Added 08-12-2020 for Responsive images resize on high resolution devices 
img {
    max-width: 100%;  Resize image no mor or less than the originial image resolution 
}
*/
												
