@charset "utf-8";
/* CSS Document */

body, html {padding:0px; margin:0px; background: #585858; font-family:Arial, Helvetica, sans-serif; height:100%; font-size: 12px; line-height: normal; }

.left {float:left;}
.right {float:right}
.clear {clear:both;}

h1 {color: #006699; font-weight: bold; font-size: 22px;  padding: 0px; margin: 0px 0px 10px 0px;}
h2 {color: #006699; font-weight: bold; font-size: 18px;  padding: 0px; margin: 0px 0px 10px 0px;}
h3 {color: #006699; font-weight: bold; font-size: 14px;  padding: 0px; margin: 0px 0px 10px 0px;}

p {color: #000000; font-weight: normal; margin: 5px 0px 10px 0px; }

ul {list-style-type:square; margin: 0px 0px 5px 15px;} 
ul li { line-height:16px;}

#tabs{width: 262px; height:182px; display:block; float: right; margin: 0px 28px 0px 0px; clear:both;}
#red-tab{background: url(../images/red-tab.jpg) top left no-repeat; height:152px; width:103px; display:block; float:left; padding : 20px 10px 10px 10px;}
#red-tab b, #red-tab strong{color:#FFFFFF; font-size:14px; font-weight:bold;}
#red-tab p {color:#FFFFFF;}
#red-tab a.red-btn {margin: 28px 0px 0px 0px; color: #FFFFFF; font-size:14px; font-weight:bold; text-decoration:none; display: block; height: 33px; width: 103px; background: url(../images/red-btn.jpg) top left #FF0000; text-align:center; padding: 5px 0px 0px 0px;} 

#blue-tab{background: url(../images/blue-tab.jpg) top left no-repeat; height:152px; width:103px; display:block; float:right;  padding : 20px 10px 10px 10px;}
#blue-tab-inner { padding-bottom: 15px; } 
#blue-tab b, #blue-tab strong{color:#FFFFFF; font-size:14px; font-weight:bold;}
#blue-tab p {color:#FFFFFF; padding-bottom: 15px;}
#blue-tab a.blue-btn {margin: 28px 0px 0px 0px; color: #FFFFFF; font-size:14px; font-weight:bold; text-decoration:none; display: block; height: 33px; width: 103px; background: url(../images/blue-btn.jpg) top left #FF0000; text-align:center; padding: 5px 0px 0px 0px;} 

#header{background: #000000; height: 100px; width:auto;}
#headercontainer {width: 748px; height: 100px; margin: 0px auto; padding: 0px 0px 0px 0px;} 
#logo {background: url(../images/logo.jpg) 0px 22px no-repeat; height:100px; width:398px; display:block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}

#content{background: url(../images/content-grad.jpg) top left repeat-x #FFFFFF; height: auto; width: auto;}
#contentcontainer {width: 748px; height: auto; margin: 0px auto; padding: 0px 0px 0px 0px;} 

#menu {display: block; height: 100px ; width: 440px;}

#contentback{width: 748px; height: 226px; margin: 0px auto; background: url(../images/pagecontent-back.jpg) bottom right no-repeat; padding: 0px 0px 0px 0px;}
#contentback-noblue{width: 748px; height: 226px; margin: 0px auto; background: url(../images/pagecontent-back-noblue.jpg) bottom right no-repeat; padding: 0px 0px 0px 0px;}

#footer{background: url(../images/footer-grad.jpg) top left repeat-x #666666; height: auto; width:auto;}
#footercontainer {width: 748px; height: 360px; margin: 0px auto; }
#footerleft {float:left; display:block; width: 400px; height:auto;}
#footerright {float:right; display:block; width: 151px; height:auto; margin: 25px 50px 0px 0px;}
#footer-pointer {height: 22px; width:59px; display:block; background: url(../images/footer-pointer.jpg) top left no-repeat;}
#footer-content p {color: #FFFFFF;  margin: 5px 0px 10px 0px; line-height:16px;}
#footer a {color: #FFFFFF;  font-weight:bold; text-decoration:none;}

#menu-pointer-p1 {height: 22px; width:59px; display:block; background: url(../images/menu-pointer.jpg) top left no-repeat; margin: 0px 0px 0px 15px;}
#menu-pointer-p2 {height: 22px; width:59px; display:block; background: url(../images/menu-pointer.jpg) top left no-repeat; margin: 0px 0px 0px 115px;}
#menu-pointer-p3 {height: 22px; width:59px; display:block; background: url(../images/menu-pointer.jpg) top left no-repeat; margin: 0px 0px 0px 230px;}
#menu-pointer-p4 {height: 22px; width:59px; display:block; background: url(../images/menu-pointer.jpg) top left no-repeat; margin: 0px 0px 0px 325px;}

#menu-biglinks ul {margin: 0px; list-style-type:none; padding: 0px;}
#menu-biglinks ul li {float: left; margin: 0px 20px 0px 0px; padding: 0px;}
#menu-biglinks ul li a {color: #000000; font-weight: bold;  font-size:16px; text-decoration:none;}
#menu-biglinks ul li a:hover {color: #006699;}
#menu-biglinks ul li a.selected {color: #006699;}

#menu-smalllinks ul {margin: 5px 0px 0px 0px; list-style-type:none; padding: 0px;}
#menu-smalllinks ul li {float: left; margin: 0px 20px 0px 0px; padding: 0px;}
#menu-smalllinks ul li a {color: #000000;  font-size:10px; text-decoration:none; text-transform:uppercase;}
#menu-smalllinks ul li a:hover, #menu-smalllinks ul li a.selected {color: #006699;}

#page-container{background: url(../images/content-bg.jpg) top left repeat-y #FFFFFF; margin: 0px 0px 0px 0px !important;}
#pagecontent {width: 440px; height: auto; float:left; margin: 0px 0px 0px 0px;}

#pagepanel {display:block; float:right; width: 242px; height: auto; margin: 0px 28px 0px 0px; padding: 10px 10px 10px 10px;}
#pagepanel ul {margin: 0px; list-style-type:none; padding: 0px;}
#pagepanel ul li {margin: 0px 20px 0px 0px; padding: 0px;  font-weight:bold;}
#pagepanel ul li a {display: block;  width: 232px; color: #000000; font-weight: bold;  text-decoration:none; padding: 4px;}
#pagepanel ul li a:hover {color: #006699; background-color:#FFFFFF;}
#pagepanel ul li a.selected {color: #000000; background-color:#FFFFFF;}

#paneltitle {display: block; color:#FFFFFF; background-color:#000000; height: 15px; width: auto; font-weight:bold; padding: 5px; margin: 0px 0px 0px 0px;}

#page-prompt {background:url(../images/pointertab.jpg) top left no-repeat; height:20px; width: 420px; display:block; padding: 10px; color:#FFFFFF;}
#page-prompt h1 {color: #000; font-weight: bold; font-size: 16px;  padding: 0px; margin: 0px 0px 10px 0px;}
#page-prompt .pseudoh1 {color: #000; font-weight: bold; font-size: 16px;  padding: 0px; margin: 0px 0px 10px 0px;}


#contact-prompt {background:url(../images/contact-prompt.jpg) top left no-repeat; height:61px; width: 420px; display:block; padding: 10px; color:#FFFFFF;}
#contact-prompt h1 {color: #FFFFFF; font-weight: bold; font-size: 22px;  padding: 0; margin: 0;}
#contact-prompt p {color: #FFFFFF; font-weight: normal;   margin: 5px 0px 10px 0px; line-height:16px;}

#contact-prompt-lower {background:url(../images/contact-prompt-lower.jpg) top left no-repeat; height:85px; width: 420px; display:block; padding: 30px 10px 10px 10px; color:#FFFFFF; margin: 20px 0px 0px 0px;}
#contact-prompt-lower h1 {color: #FFFFFF; font-weight: bold; font-size: 22px;  padding: 0px; margin: 0px 0px 10px 0px;}
#contact-prompt-lower .pseudoh1 {color: #FFFFFF; font-weight: bold; font-size: 22px;  padding: 0px; margin: 0px 0px 10px 0px;}
#contact-prompt-lower p {color: #FFFFFF; font-weight: normal;   margin: 5px 0px 10px 0px; line-height:16px;}
#contact-prompt-lower a {color:#FFFFFF;}

.formSpacer {padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px;}
.formLeft {width: 100px; float:left; }
.formRight {width: 330px; float:right; }
.formInput {
	width: 260px;
	height: 20px;
	padding: 0px 5px;
	background-color: #ECF1F2;
	color: #006699;
	border: 1px solid #73938f;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
select { width: 272px; height: 20px padding: 0px 5px; background-color: #ECF1F2; color: #006699; border: 1px solid #73938f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
textarea { width: 260px; padding: 0px 5px; background-color: #ECF1F2; color: #006699; border: 1px solid #73938f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.lighttestimonial {height: 144px; width: 400px; margin: 0px 0px 10px 0px; background: url(../images/testimonials.jpg) top left no-repeat; padding: 20px;}
.darktestimonial {height: 144px; width: 400px; margin: 0px 0px 10px 0px;  background: url(../images/darktestimonials.jpg) top left no-repeat; padding: 20px;}

#promotion {background: url(../images/brailleback.jpg) top left no-repeat #CCC; height: 142px; width: 300px; padding: 15px 10px 10px 130px; margin: 10px 0px 0px 0px;}

.cta_button_blue {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5.5px 11px;
   -webkit-border-radius: 26px;
   -moz-border-radius: 26px;
   border-radius: 26px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 15px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   margin:0 auto;display:block;text-align:center;
   }
.cta_button_blue:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.cta_button_blue:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
   
/* MEDIA QUERIES
-------------------------------------------------- */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
	

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

.brailbox {
   border-radius: 25px;
   background-image: linear-gradient(#CECECE, #9A9A9A);
   padding: 20px;
   height: auto;
   margin-top:15px;
   margin-bottom: 15px;
 }

 .brailimg {
   width: auto;
   height: 190px;
   position: relative;
   display: inline-block;
   overflow: hidden;
   margin: 0;
 }