@import"../css/reset.css";
@import"../css/skeleton_v1.1.css";
@import"../css/superfish.css";
@import"../css/slider.css";
@import"../css/forms.css";

.atp1 { font-family:Arial; font-weight: bold; color: #801323; }  /* This styles "App" */
.atp2 { font-family:Arial; font-weight: bold; }  /* This styles "Pro / Technologies */
body{background:#222222;font:15px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#2e2e2e;position:relative;min-width:320px;}
html,body{height:100%;}
p{padding-bottom:20px}
a{color:#2281ef;outline:none;cursor:pointer;text-decoration:none;}
a:hover{text-decoration: underline}

/*  Header styles */
h1,h2,h3,h4,h5,h6 { line-height:1.2em; font-family:'Noto Sans',sans-serif; font-weight:bold; padding-bottom:5px; }
h1{font-size:29px; color:#801323; line-height:1.4em; padding-bottom:0px;}  /* Line height change needed, otherwise bottoms of letters were cut off */
h2{font-size:25px; color:#801323;}
h3{font-size:21px; color:#000063;}
h4{font-size:19px; color:#000063;}
h5{font-size:17px; color:#000063;}
h6{font-size:15px; color:#656565;}

/* Global Structure---------------------------------------- */
.bg{ width:100%; background:url(../images/body.png) 50% 0 repeat; }

/*----- txt,links,lines,titles -----*/
.clear{clear:both;line-height:0;font-size:0;overflow:hidden;height:0;width:100%;}
.wrapper{width:100%;overflow:hidden;position:relative;}
.extra-wrap{overflow:hidden;display:block;}
.fleft{float:left}
.fright{float:right}
.alignright{text-align:right}
.aligncenter{text-align:center}
.alignmiddle *{vertical-align:middle}
.color1{color:#2281ef;}
.color2{color:#fff;}

/*********************************Header*************************************/
header{position:relative;z-index:99; width:100%; background:url(../images/header.png) 50% 0 repeat-x; padding:12px 0 0 0;}
header h1{ float:left; padding-bottom:13px;}
  header h1 a{ display:block; max-width:290px;}
  header h1 a img{ max-width:100%; height:auto;}
.tooltips{ position:relative; overflow:hidden; float:right; }
  .tooltips li{ float:left; padding:5px 0 0 0 }
  .tooltips li.tooltip-text{ color:#6d6d6d; font-size:16px; line-height:22px; }

/********************** Content ************************/
section#content{overflow:hidden; position:relative; z-index:1; width:100%;}
aside{position:relative; z-index:1; width:100%; background:url(../images/aside.png) 50% 0 repeat-x #2d2d2d; padding:0 0 31px; border-bottom:11px solid #232323;}
.title1{ font-size:81px; line-height:105px; color:#2e2e2e; padding:35px 0 0 0;}

.list1 li{ background:url(../images/marker.png) 0 8px no-repeat; padding:0 0 8px 22px;}
  .list1 li a{ color:#2e2e2e;}

.list2{padding:5px 0 10px 0; box-shadow:1px 1px 1px rgba(0,0,0,.4); border-radius:4px;
  background: #2281ef;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2281ef), to(#142b71));
  background: -webkit-linear-gradient(#2281ef, #142b71);
  background: -moz-linear-gradient(#2281ef, #142b71);
  background: -ms-linear-gradient(#2281ef, #142b71);
  background: -o-linear-gradient(#2281ef, #142b71);
  background: linear-gradient(#2281ef, #142b71);
  -pie-background: linear-gradient(#2281ef, #142b71);}
  .list2 li a{ display:block; font-size:16px; line-height:1.2em; color:#fff; padding:8px 0px 8px 20px;}
  .list2 li a:hover{ background:url(../images/list-hover.png) 0 0 repeat-x #1d1d1d;}

.list3 li{ background:url(../images/marker_nopad.png) 0 8px no-repeat; padding:0 0 8px 10px;}
  .list3 li a{color:#2281ef;outline:none;cursor:pointer;text-decoration:none;}
  .list3 li a:hover{text-decoration: underline}

.col1{ width:280px; float:left;}
.quotes{ position:relative; background:#f3f3f3; border:1px solid #e8e8e8; border-radius:3px; padding:12px 0 15px 18px; margin:6px 0 10px 0;}
  .quotes blockquote{ font-size:16px; line-height:24px; color:#656565;}
  .quotes span{ display:block; background:url(../images/quotes2.png) 0 0 no-repeat; width:18px; height:10px; position:absolute;bottom:-10px; left:41px;}
.quotes-links{ padding:11px 0 0 0;}
.text2{ line-height:24px; padding-bottom:9px;}

.map{ padding:6px 0 0 0; float:left;}
  .map iframe{ width:615px; height:328px;border:1px solid #e8e8e8;}

/* Elastislide Style */
.es-carousel-wrapper{padding:1px 10px 0;position:relative; margin:5px 0 0 0; z-index:99}
.es-carousel{overflow:hidden;}
.es-carousel ul{display:none;}
.es-carousel ul li{height:100%;float:left;display:block;}
.es-carousel ul li a{ margin-top:14px; display:inline-block;}
.es-carousel ul li span{ display:block;}
.es-carousel ul li img{display:block;border:none;max-height:100%;max-width:100%;}
.es-nav span.es-nav-next,.es-nav span.es-nav-prev{ display:block !important; position:absolute; top:-49px; line-height:0; font-size:0; width:17px; text-indent:-5000px; height:27px; z-index:99; cursor:pointer; background-position:0 0;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.es-nav span.es-nav-next{right:11px; background-image:url(../images/button-next2.png);}
.es-nav span.es-nav-prev{right:40px; background-image:url(../images/button-prev2.png);}
.es-nav span:hover{opacity:.5}
/* Tabs */
.tabs{ padding:65px 0 55px 0px;}

.rskbtn {
  text-decoration:none;
  color:#ffffff;
  padding:8px 18px 10px;
  text-align:center;
  font-size:14px;
  margin-right:10px;
  margin-bottom:10px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:1px 1px 1px rgba(0,0,0,.2);
  display:inline-block;
  background: #2281ef;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2281ef), to(#142b71));
  background: -webkit-linear-gradient(#2281ef, #142b71);
  background: -moz-linear-gradient(#2281ef, #142b71);
  background: -ms-linear-gradient(#2281ef, #142b71);
  background: -o-linear-gradient(#2281ef, #142b71);
  background: linear-gradient(#2281ef, #142b71);
  -pie-background: linear-gradient(#2281ef, #142b71);
}
.rskbtn:hover {
  text-decoration:none;
  background: #248aff;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#248aff), to(#183385));
  background: -webkit-linear-gradient(#248aff, #183385);
  background: -moz-linear-gradient(#248aff, #183385);
  background: -ms-linear-gradient(#248aff, #183385);
  background: -o-linear-gradient(#248aff, #183385);
  background: linear-gradient(#248aff, #183385);
  -pie-background: linear-gradient(#248aff, #183385);
}
.rskbtn:active {
  position:relative;
  top:1px;
}

.demobtn {
  text-decoration:none;
  color:#ffffff;
  padding:8px 18px 10px;
  text-align:center;
  font-size:14px;
  margin-right:10px;
  margin-bottom:10px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:1px 1px 1px rgba(0,0,0,.2);
  display:inline-block;
  background: #36648b;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#36648b), to(#36648b));
  background: -webkit-linear-gradient(#36648b, #36648b);
  background: -moz-linear-gradient(#36648b, #36648b);
  background: -ms-linear-gradient(#36648b, #36648b);
  background: -o-linear-gradient(#36648b, #36648b);
  background: linear-gradient(#36648b, #36648b);
  -pie-background: linear-gradient(#36648b, #36648b);
}
.demobtn:hover {
  text-decoration:none;
  background: #4ca1af;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4ca1af), to(#36648b));
  background: -webkit-linear-gradient(#4ca1af, #36648b);
  background: -moz-linear-gradient(#4ca1af, #36648b);
  background: -ms-linear-gradient(#4ca1af, #36648b);
  background: -o-linear-gradient(#4ca1af, #36648b);
  background: linear-gradient(#4ca1af, #36648b);
  -pie-background: linear-gradient(#4ca1af, #36648b);
}
.demobtn:active {
  position:relative;
  top:1px;
}

.tab-links{ position:relative;}
  .tab-content img{ margin:9px 0 0 0;}
  .tab-content .grid_4 img{ max-width:100%; height:auto;}
  .tab-content .text2{ width:270px; padding-top:3px;}
  .tab-links span{ display:block; float:left; position:relative;}
  .tab-links span.space3{ margin-right:10px;}
  .tab-links a{font-size:14px; line-height:1.2em; color:#fff; display:inline-block;background:#18bbff; border-radius:5px; width:50px; box-shadow:1px 1px 1px rgba(0,0,0,.2); text-align:center;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2281ef), to(#142b71));
    background: -webkit-linear-gradient(#2281ef, #142b71);
    background: -moz-linear-gradient(#2281ef, #142b71);
    background: -ms-linear-gradient(#2281ef, #142b71);
    background: -o-linear-gradient(#2281ef, #142b71);
    background: linear-gradient(#2281ef, #142b71);
    -pie-background: linear-gradient(#2281ef, #142b71);}
  .tab-links a:hover{background: #454545;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#454545), to(#1d1d1d));
  background: -webkit-linear-gradient(#454545, #1d1d1d);
  background: -moz-linear-gradient(#454545, #1d1d1d);
  background: -ms-linear-gradient(#454545, #1d1d1d);
  background: -o-linear-gradient(#454545, #1d1d1d);
  background: linear-gradient(#454545, #1d1d1d);
  -pie-background: linear-gradient(#454545, #1d1d1d);}
  .tab-links a.date{padding:5px 0 7px 0;}
  .tab-links a.date span{ display:block; margin:0; float:none;}
  .tab-links a.comments{padding:7px 0 7px 0; min-height:32px;}
  .tab-links a.comments span{ display:block; margin:-2px 0 0 0; float:none;}
  .tab-links a.comments img{ margin:0 0 0 4px;}

/*  Buttons */
.button{display:inline-block;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease; border-bottom:1px dotted #949494; text-decoration:none;}
  .button:hover{ color:#000;border-bottom:1px dotted #000; text-decoration:none;}

.rskfldset {
  border:2px solid; 
  border-color:#000063; 
  -webkit-border-radius:8px; 
  -moz-border-radius:8px; 
  border-radius:8px; 
  padding-top:8px; 
  padding-right:8px; 
  padding-bottom:0px; 
  padding-left:8px;
}

/******************** Footer ******************/
footer{ padding:19px 0 32px;color:#939393; width:100%; border-bottom:3px solid #18bbff; font-size:12px;}
footer.padfooter{padding:30px 0 27px;}
/* padding */
.padtop3{ padding-top:0px;}
.padtop52{ padding-top:24px;}
.padtop5{ padding-top:31px;}
.padtop6{ padding-top:40px;}
.padtop62{ padding-top:42px;}
.padtop22{ padding-top:55px;}
.padtop2{ padding-top:58px;}
.padtop4{ padding-top:60px;}
.padtop42{ padding-top:61px;}
.padtop{ padding-top:66px;}
.padbot{ padding-bottom:24px !important;}
.padbot4{ padding-bottom:17px;}
.padbot6{ padding-bottom:20px;}
.padbot3{ padding-bottom:12px;}
.padbot2{ padding-bottom:11px;}
.pad{ padding:12px 0 0 0;}
.pad2{ padding:17px 0;}
.indent{ margin-top:-1px;}
.z1{ position:relative; z-index:2}
.z2{ position:relative; z-index:3;}
.imgindent{ float:left; margin-right:17px; margin-left:-1px}
.imgindent2{ margin:6px 20px 0 0;}
.imgindent3{ margin:6px 0px 14px 0; max-width:100%; height:auto;}
.padcontent3{ padding-bottom:42px;}
.padcontent2{ padding-bottom:62px;}
.padcontent{ padding-bottom:64px;}
.marg{ margin-right:-5px;}

/*==========================================*/

/* This is for the tablet size */
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .title1{ font-size:64px;text-align:center;}
  .pad{ padding:0px 0 0 0;}
  .col1{ width:240px;float:left;}
  .tab-content .text2{ width:170px;}
  .map iframe{ width:480px;}
  .es-carousel ul li{ margin-right:45px !important;}
  .es-carousel-wrapper{padding:1px 25px 0;}
  .leftimg { width: 235px; }
}

/* This is for the narrow phone size, but also carries over to the wide phone beneath unless overridden there. */
@media only screen and (max-width: 767px) {
  .title1{ font-size:30px;line-height:38px; padding-top:18px; text-align:center;}
  .padtop{ padding-top:50px;}
  .tooltips li.tooltip-text{ display:none;}
  .es-carousel ul li a,.es-carousel ul li span{ display:none;}
  .col1{ width:300px;float:left;}
  .imgindent2{ margin:6px 0px 20px 0; width:300px;}
  .imgindent3{ width:300px;}
  .tab-content .text2{ width:190px;}
  .tab-content .grid_4 img{ width:300px; margin-bottom:20px;}
  .tabs{ padding-bottom:10px;}
  .map iframe{ width:298px; }
  .leftimg { width: 235px; }
  #leftimgdiv { text-align:center; }
  header { background:none; }
  header h1 { float:none; text-align:center; }
  header h1 a { display:inline-block; }
}

/* This is for the wide phone size */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .col1{ width:205px;float:left;}
  .space{ margin-right:10px;}
  .space2{ margin-right:20px;}
  .imgindent2{ margin:6px 10px 0px 0; width:220px;}
  .padbot0{ padding-bottom:0;}
  .imgindent3{ width:420px;}
  .tab-content .grid_4 img{ width:420px;}
  .tab-content .text2{ width:310px;}
  .col2{ width:200px; float:left;}
  .map iframe{ width:400px;}
}