/*Css Reset*/
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, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 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;
    font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-image: url(../Images/hypertech_bg.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: black;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Css Reset*/

#Header{
	margin:0 0 0 0;
}

.fullHeader{
	width:100%; height:125px; z-index:10; position:relative; font-family:Arial;
}

.menulogoWrapper{
	height:88px; width:1000px; margin:auto;
}

.logoHeader {
    width: 400px; height:82px; float: left; background-image: url(../Images/Hypertech_logo.png); background-repeat:no-repeat; margin-top:5px;
}

.menuHeader{
	width:600px; margin-top:35px; height:30px; float:right;
}
.contentContainer{
	width:1000px; margin:auto; background: rgb(256, 256, 256); background: rgba(256, 256, 256, .5); border-radius: 5px; z-index:5; padding-top:25px; padding-bottom:10px; margin-top:10px; overflow:hidden;
}

.ContainerWrapper{
	width:950px; margin:auto;
}

.newsContainer{
	border-bottom: 1px solid #CCC;  height:165px; margin-bottom:10px;
}
.newsImage{
	float:left; padding-right:10px;
}


/* Year Make Model Engine styling */
.dropdownAccent{
	width:100%; height:2px; background-color:white;
}

.dropdownColor{
	width:100%; height:35px; background:rgb(66, 66, 66); background:rgba(66, 66, 66, .7); box-shadow: 0px 5px 5px;
}
/*Red color of Dropdown Wrapper if connected to Dev Web Reference*/
.dropdownColorRed {
    width: 100%;
    height: 35px;
    background: rgb(256, 66, 66);
    background: rgba(256, 66, 66, .5);
    box-shadow: 0px 5px 5px;
    background-image: url(../Images/DevServer.png);    
    background-repeat:repeat;
}

.dropdownWrapper{
	width:890px; margin:auto; text-align:center;
}
.dropdown 
{ 
    background: #afafaf; 
    border: 1px solid #333333; 
    border-radius: 2px;
    padding-left: 5px;          
    color:#444444;
    outline: none; 
    height:23px; 
    width: 175px;
    margin-top:6px; 
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;    
    font-size:14px;
    font-weight:700;
}
.gobutton{height:21px; margin-top:7px; outline:none; float:right;}
/* Year Make Model Engine end */

/* Main Menu styling */
nav{ float:right;}
nav a { color:white; display: block; text-decoration: none; font-weight:700; font-size:18px; line-height:35px; padding:0 20px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; }
nav ul li a:hover { color:#CCCCCC }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }
nav ul ul li:hover { background: rgba(256, 256, 256, .5); }
nav ul ul li a:hover { color:#444444 }
nav ul ul a{ font-size:14px;}
nav > ul { }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }

.sub-menu-parent { position: relative;}

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  line-height:120%;
  top: 100%;
  left: 0;
  width: 190px;
  background: rgba(84, 84, 84, .8);
  border:1px #999999 solid; 
  border-radius: 5px;
  transform: translateY(-0.5em);
  z-index: 150;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: 150;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
/* Main Menu End */

/* General Buttons styling */
.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 10px 20px;
    border: 0px solid #000000;
    border-radius: 2px;
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#808080));
    background: -moz-linear-gradient(top, #808080, #808080);
    background: linear-gradient(to bottom, #808080, #808080);
    -webkit-box-shadow: #6b6b6b 0px 2px 10px 0px;
    -moz-box-shadow: #6b6b6b 0px 2px 10px 0px;
    box-shadow: #6b6b6b 0px 2px 10px 0px;
    text-shadow: #161b2b 1px 1px 1px;
    font: normal normal bold 16px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover {
    background: #4d4d4d;
    background: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#808080));
    background: -moz-linear-gradient(top, #4d4d4d, #808080);
    background: linear-gradient(to bottom, #4d4d4d, #808080);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #9a9a9a;
    background: -webkit-gradient(linear, left top, left bottom, from(#9a9a9a), to(#9a9a9a));
    background: -moz-linear-gradient(top, #9a9a9a, #9a9a9a);
    background: linear-gradient(to bottom, #9a9a9a, #9a9a9a);
}
/* General Buttons end */

/*General Red Buttons*/
.button_red {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 10px 20px;
    margin-right: 5px;
    border: 0px solid #000000;
    border-radius: 2px;
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#EE272A), to(#EE272A));
    background: -moz-linear-gradient(top, #EE272A, #EE272A);
    background: linear-gradient(to bottom, #EE272A, #EE272A);
    -webkit-box-shadow: #6b6b6b 0px 2px 10px 0px;
    -moz-box-shadow: #6b6b6b 0px 2px 10px 0px;
    box-shadow: #6b6b6b 0px 2px 10px 0px;
    text-shadow: #161b2b 1px 1px 1px;
    font: normal normal bold 16px arial;
    color: #ffffff;
    text-decoration: none;
}
.button_red:hover {
    background: #4d4d4d;
    background: -webkit-gradient(linear, left top, left bottom, from(#85181A), to(#EE272A));
    background: -moz-linear-gradient(top, #85181A, #EE272A);
    background: linear-gradient(to bottom, #85181A, #EE272A);
    color: #ffffff;
    text-decoration: none;
}
.button_red:active {
    background: #9a9a9a;
    background: -webkit-gradient(linear, left top, left bottom, from(#EE272A), to(#F57779));
    background: -moz-linear-gradient(top, #EE272A, #F57779);
    background: linear-gradient(to bottom, #EE272A, #F57779);
}

/* General red Buttons end */

/* Accordion Styling */
.accordion {
    width: 920px;
    margin: 10px auto;    
}
.accordion label {
	text-shadow: #161b2b 1px 1px 1px;
    font: normal normal bold 14px arial;
    color: #ffffff;
    padding: 5px 20px;
    position: relative;
    display: block;
    height: 30px;
    cursor: pointer;    
    line-height: 33px;          
    border: 1px solid #CCC;
    background: #4d4d4d;    
}
.accordion label:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#808080));
    background: -moz-linear-gradient(top, #4d4d4d, #808080);
    background: linear-gradient(to bottom, #4d4d4d, #808080);
}
.accordion input + label {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
    background: -webkit-linear-gradient(top left, #424242 0%, #808080 100%);
    background: -moz-linear-gradient(top left, #424242 0%, #808080 100%);
    background: linear-gradient(to bottom right, #424242 0%, #808080 100%);    
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
    display: none;
}
.accordion .article {
    background: rgb(255, 255, 255);
    overflow: hidden;
    height: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);    
}
.accordion .article p {    
    color: #777;
    line-height: 18px;
    font-size: 14px;
    padding:20px;        
}
.accordion input:checked ~ .article {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;     
}
.accordion input:checked ~ .article.ac-line {
    height: 65px;    
}
.accordion input:checked ~ .article.ac-small {
    height: 100px;    
}
.accordion input:checked ~ .article.ac-medium {
    height: 150px;
}
.accordion input:checked ~ .article.ac-large {
    height: 230px;
}
/* Accordion end */
.textbox {
    background: white;
    border: 2px solid #7d7d7d;
    border-radius: 5px;
    color: #666;
    outline: none;
    height: 23px;
    width: 200px;
}

.textbox:disabled {
    background: #e1e4e6;
}


/* Popup Styling */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  padding: 20px;
  background: rgb(256, 256, 256); 
  background: rgba(256, 256, 256, .85);
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 1s ease-in-out;
  z-index:200;
}

.popup h1 {
   text-decoration:underline;
}
.popup a {
   font-size:10pt;
   line-height:18px;
   text-decoration:none;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #FF2B00;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
/* Popup Styling */

/* Tooltip styling */
[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    color:GrayText;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #424242;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
	min-width: 350px;
    text-align: left;
    border-radius: 4px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 100%;
    margin-top: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    left: 50%;
    margin-left: -6px;
    top: 100%;
    border-width: 0 7px 7px;
    border-bottom-color: #424242;
}

/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}
/* Tooltip end */