/*
   Kelley Computing CSS
------------------------------------------------------------------- */

/* Reset stylesheet */
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; 
}


/* General */

h1 {
	font-size:38px;
	font-weight:bold;
	color:#336699;
}

h2 {
	font-size:28px;
}

h3 {
	font-size:26px;
	font-weight:normal;
	color:#FF7F00;
}

h4 {
	font-size:20px;
	color: #336699;
}

h5 {
	font-size:18px;
}

h6 {
	font-size:16px;
	font-weight:normal;
	color: #336699;
}

h7 {
	font-size:12px;
	font-weight:normal;
	color:#000000;
}

p {
	font-size:14px;
	margin:0;
}

a {
	color:#336699;
	text-decoration:none;
}

li {
	font-size:14px;
}

a:visited {
	text-decoration:none;
}

a:hover {
	color:#FF7F00;
	text-decoration:none;
}

body {
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
	width:100%;
	background-color:#EFEFEF;
}

body div {
	overflow:hidden;
}

#content {
	margin:1em auto;
	max-width:960px;
	min-width:310px;
	display:block;
	border:1px solid lightgrey;
	border-radius:7px;
	background-color:white;
}

.header {
	font-family: Helvetica, Arial, sans-serif;
	color:grey;
	background-color:#EFEFEF;
	max-width:960px;
	min-width:310px;
	margin:0 auto;
	padding:0.5em;
}

.header div {
	display:inline-block;
	background-color:#EFEFEF;
}


.header div p {
	float:right;
	display:inline-block;
}

.header img {
	float:right;
	display:inline-block;
	margin:15px 15px;
}

.header h3 {
	display:inline-block;
}


/* Navigation menu */

nav {
	max-width:960px;
	min-width:320px;
	height:36px;
	margin:10px auto;
	display:block;
}

nav ul {
	width:100%;
	height:100%;
	font-size:12px;
	list-style:none;
	margin:0 auto;
	padding:0;
	/*overflow: hidden;*/
}

nav ul li {
	min-height:36px;
	min-width:136px;
	float:left;
	display:table;
}

nav ul li a {
	border:1px solid black;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#EFEFEF;
	display:block;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	background: #7d7e7d;
	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
}

nav ul li a:visited {
	color:#EFEFEF;
}

nav ul li a:hover {
	color:white;
	background: #45484d;
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%);
}

@media (min-width:960px) {
	nav ul {
		display:inline-block;
		visibility:visible;
	}
	
	nav ul li {
		display:table;
		visibility:visible;
	}

	nav ul li:first-child a {
		border-top-left-radius: 7px;
		border-bottom-left-radius: 7px;
	}
	
	nav ul li:last-child a {
		border-top-right-radius: 7px;
		border-bottom-right-radius: 7px;
	}
	
	nav a#menu {
		visibility:hidden;
		display:none;
	}
}


@media (max-width:960px) {

	nav {
		min-height:36px;
		width:100%;
		background: #7d7e7d;
		background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
	}

	nav ul li {
		display:none;
		background: #7d7e7d;
		border:1px solid black;
		width:100%;
	}
	
	nav ul li:hover {
		background:#45484d;
	}
	
	nav ul li a {
		border:none;
		background:none;
		padding:0.5em 1em;
		width:100%;
		height:100%;
		display:block;
		text-align:left;
	}
	
	nav a#menu {
		margin:5px 15px;
		color:white;
		visibility:visible;
		padding:auto 5px;
		float:right;
		size:2em;
		display:block;
	}
	
	nav ul li a:hover {
		color:white;
		background: none;
	}
}


/* Toe */

#toe {
	background-color:#EFEFEF;
	padding:1em 0;
	margin:0 auto;
	max-width:960px;
	min-width:310px;
	margin-top:0.5em;
}

#toe img {
	max-height:29px;
	margin-right:1.5em;
	float:right;
}

/* Footer */

#footer {
	background-color:black;
	color:#EFEFEF;
	max-width:960px;
	min-width:310px;
	margin:0 auto;
}

#footer p {
	text-align:left;
	font-size:10px;
	padding:15px;
	display:inline-block;
	float:left;
}

#footer p:last-child {
	text-align:right;
	font-size:0.5em;
	padding:15px;
	margin-top:10px;
	margin-right:10px;
	display:inline-block;
	float:right;
	vertical-align:bottom;
}

#footer a {
	color:orange;
}

@media (min-width:960px){
	#more {
		margin:0 25px 15px 25px;
	}
}

.more-content {
	margin:1em;
}

#greybox-wrapper {
	margin:0 auto;
	max-width:876px;
	min-width:310px;
}

.greybox {
	float:left;
	margin:0 1.25em 1.25em 1.25em;
	max-width:250px;
	min-height:250px;
	border:1px solid darkgrey;
	border-radius:7px;
}

@media (max-width:960px) {
	.greybox {
		display:block;
		margin:0.5em auto;
		min-width:98%;
		min-height:100%;
	}
}

.greybox h4 {
	color:black;
	padding:10px 15px;
	background: rgb(255,255,255); /* Old browsers */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 47%,rgba(237,237,237,1) 100%);
	border-bottom:1px solid darkgrey;
}

.greybox h6 {
	padding:0px 20px;
	margin:0px 10px;
	margin-top:15px;
}

.greybox p {
	padding:5px 10px;
	margin:10px;
}

#home {
	margin:1em auto;
	width:90%;
}

#type {
	display:inline-block;
	margin:2em 1em;
	padding:0.75em;
	border:1px solid #EFEFEF;
	height:240px;
}

#colors {
	display:inline-block;
	width:auto;
	overflow:hidden;
	float:left;
	margin:2em;
}

#colors div {
	height:150px;
}

#colors div div{
	width:100px;
	height:100px;
	display:inline-block;
	float:left;
	padding:5px;
	margin:5px;
}


#color1 {
	background-color:black;
	color:white;
}

#color2 {
	border:1px solid black;
	background-color:white;
}

#color3 {
	background-color:darkgrey;
	color:white;
}

#color4 {
	background-color:#EFEFEF;
	color:#336699;
}

#color5 {
	background-color:#336699;
	color:#EFEFEF;
}

#color6 {
	background-color:#D8D8BF;
	color:gray;
}

#color7 {
	background-color:#FF7F00;
	color:black;
}

#color8 {
	background-color:grey;
	color:white;
}


/* Sidebar */

#sidebar {
	max-width:180px;
	float:left;
	display:inline-block;
	margin:35px 0 35px 35px;
	border:1px solid black;
	border-radius:7px;
	overflow:hidden;
}

#sidebar h5 {
	width:100%;
	display:inline-block;
	padding:10px;
	padding-left:20px;
	background-color:black;
	color:white;
	font-size:12px;
	background: #7d7e7d;
	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
}

#sidebar div {
	font-size:12px;
}

#sidebar ul {
	list-style:none;
}

#sidebar li{
	font-size:14px;
	margin:15px 25px;
}

#sidebar li:last-child{
	border-bottom:1px solid black;
	padding-bottom:15px;
}

#sidebar p {
	font-size:12px;
	margin:5px 35px;
}

#sidebar p:last-child {
	margin-bottom:15px;
}

#sidebar h6 {
	margin-left:25px;
	font-size:12px;
	color:grey;
}

@media (max-width:960px) {
	#sidebar {
		display:none;
	}
}

/* Alternate Sidebar */

#sidebar-alt-wrapper {
	display:inline-block;
	float:right;
	margin-top:60px;
}

#sidebar-alt-wrapper a {
	display:block;
}

#sidebar-alt-wrapper a img {
	margin:35px;
}

.sidebar-alt {
	max-width:180px;
	display:block;
	margin-top:32px;
	margin-right:35px;
	border:1px solid lightgrey;
	margin-bottom:25px;
	padding:10px;
	background: rgb(255,255,255);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(250,250,250,1) 90%,rgba(239,239,239,1) 100%);
	overflow:hidden;
}

.sidebar-alt h6 {
	font-weight:bold;
	font-size:14px;
	margin:5px 10px 0px 10px;
}

.sidebar-alt p {
	margin:5px 10px 15px 10px;
	font-size:14px;
	font-weight:normal;
	color:black;
}

@media (max-width:960px) {
	#sidebar-alt-wrapper {
		visibility:hidden;
		display:none;
		overflow:hidden;
		width:0px;
		height:0px;
		margin:0px;
		padding:0px;
	}
	#sidebar-alt {
		visibility:hidden;
		display:none;
		overflow:hidden;
		width:0px;
		height:0px;
		margin:0px;
		padding:0px;
	}
}

/* Content */

#main-content {
	clear:both;
	display:block;
	margin:1.5em;
	overflow: hidden;
}

#main-content h6 {
	margin:15px 0;
}

#main-content ul {
	margin:15px 25px;
}

@media (max-width:960px) {
	#main-content ul {
		margin:0;
	}
}

#main-content li {
	margin:5px;
}

#legal {
	font-size:10px;
}

/* Banners */
.banner {
	margin: 35px 70px;
}

.banner img {
	display:block;
	margin:35px auto;
}

@media (max-width:960px) {
	.banner {
		display:none;
	}
}


/* Products */

.product {
	margin: 35px 70px 70px 70px;
}

@media (max-width:960px) {
	.product {
		margin:35px auto;
	}
	
	.product img {
		max-width:80%;
	}
}

.product img {
	display:block;
	margin:1em auto;
}

.product h4 {
	font-size:24px;
	color:black;
}

.product_header {
	display:block;
	text-align:center;
	width:500px;
	margin:auto;
	font-style:italic;
}

.product_header img {
	display:block;
	margin:auto;
}

.product_button {
	display:inline;
	float:left;
	padding:35px 5px;
	margin:15px auto;
	width:90%;
	/*border:1px solid lightgrey;*/
}

.product_button a {
	margin:35px;
}

.product_button_img {
	display:inline-block;
	margin:auto;
	width:250px;
	float:left;
	/*border:1px solid lightgrey;*/
}

.product_button_img img {
	display:block;
	margin:1em auto;
	max-width:80%;
}

.product_button_txt {
	display:inline-block;
	margin:auto;
	margin-left:15px;
	max-width:500px;
	float:left;
	height:100%;
	vertical-align:middle;
	/*border:1px solid lightgrey;*/
}

.product_button_txt_alt {
	display:inline;
	margin:25px auto;
	width:500px;
	float:left;
	vertical-align:middle;
}

.product_button p {
	color:black;
}

.product_button h5 {
	color:black;
}

.products div {
	margin:25px;
}

.products div h5 {
	margin:10px auto;
}

.products div h6 {
	display:inline;
}

.applecare img {
	float:left;
	margin-right:15px;
}

.applecare div {
	margin:15px auto;
}

.drivesavers {
	border:10px solid #C62C1D;
	margin:15px;
	background:#EFEFEF;
}

.drivesavers p {
	margin:15px;
}

.drivesavers h5, .drivesavers h6 {
	color:#C62C1D;
	margin:15px;
}

.drivesavers-banner {
	display:block;
	float:left;
	width:170px;
}

#drivesavers-header {
	background:white;
	border-bottom:1px solid lightgrey;
}

.drivesavers-section {
	border-radius:7px;
	background:white;
	margin:15px 25px;
	padding:25px;
	border-bottom:1px solid lightgrey;
	border-right:1px solid lightgrey;
	border-left:1px solid lightgrey;
}

.drivesavers-section div {
	display:inline-block;
	margin:auto;
	float:left;
}

.drivesavers-section-text {
	width:400px;
	margin-left:35px;
}

#drivesavers-simulator {
	width:550px;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

#drivesavers-footer {
	background:#EFEFEF;
	margin:35px;
}

#drivesavers-footer ul {
	width:40%;
	display:inline-block;
	float:left;
}

#drivesavers-footer ul li {
	margin-bottom:35px;
}

#drivesavers-footer ul li p {
	margin:5px 0;
}

#drivesavers-footer ul li a {
	color:#C62C1D;
	text-decoration:underline;
}

/* Partners */

.partners {
	display:block;
	float:left;
	height:100%;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

.partners img {
	display:inline-block;
	max-width:160px;
	margin: 45px;
	vertical-align:middle;
}


/* Contact */

#contact-content {
	max-width:90%;
	margin:1em auto;
}

#contact-form {
	max-width:80%;
	border:1px solid lightgrey;
	margin:auto;
	padding:1em;
}

#contact-form-container {
	margin:0 auto;
	width: 60%;
	min-width:350px;
}

#contact-mail {
	max-width:80%;
	border:1px solid lightgrey;
	margin:1em auto;
	padding:1em;
}

#contact-mail h5 {
	color:#336699;
	font-size:16px;
	font-weight:normal;
}

#contact-mail h6 {
	margin:10px;
	color:black;
	margin-left:300px;
}

#contact-mail h6:first-child {
	margin-top:25px;
}

#contact-error {
	color:red;
}

div.g-recaptcha {
	width:50%
	margin: 0 auto;
}

@media (min-width:960px) {
	
	#contact-form form {
		margin:15px auto;
		display:block;
		min-width:550px;
	}
	
	#contact-form form label {
		display:inline;
		clear:both;
		display:block;
	}

	#contact-form form input[type="text"] {
		clear:both;
		margin:15px 0px;
	}


	#contact-form form textarea {
		margin:15px 0px;
		resize:none;
		min-width:400px;
		min-height:100px;
		display:block;
	}

	#contact-form form input[type="submit"] {
		margin:15px 0px;
		display:block;
	}

}

@media (max-width:960px) {
	
	#contact-form {
		max-width:90%;
	}
	
	#contact-form form {
		margin:0.5em 0;
		max-width:90%;
	}
	
	#contact-form form label {
		display:block;
	}
	
	#contact-form form label input[type="text"] {
		clear:both;
		margin: 5 0;
	}
	
	#contact-form form label textarea {
		display:block;
		margin: 5 0;
	}
	
	#contact-form form label input[type="submit"] {
		clear:both;
		margin:5px;
		display:block;
	}
	
	#contact-mail {
		max-width:90%;
	}
	
	#contact-mail h6 {
		margin-left:15px;
	}
}


/* Downloads */

.download-wrapper a {
	color:black;
}

.download-box {
	border:1px solid lightgrey;
	border-radius:7px;
	overflow:hidden;
	margin-bottom:1em;
}

.download-box div {
	display:inline-block;
	max-width:75%;
}

.download-box h4 {
	padding:10px;
	text-align:left;
		background: rgb(255,255,255);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 47%,rgba(237,237,237,1) 100%);
	border-bottom:1px solid lightgrey;
	color:grey;
}

.download-box div p {
	margin:5px 25px;
	float:left;
	display:inline-block;
}

.download-box div p:first-child {
	margin:15px 15px 10px 25px;
	float:left;
	display:inline-block;
	color:#336699;
}

.download-box div p:last-child {
	padding-bottom:15px;
}

.download-box img {
	float:right;
	display:inline-block;
	margin:15px 30px;
}


#download-content h5 {
	margin:5px 0;
}

#download-content p {
	margin:5px 0;
}

.download-content-header img {
	display:block;
	margin:35px auto 5px auto;
}

.download-content-header div {
	display:block;
	max-width:35%;
	margin:5px auto;
}

.download-content-header h3 {
	display:inline-block;
	margin:5px;
}

.download-content-header h6 {
	display:inline-block;
	margin:5px;
}

.download-press li {
	list-style:none;
	margin:5px 0;
}

#download-localizations div {
	display:inline-block;
	margin:15px;
	text-align:center;
}

#download-localizations div img {
	width:48px;
	height:48px;
	border:0;
}

.download-localization img {
	display:inline-block;
}

#download-versions div {
	margin:25px;
}

#download-versions ul {
	margin-left:25px;
}

#download-versions h5 {
	display:inline-block;
	margin:5px 35px 5px 0;
}

#download-versions h6 {
	display:inline-block;
	margin:5px 0 5px 35px;
}

#download-thumbnails img {
	height:25%;
	width:25%;
	display:inline-block;
	margin:15px;
	border:1px solid lightgrey;
	cursor:pointer;
}

#download-screenshot{
	height:480px;
	width:320px;
	margin:50px auto;
	display:block;
}


@media (max-width:960px) {

	.download-box:first-child {
		text-align:center;
	}

	.download-box div:last-child {
		display:inline-block;
		max-width:100%;
		text-align:left;
	}
	
	.download-box img {
		display:block;
		margin:10px auto 0 auto;
	}
	
	.download-content-header div {
		max-width:75%;
	}
}

.overlay {
    position:fixed;
    display:none; 

    /* color with alpha channel */
    background-color: rgba(0, 0, 0, 0.7); /* 0.7 = 70% opacity */

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Services */

.services-content {
	margin:15px 0 0 0;
	padding:25px 35px 15px 35px;
	border-top:1px solid lightgrey;
}

.services-content img {
	float:right;
	margin:35px 30px;
}

.services-content ul {
	display:inline-block;
	list-style:none;
	padding:0;
	margin:5px 0;
}

.services-content li {
	padding:5px;
	margin:15px;
}

.services-content p:last-child {
	text-align:center;
	padding:15px 0 5px 0;
	margin:25px 35px 5px 15px;
}

ul.checkmark li:before {
	content:"\2713\0020";
	color:#FF7F00;
	font-size:28px;
}

.services-offered {
	border-top:1px solid lightgrey;
	padding:1.5em 1em;
	margin: 0;
	max-width:900px;
}

.services-offered div {
	margin:0.5em 0;
}

.services-offered img {
	margin:0.5em auto;
	float:left;
}

.services-offered ul {
	display:inline-block;
	list-style:none;
	float:left;
	margin:auto 0;
	width:500px;
}

.services-offered h6 {
	margin:0 0 0.5em 0;
	padding:0;
}

.services-offered li {
	margin:0.25em 0;
}

.services-offered p {
	margin:1em 0;
}

@media (max-width:960px) {
	
	div.services-content {
		padding:15px;
	}
	
	div.services-content img {
		display:none;
	}
	
	.services-offered img {
		display:none;
		height:0;
		width:0;
	}
	
	.services-offered ul {
		max-width:250px;
	}
}

/* About */

#about-content h3 {
	margin-bottom:15px;
}

#about-content div{
	margin:15px 0;
}

#about-content div img {
	margin:25px 35px 10px 35px;
	max-width:100%;
	min-width:10%;
}

#about-content h4 {
	margin:15px;
	font-weight:normal;
}

#about-content h5 {
	margin:15px;
	font-weight:normal;
}

#about-content p {
	margin:15px;
}


/* Documents */
.document-wrapper a div h5 {
	color:black;
}

.document-wrapper a:hover div h5 {
	color:black;
}

.document-wrapper a div div p {
	color:black;
}

.document-wrapper a div div p {
	color:black;
}

.document-wrapper div a {
	display:inline-block;
	margin:15px;
}



.document-box {
	border:1px solid lightgrey;
	border-radius:7px;
	overflow:hidden;
	margin:15px;
}

.document-box div {
	display:inline-block;
	width:90%;
}

.document-box h5 {
	padding:10px;
	text-align:left;
		background: rgb(255,255,255);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(239,239,239,1) 47%,rgba(237,237,237,1) 100%);
	border-bottom:1px solid lightgrey;
}

.document-box div p {
	margin:10px 25px;
	float:left;
	display:inline-block;
}

.document-box img {
	float:right;
	display:inline-block;
	margin:15px 30px;
}

.document-box p {
	margin:10px 25px;
	float:left;
	display:inline-block;
}

.document-wrapper h6 {
	margin:35px 25px;
	float:left;
	display:inline-block;
	font-size:12px;
}

.document-wrapper div a {
	display:block;
	font-size:12px;
}

/* Support */

.support p {
	margin:10px 0px;
}

.support {
	margin:25px 15px;
}

.support img {
	margin: 10px 0px;
}

/* Banners */

.horizontal_banner {
	width:760px;
	margin-top:25px;
	margin-bottom:25px;
	margin-left:auto;
	margin-right:auto;
}

.vertical_banner {
	width:180px;
	margin:25px;
}


/* Policy */
.policy p {
	margin: 10px 15px;
}

.policy h5 {
	margin: 20px 15px;
}

.policy ol {
	list-style-type: decimal;
}

.policy ul,ol {
	margin: 20px 35px;
}

/* SlideJS styling */
	
#slides {
	display: none;
	margin-bottom:20px;
}

.slidesjs-navigation {
	margin-top:3px;
}

.slidesjs-previous {
	display:none;
}

.slidesjs-next {
	display:none;
}

.slidesjs-pagination {
	margin: 6px 0 0;
	float: right;
	list-style: none;
}

.slidesjs-pagination li {
	float: left;
	margin: 0 1px;
}

.slidesjs-pagination li a {
	display: block;
	width: 13px;
	height: 0;
	padding-top: 13px;
	background-image: url(/static/images/pagination.png);
	background-position: 0 0;
	float: left;
	overflow: hidden;
}

.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
	background-position: 0 -13px
}

.slidesjs-pagination li a:hover {
	background-position: 0 -26px
}


/* Prevent the slideshow from flashing on load */
#slides {
	display: none
}

/* Center the slideshow */
.container {
	margin: 0 auto;
	max-width: 800px;
}

/* TeamViewer download page */
#tv-content {
	background-image: url(/static/images/map2.png);
	min-height:416px;
}
#tv-download {
	margin:120px 60px;
	font-size:18px;
}

#tv-linkCaption {
	margin-top:60px;
	font-size:12px;
}