/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/
	
/*  Styles written as /*-css3- {style} !-css3-/* are css3 and/or vendor specific and thus reside in css3.css for validation reasons. */


/*	Resets
	------	*/
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
	p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
	img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
	dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figure, figcaption, hgroup, 
	menu, footer, header, nav, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		}
	article, aside, canvas, figure, figure img, figcaption, hgroup,
	footer, header, nav, section, audio, video {
		display: block;
		}
	a img {border: 0;}
	
	.floatright {float:right;}



/*	Typography presets
	------------------	*/	
body {
	font: 100%  Helvetica, Arial, sans-serif;
	color:#222;
	}

	h1, h2, h3, h4 {
		margin-bottom:20px;
		}
	
	h1 {font:bold 1.15em Arial, sans-serif; line-height:1.3em; color:#777;}
	h2 {font-size:1em; font-weight:bold; color:#1F69B0;}
	h3 {font-size:0.9em; font-weight:bold; line-height:1.2em; color:#444;}
	h4 {
		padding:1px 0 2px 9px;
		color:#fff;
		font:0.8em Helvetica, Arial, sans-serif;		
		font-weight:500;
		background:#1f69b0;
		background:url(../img/blue_carbonfiber.png) repeat /*#245e95*/ #1f69b0;
		}
		.mission {margin-bottom:20px; font:bold 1em Helvetica, Arial, sans-serif; line-height:1.3em;  color:#1F69B0;}
		.mission span {display:block; font-style:italic;}
		
		
	p,li {font:.85em Helvetica, Arial, sans-serif;  color:#444; line-height:1.4em;}
	p {margin-bottom:1.2em;}}
	p a {padding:0px 3px 2px 3px;}
	p.noteworthy {font-size:0.95em;}
	
	.small, small {
		font-size: 13px;
		line-height: 18px;
		}
	
	span.important {color:#777; font-size:0.9em; line-height:1.4em;}
	.bluelight {color:#3686cd;}
	.bluedark {color:#1f69b0;}
	

	a, a:visited {color:#1C71C4;}
	a:hover, a:focus {color:#1C5A93; background:#ddd;}
	a:active {color:#fff; background:#1C5A93; text-decoration:none;}
	
	a.tel, a.tel:visited {display:inline-block; font-size:1.3em; color:#1f69b0; text-decoration:none;}
	a.tel:hover, a.tel:focus {color:#1C5A93;}
	a.tel:active {color:#fff; background:#1C5A93; text-decoration:none;}
	
	
	div.sbi a {padding:1px 0 2px 0;}
	
	img {
		max-width: 100%;
		vertical-align: middle;
		border: 0;
		}
		
		img.hr {margin:10px 0 20px;}
	


/* Selection colours (easy to forget) */
/*-css3-
::selection 	 	{background: #000);}
::-moz-selection 	{background: #000;}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body 				{ -webkit-tap-highlight-color: #000; }
!-css3-*/

.bold {font-weight:bold;}
.clear {clear:both;}


/*	List presets
	------------------	*/
	
	ul {
		margin:5px 0 20px 10px;
		padding:0;
		list-style:disc;
		}
		
		ul li {
			margin:0 0 2px 6px;
			padding:0;
			}
			ul li h3 {display:inline;}
			ul li span {color:#777;}
			ul li strong {color:#555;}
                
		
		div.half { 
			display:inline-block; 
			width:48%;
			vertical-align:top;
			}
		
		
		ul.contact-list {
			margin-bottom:20px;
			list-style:none;
			}			
				ul.contact-list li {
					display:block;
					margin-bottom:15px;
					color:#777;
					font:0.7em Arial, Helvetica, sans-serif;
					text-transform:uppercase;
					}
					ul.contact-list li.divider {
						width:190px;
						margin-bottom:10px;
						padding-bottom:20px;
						border-bottom:1px dotted #999;
						}
					ul.contact-list li span,
					ul.contact-list li a {
						display:block;
						margin-top:0;
						color:#1f69b0;
						font-size:1.2em;
						text-transform:none;
						text-decoration:none;
						}
					ul.contact-list .large {
						margin-bottom:15px;
						font-size:1.6em;
						}
						
						li.primary {margin-bottom:30px;}
		
		

/*  Input styling
	-------------------  */
	
	label {display:inline; font-size:0.8em; color:#999;}
	input[type="email"],
	input[type="text"] {
		height:15px;
		max-width:570px;
		border:1px solid #999;
		margin: 2px 0 2px 0;
		color:#666;
	}
	input[type="text"][title] { /* Used for fieldhints.js placeholders */
		font-size:0.8em;
		color:#999;
	}
	textarea {
		width:100%;
		min-height:80px;
		border:1px solid #999;
		color:#666;
	}
	textarea[title] { /* Used for fieldhints.js placeholders */
		font:0.8em Helvetica, Arial, sans-serif;
		color:#999;
		padding:3px;
	}
	button {
		color:#fff;
		background:#0070b5;
		border:1px solid #015385;
		padding:4px 25px;
		margin:5px 0;
		cursor:pointer;
		/*-css3-
			border-radius:3px;
		!-css3-*/
		}
		button:hover {background:#007eca;}
		button:active {background:#005a92;}
	


/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

html {
	background-color: #efefef;
	background:url(../img/bg_pixels.jpg);
	margin: 0;
	padding: 0;
    font-size: 100%;
	line-height: 1.5em;
	height: 101%; /* Scrollbars always visible, gets rid of the "jump" when the services menu opens */
	}
	body {
		width:992px;
		margin: 0 auto;
		/*padding: 72px 48px 84px;*/
		/*-css3-
			-webkit-text-size-adjust: 100%; Stops Mobile Safari from auto-adjusting font-sizes
		!-css3-*/
		}
		
		header, 
		#content {
			margin-bottom:20px;
			background:#fff;
			border:1px solid #bbb;
			/*-css3-
				-webkit-box-shadow: 0 1px 5px #ccc;
				-moz-box-shadow: 0 1px 5px #ccc;
				box-shadow: 0 0px 5px #ccc;
			!-css3-*/
			}
					
	/* Header */	
		header {
			position:relative;
			min-height:100px;
			padding:5px 5px;
			border-bottom:none;
			/*-css3-
				background-image: -webkit-gradient(radial, 100% 0%, 0, 100% 0%, 227, color-stop(0%, #f2f2f2), color-stop(100%, #CCCCCC));
				background-image: -webkit-radial-gradient(right top, farthest-side, #f2f2f2 0%, #CCCCCC 100%);
				background-image: -moz-radial-gradient(right top, farthest-side, #f2f2f2 0%, #CCCCCC 100%);
				background-image: -ms-radial-gradient(right top, farthest-side, #f2f2f2 0%, #CCCCCC 100%);
				background-image: -o-radial-gradient(right top, farthest-side, #f2f2f2 0%, #CCCCCC 100%);
				background-image: radial-gradient(farthest-side at right top, #f2f2f2 0%, #CCCCCC 100%);
			!-css3-*/
			}
			
			.logo {
				float:right;
				margin:15px 9px;
				}
				h1.logo a:hover,
				h1.logo a:focus,
				h1.logo a:active {background:none;}
			
			ul.headerinfo {
				position:absolute; top:5px; left:3px;
				margin:5px 0;
				list-style-type:none;
				color:#1f69b0;
				}
				ul.headerinfo li {
					display:inline;
					padding:0 5px;
					font-size:0.8em;
					font-weight:200;
					}
				ul.headerinfo li a {
					text-decoration:none;
					color:#3686cd;
					}
					ul.headerinfo li a:hover {text-decoration:underline;}


			ul.headersocial {
				float:left;
				margin:25px 0 0 12px;
				padding-top:5px;
				list-style-type:none;
				}
				ul.headersocial li {
					display:inline;
					margin:0 5px 0 0;
					}
					ul.headersocial li a {					
						display:inline-block;
						width:30px; height:30px;
						}
						ul.headersocial li a.fb {background:url('../img/social-sprite.png') no-repeat; background-position:0 0; }
							ul.headersocial li a.fb:hover,
							ul.headersocial li a.fb:focus {background-position:0 -31px; }
						
						ul.headersocial li a.tw {background:url('../img/social-sprite.png') no-repeat; background-position:-31px 0; }
							ul.headersocial li a.tw:hover,
							ul.headersocial li a.tw:focus {background-position:-31px -31px; }
						
						
						/*	ul.headersocial li a.fb:hover,
							ul.headersocial li a.fb:focus,
							ul.headersocial li a.tw:hover,
							ul.headersocial li a.tw:focus {opacity:0.6;} */



		/*	SOCIAL HEADER CSS
			=========================
			ul.headersocial {
				float:left;
				margin:25px 0 0 12px;
				padding-top:5px;
				list-style-type:none;
				}
				ul.headersocial li {
					display:inline;
					margin:0 3px 0 0;
					}
					ul.headersocial li a {					
						display:inline-block;
						width:20px; height:20px;
						margin-top:2px;
						}
						ul.headersocial li a.fb {background:url('../img/fb.png') no-repeat; }
						ul.headersocial li a.tw {background:url('../img/tw.png') no-repeat; }
						ul.headersocial li a.fb:hover {background:url('../img/fb_hover.png') no-repeat; }
						ul.headersocial li a.tw:hover {background:url('../img/tw_hover.png') no-repeat; }
		*/

					
			nav {
				margin:-20px 0 0 0;
				font-size:0.9em;
				background:url(../img/blue_carbonfiber.png) repeat #1f69b0;
				/*-css3-
					border-radius:0 0 3px 3px;
				!-css3-*/
				}
				nav a, nav a:visited {color:#eee; text-decoration:none;}
				nav a:hover, nav a:focus {color:#fff; text-decoration:none;}
					
				nav > ul {
					position:relative;
					width:100%;
					margin:-30px 0 0 0;
					padding:10px 0;
					list-style:none;
					}
					nav ul li {display:inline-block; margin:0;}
						nav ul li a {display:block; margin-bottom:-10px; padding:12px 20px 12px; color:#eee;}
							nav ul li a:hover,
							nav ul li a:focus{color:#fff; background:#025e98; background:rgba(0,0,0,0.2);}
							nav ul li a:active {background:#005082; background:rgba(0,0,0,0.3);}
							nav ul li a.selected {background:#005082; background:rgba(0,0,0,0.3);}
						nav ul #contact {float:right; margin:0;}
				
				/* Dropdown Styling */
				#services-children {margin:0; width:100%; font-size:1.1em; padding-bottom:10px; border-radius:0 0 3px 3px;}
					#services-children ul {display:inline-block; width:20%; margin:0 5% 10px 20px; vertical-align:top;}
						#services-children ul li {display:block; width:100%;}
							#services-children ul li a {width:100%; margin:0;}
							#services-children ul li.title {padding:13px 40px 5px 0; margin-bottom:5px; border-bottom:1px solid #003f65; font-size:0.9em; color:#002a43;}
								#services-children ul li.title:hover {background:none;}
					
									

			
		
	/* Main Content */	

		#wrapper {
			float:left;
			position:relative;
			overflow:inherit;
			z-index:100;
			}
			/* Central area */	
				#content {
					float:left;
					position:relative;
					width:570px; 
					min-height:200px;
					margin:20px 10px 0 200px;
					padding:270px 10px 10px 10px;
					/*-css3-
						border-bottom-left-radius:5px;
						border-bottom-right-radius:5px;
						-moz-border-radius-bottomleft:5px;
						-moz-border-radius-bottomright:5px;
						-webkit-border-bottom-left-radius:5px;
						-webkit-border-bottom-right-radius:5px;
					!-css3-*/
					}

					section.content-sec {margin-bottom:2em;}

					#slider, img.header-img {
						position:absolute; top:0; left:0;
						margin:0;
						background:#dadada;
						}
						.nivo-controlNav {margin-bottom:-10px;} /* Hompage slider buttons */
						.slider-wrapper {margin-bottom:15px;}
						#slider a:hover, #slider a:focus {background:none;}				
					#content.no-header-img {
						padding:10px;
						/*-css3-
							border-radius:5px;
							-moz-border-radius:5px;
							-webkit-border-radius:5px;
						!-css3-*/
						}
					#content ul {color:#000;}


			/* Service boxes */
				
				.flex-container {
					display: flex;
					gap:10px;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
					align-items: stretch;
					align-content: stretch;
					}

				#srv-container {margin-top:1.5em; padding:0; border:none!important;}

					#srv-container h3 {
						position:relative;
						margin:-6px; padding:4px 7px 4px;
						text-wrap:wrap;
						font-weight:400; font-size:0.85em; color:#fff;
						background:#666;
						z-index:100;
						}
						#srv-container a {text-decoration:none;}
						#srv-container a h3 {
							background:rgb(24 77 127);
							background:rgb(11 68 121);
							background:rgb(67 67 67);
							background:#666;
						transition: opacity .75s ease-in;
							}
							#srv-container a:hover h3, #srv-container a:focus h3 {
							    background:#0070b5; background:#1f69b0; background:#333;
							    transition: background .5s ease-out;
							    }


					.srv-box {
						width:32%;
						min-height:140px;
						margin:0px; padding:6px;
						background:#aaa;
						border:1px solid #fff;

							display: block;
							flex-grow: 0;
							flex-shrink: 1;
							flex-basis: auto;
							align-self: auto;
							order: 0;
							box-sizing: border-box;
							
						opacity:.75;
						transition: opacity .75s ease-in;
						}
						.srv-box:hover, .srv-box:focus {
						    opacity:1;
						    transition: opacity .35s ease-out;
						    }

						.srv-box:nth-child(1),
						.srv-box:nth-child(2),
						.srv-box:nth-child(3),
						.srv-box:nth-child(4),
						.srv-box:nth-child(5),
						.srv-box:nth-child(6) {position:relative;}


			/* Managed IT */#srv-box-managed-it,
							.srv-box:nth-child(1) {
							    background:url('../img/srv-itsupport.jpeg') center; background-size:cover;
							    /*background:url('../img/kbd.jpeg') -2px 8px; background-size:cover;*/
							}
			/* Repairs */	#srv-box-repairs,
							.srv-box:nth-child(2) {
							    background:url('../img/black-mobo.jpg') -40px 34px; background-size:cover;
							    background:url('../img/repairs-black.jpeg') -8px 20px; background-size:cover;
						    }
			/* 365 */		#srv-box-365,
							.srv-box:nth-child(3) {background:url('../img/srv-m365-copilot.jpeg') -33px 9px; background-size:cover;}

			/* Backup */	#srv-box-backup::before,
							.srv-box:nth-child(4)::before {
								background:url('../img/hdd-blue.jpg') center;
							    /*opacity:0.5;*/

							    content:"";
							    position:absolute;
							    top:0; right:0; bottom:0; left:0;
							    background:
							    	linear-gradient(rgba(255,255,255,0.1), 
							    	rgba(255,255,255,0.1)), 
							    	url('../img/hdd-blue.jpg') center no-repeat;
							    	
							    background:    	
					    		    linear-gradient(rgba(255,255,255,0.1), 
                                    rgba(255,255,255,0.1)), 
                                    url('../img/hdd-led.jpeg') -27px 1px no-repeat;

							    background-size:cover;
								}

			/* Consult */	#srv-box-consult,
							.srv-box:nth-child(5) {background: url('../img/consult2.jpg') center 20px; background-size:cover;}
			
			/* Networks */ 	#srv-box-networks,
							.srv-box:nth-child(6) {background:url('../img/cabling-white.jpg') -95px -28px;}

						.srv-box h3, .srv-box p {}




		/* Sidebar areas */

			#leftbar, #rightbar {
				position:relative;
				min-height:450px;
				width:180px;
				margin-top:15px;
				/*-css3-
					border-radius:5px;
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
				!-css3-*/
				}
			
			#leftbar {position:absolute;}		
			#rightbar {float:right;}
			
			.sidebar div.sbi, /* sbi = SideBar Item */
			.sidebar article {
				display:block;
				width:auto;
				margin:0 0 20px 0;
				padding:0 5px 5px 5px;
				background:#fff;
				border:1px solid #aaa;
				border-top-width:0px;
				border-top-color:transparent;
				}
			.sidebar div.sbi:first-child,
			.sidebar article:first-child {margin-top:5px;}	
				
			.sidebar h4 {
				width:170px;
				margin:20px -1px 10px -5px;
				padding:6px 0 6px 9px;
				}
				.sidebar h4 .icon {
					margin:-4px 5px 0 -3px;
				}
			.sidebar p,
			.sidebar li {
				font:0.8em Helvetica, sans-serif;
				line-height:1.3em;
				color:rgb(119, 119, 119);
				}
			.sidebar p {
				margin-bottom:10px;
				padding:0px 5px;
				}
			.sidebar input {
				width:140px;
				margin-left:5px;
				}
			
			#mailing-list {
				width:150px;
				text-align:right;
				}
				
				
				/*
				==============================================================================
				Original Sidebar CSS. Uncomment and comment out the same styles above.
				#Content width should be changed to 550px. (May need some extra tweaking too)
				==============================================================================
				
				.sidebar {
					margin-bottom:20px;
					background:#fff;
					border:1px solid #bbb;
					-webkit-box-shadow: 0 1px 5px #ccc;
					-moz-box-shadow: 0 1px 5px #ccc;
					box-shadow: 0 0px 5px #ccc;
				}
				#leftbar, #rightbar {
					position:relative;
					min-height:450px;
					width:180px;
					padding:7px;
					box-shadow:0 0 1px 1px #AEAEAE;
					-moz-box-shadow:0 0 1px 1px #AEAEAE;
					-webkit-box-shadow:0 0 1px 1px #AEAEAE;
					border-radius:5px;
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
				}
			
				#leftbar {position:absolute;}		
				#rightbar {float:right;}
				
				.sidebar div.sbi,
				.sidebar article {
					display:block;
					width:auto;
					margin:0 0 20px 0;
					padding:0 5px 5px 5px;
					background: url(../img/bg_sb.jp) no-repeat bottom #eee;
					border:1px solid #aaa;
					}
				.sidebar div.sbi:first-child,
				.sidebar article:first-child {margin-top:5px;}	
					
				.sidebar h4 {
					width:170px;
					margin:-1px -1px 10px -6px;
					padding:1px 0 3px 10px;
					}
				.sidebar p {
					margin-bottom:10px;
					padding:0px 5px;
					font:0.8em Helvetica, sans-serif;
					color:rgb(119, 119, 119);
					}
				.sidebar input {
					width:140px;
					margin-left:5px;
					}
				*/
					
				/* Sidebar > Mailing List */
				#mc_embed_signup{margin-bottom:10px;}
		

		/* Tables */
			table td {vertical-align:top;}
			.upgrades-table {margin-bottom:10px; border-spacing:0; border-collapse:collapse;}
			.upgrades-table td {border-bottom:1px solid #1f69b0;}
			.upgrades-table td.noborder {border:none;}
			.upgrades-table td.titles {width:35%; font-size:0.9em;}
			.upgrades-table td.info {width:65%;}
			.upgrades-table h4 {height:18px; font-size:1em;}
				
				
		ul.contact-info {
			width:60%;
			margin:30px 0 20px;
			padding:8px;
			background:#E6EEFB;
			border-radius:3px;
			}
			ul.contact-info li {
				display:inline-block;
				margin:0 0 3px 8px;
				color:#555;
				list-style:none;
				}
				ul.contact-info li:first-child {margin-right:40px; border:blue;}
				ul.contact-info li span {
					display:block;
					margin:0 0 2px 0;
					font-size:0.85em;
					}
					ul.contact-info li a,
					ul.contact-info li a:visited {display:inline-block; font-size:1.3em; color:#1f69b0; text-decoration:none;}
					ul.contact-info li a:hover,
					ul.contact-info li a:focus {background:none; color:#164876;}
					ul.contact-info li a:active {color:#fff; background:#1C5A93; text-decoration:none;}



	/* Contact Forms */
		#contact-form {
			position:relative;
			padding:0 0 0 4px;
			}
			#contact-form p {
				margin-left:-5px;
				}
			#contact-form input[type="text"], 
			quick-contact input[type="email"] {
				width:152px;
				padding:3px;
				margin:2px 0 8px 0;
				font-size:0.8em;
				padding:4px;
				margin:0 0 5px 0;
				border:1px solid #ccc;
				}
				#contact-form input[type="text"]:focus, 
				quick-contact input[type="email"]:focus {outline:0;}
			#contact-form input[type="checkbox"] {
				margin-left:-3px;
				width: 13px;
				height: 13px;
				padding:0;
				margin:0 3px 0 0;
				vertical-align: bottom;
				position: relative;
				top: 0px;
				/*-css3-
					*overflow: hidden;
				!-css3-*/
			}
			#contact-form label {display:inline-block; margin-bottom:8px;}
			#contact-form textarea {
				width:154px;
				height:80px;
				margin:2px 0 0 0;
				font-size:0.8em;
				border:1px solid #ccc;
				}
				#contact-form textarea:focus {outline:0;}
			#contact-form button {
				margin-left:0;
			}
			#contact-result {
				display:none;
				position:absolute;
				top:-1px;
				right:0;
				bottom:-1px;
				left:0;
				padding-top:60px;
				font-size:0.8em;
				text-align:center;
				background:#fff;
				background:rgba(255,255,255,0.9);
				z-index:500;
				}
			
		
	/* Large contact form */
		#contact-form-large {
			position:relative;
			width:565px;
			margin:20px 0 10px -10px;
			padding:10px 15px 10px 10px;
			background:url(../img/white_carbonfiber.png);
			border-top:1px solid #bbb;
			border-bottom:1px solid #bbb;
			}
			#contact-form-large input[type="text"],
			#contact-form-large input[type="email"] {
				width:45%;
				padding:3px;
				margin:2px 0 5px 0;
				font-size:0.8em;
			}
			#contact-form-large #contact-email, #contact-form-large #contact-phone, #contact-mobile {float:right;}
			#contact-form-large #input-spacer {visibility:hidden;}
			#contact-form-large select {margin-bottom:10px;}
			#contact-form-large label {color:#666;}
			#contact-form-large textarea {
				width:562px;
				margin:20px 0 0 0;
				}
			#contact-form-large input[type="checkbox"] {
				margin:0 5px 0 0;
				}
			#contact-form-large button {float:right; margin-right:-4px;}
			#contact-evaluation-options {
				display:block;
				display:none;
				margin:0 0 -10px 0;
				padding:10px 0 10px 0;
				height:auto;
				border-top:1px solid #ccc;
				border-bottom:1px solid #ccc;
				}
				#contact-evaluation-options div {
					display:inline-block;
					max-width:45%;
					margin-left:5px;
					vertical-align:top;
					}
				#contact-evaluation-options p {
					font-size:0.8em;
					color:#666;
					margin-left:0;
				}
				#contact-evaluation-address {display:inline-block; max-width:48%;}
				#contact-evaluation-date {max-width:120px;}
				#contact-evaluation-time {max-width:80px;}
			
		#contact-form label {color:#666;}
		#contact-form button {margin-left:0;}
		.sbi #contact-phone {display:none;}
		#contact-result p.error {color:#af1e1e!important;}
		
		#contact-social {list-style:none; margin:0;}
			#contact-social li {display:inline-block;}
			
		/* css for timepicker */
		.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
		.ui-timepicker-div dl { text-align: left; }
		.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
		.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
		.ui-timepicker-div td { font-size: 90%; }
		.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
		
		.ui-timepicker-rtl{ direction: rtl; }
		.ui-timepicker-rtl dl { text-align: right; }
		.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
		
		/* Stops jQueryUI widgets rendering HUGE! */
		.ui-widget {font-size: .9em;}

	
	/* IT Security tabs */
		.tab {
			position:relative;
			display:inline-block;
			min-width:95px;
			height:30px;
			padding:5px;
			margin:0;
			text-align:center;
			vertical-align:top;
			background:#e0e0e0;
			}
			.tab[data-id="4"] {width:131px;}
			.tab h2, .tab h3 {margin-top:0px; padding-top:7px; color:#666; font-size:0.9em; font-weight:bold;}
			.tab:hover {
				cursor:pointer;
				background:url(../img/blue_carbonfiber.pn) repeat #1b5082;
				}
				.tab:hover h2, .tab:hover h3 {color:#ffffffa3;}
			.tab.selected {background:url(../img/blue_carbonfiber.pn) #2b69a4;}
				.tab.selected h2, 
				.tab.selected h3 {color:#fff;}

		.tab-content {
			position:relative;
			display:none;
			min-height:149px;
			padding:16px 14px 14px 14px;
			margin:0 0 30px 0;
			color:#fff;
			background:url(../img/blue_carbonfiber.pn) #245e95;
			z-index:90;
			}
			.tab-content * {color:#ddd;}
			.tab-content h3 {color:#eee; font-size:1em; margin-bottom:1em;}

			.tab-content a, tab-content a:visited {padding:1px 3px 2px 3px; color:#fff; background:#2370B8}
			.tab-content a:hover, .tab-content a:focus {color:#fff; background:#007DFB;}
			.tab-content a:active {color:#fff; text-decoration:none; background:#1C5A93;}
			
			
		
		/* Footer */	
		footer {
			position:relative;
			margin-top:20px;
			padding:10px 0 10px 0;
			color:#333;
			border-top:1px solid #ccc;
			}
			footer p {font-size:0.8em;}
			#tagblock {
				float:right;
				text-align:right;
				}
				#tagblock a {margin:0;}
				#tagblock img {margin:0;}
			#copyright {padding-top:15px;}
			
			
			
			
/* ----------------------
 * 	Blog
 * ---------------------- */

	img.alignleft {margin:24px 24px 24px 0;}
	img.alighright {margin:24px 0 24px 24px;}

	#sidebar {
		}
		#blog-categories .list-cat {
			margin:0;
			}
		#sidebar #searchform input {
			width:150px;
			font-size:0.8em;
			color:#999;
			padding:4px;
			margin:0 0 5px 3px;
			border:1px solid #ccc;
			}
			#sidebar #searchform input:focus {outline:0;}
		#sidebar select {
			width:160px;
			margin:0 0 5px 3px;
			padding:2px;
			}

	#posts-container {
		padding:0 10px 15px 10px;
		color:#666;
		background:#fff;
		}
		.post {
			padding:25px 0;
			border-bottom:1px solid #ccc;
			}
			.post:first-child {padding:10px 0 25px 0;}
			.post:last-child {border-bottom:none;}
			.post h1 {
				color:#1F69B0;
				margin-bottom:0.5em;
				}
			.post img {
				display:block;
				margin:0 auto;
				}
			.post .tags {margin:-5px 0 0 0;}
			.post .tags img {
				display:inline-block;
				margin:0px 0 0 0;
				color:#777;
				font-size:1.1em;
				}
			.post .tags a {color:#999; font-size:0.85em; text-decoration:underline;}
			.post img.featured {float:right; margin:-5px 0 20px 20px;}
			.post .posted-date {color:#999; margin:0 0 30px 0;}
			.post p {margin:0 0 24px 0; padding:0 1px;}
			.post strong {padding:0 0 24px 0; font-weight:bold;}
			.post a {color:#1F69B0;}
			
			.post ul,
			.post ol {
				margin:10px 10px 25px 20px;
				}
				.post ul {margin-top:-10px;} 
				
				.post ul li,
				.post ol li {margin-bottom:1.3em; font-size: 0.9em; line-height:1.4em;}
					.post ul li {margin-bottom:0; font-size:0.8em; list-style:disc;}
					.post ul li strong {font-size:0.8em;}
					.post ol li strong {font-size:0.9em;}
								
			.post blockquote {margin:30px auto; padding:5px 10px; background:#eee;}
			
			
		/* Pagination */
	
	    ul.page-numbers {margin:5px 15px; list-style:none;}
        ul.page-numbers li {
            display: inline-block;
            margin: 0 1px;
            padding: 5px 8px;
            background: #eee;
            }

	
	
	

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	
	body {
		width:712px;
		margin-top:0;
		padding-top:0;
		}
	
	header {}
		nav {
			width:712px;
			margin-bottom:-5px;
			}
			nav ul #contact {float:right; margin:0;}
			
	#content, #leftbar, #rightbar {margin-bottom:20px;}
	
	#content {
		width:490px;
		padding-top:240px;
		}
		.nivo-controlNav {margin-bottom:-10px;} /* Hompage slider buttons */
		img.header-img {margin:0;}


		.srv-box {width:48%;}
			#srv-box-backup::before,
			.srv-box:nth-child(4)::before {
				background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url('../img/hdd-led.jpeg') 0px 1px no-repeat;
				background-size: cover;
			}

		.sidebar ul {margin-left:10px;}
		.sidebar ul li {margin-left:10px; padding-left:0px;}

	#leftbar {
		width:180px;
		}
		
	#rightbar {
		display:block;
		width:700px;
		clear:both;
		min-height:100px;
		margin-top:-20px;
		padding-top:10px;
		}		
		#rightbar .sbi {
			display:inline-block;
			width:100%;
			min-height:120px;
			vertical-align:top;
			margin-left:-12px;
			}
			#rightbar .sbi:first-child {margin-top:0;}
			/*#rightbar .sbi:last-child {text-align:right;}*/
			#rightbar .sbi h4 {width:100%; padding-right:2px;}
			
			#rightbar .sbi #contact-form input[type="text"] {
				display:inline-block;
				width:210px;
				margin-right:5px;
			}
			#rightbar .sbi #contact-form label {
				display:block;
			}
			#rightbar .sbi #contact-form textarea {
				width:437px;
			}
			#rightbar .sbi #contact-form button {
				display:block;
				float:right;
				width:265px;
				margin-right:6px;
				padding:10px;
				font-size:0.8em;
			}
			#qc {
				width:455px!important;
				}
			#passion-ne {
				display:inline-block;
				float:right;
				max-width:210px;
				min-height:90px!important;
				margin:0;
				text-align:right;
				}

	#contact-form-large {
		width:485px;
		}
		#contact-form-large input[type="text"], quick-contact input[type="email"] {
			width:220px;
		}
		#contact-form-large label {}
		#contact-form-large textarea {
			width:481px;
		}
		#contact-evaluation-date {max-width:100px;}
		
		/* == Blog == */
		#sidebar .sbi {
			display:inline-block;
			vertical-align:top;
			max-width:30%;
			margin:5px 31px 15px -12px!important;
			}
			#sidebar .sbi:last-child {margin-right:0!important;}
			#sidebar #searchform input {
				width:190px;
				}
			#sidebar select {
				width:203px;
				}
}


/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width:321px) and (max-width: 767px) {
	
	body {
		width:436px;
		margin-top:0;
		padding-top:0;
		}
	
	header {
		}
		header .headerinfo {margin-left:-5px;}
			header .headerinfo li {display:block;}
		header .logo {margin:0; max-width: 180px;}
		header .headersocial {padding-top:40px; margin-left:8px;}
		nav {
			width:436px;
			margin-bottom:5px;
			}
			nav > ul li a {padding:13px 15px 11px 15px;}
			nav ul #contact {float:right; margin:0;}
			#services-children {
				padding-bottom:10px;
			}
				#services-children ul {
					width:20%;
					margin:0 20px 0 20px;
					}
					#services-children ul li.title {
						width:120px;
						padding-right:0;
					}
			
		#wrapper {
			width:436px;
			}
			#content {
				width:415px;
				margin:0;
				padding-top:200px;
				}
				.nivo-controlNav {margin-top:0px; margin-bottom:-20px;} /* Hompage slider buttons */

			.srv-box {width:48%;}
			#srv-box-backup::before,
			.srv-box:nth-child(4)::before {
				background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url('../img/hdd-led.jpeg') 0px 1px no-repeat;
				background-size: cover;
			}


		.sidebar {
			width:436px;
			}
			.sbi {
				display:inline-block;
			}
			
		#leftbar {display:none} /* Temporary */
			
		#rightbar .sbi {
			display:inline-block;
			width:425px;
			min-height:120px;
			vertical-align:top;
			margin-top:-5px;
			margin-left:-256px;
			}
			#rightbar .sbi:first-child {margin-top:0;}
			/*#rightbar .sbi:last-child {text-align:right;}*/
			#rightbar .sbi h4 {width:100%; padding-right:2px;}
			
			#rightbar .sbi #contact-form input[type="text"] {
				width:410px;
			}
			#rightbar .sbi #contact-form label {
				display:block;
			}
			#rightbar .sbi #contact-form textarea {
				width:410px;
			}
			#rightbar .sbi #contact-form button {
				display:block;
				float:right;
				width:265px;
				margin-right:3px;
				padding:5px;
				font-size:0.8em;
			}
		#contact-form-large {
			width:410px;
			}
			#contact-form-large input[type="text"], quick-contact input[type="email"] {
				width:403px;
				font-size:1em;
				padding:5px;
				margin:5px 0 5px 0;
			}
			#input-spacer {display:none;}
			#contact-form-large select {
				margin-top:10px;
				margin-bottom:10px;
			}
			#contact-form-large label {}
			#contact-form-large textarea {
				width:403px;
				font-size:1em;
				padding:5px;
				margin-top:10px;
			}
			#contact-evaluation-address {display:block; max-width:100%;}
			#contact-evaluation-options div {display:block; max-width:100%;}
			
			#qc {margin-top:0!important;}
			#passion-ne {
				float:right;
				width:150px!important;
				min-height:80px!important;
				text-align:right;
				}
			
			/* == Blog == */
			#sidebar {
				width:430px;
				margin:0 0 0 -256px;
				}
				#sidebar .sbi {
					display:inline-block;
					vertical-align:top;
					width:193px;
					min-height:125px;
					margin:0 15px 10px 0;
					}
					#sidebar .sbi:nth-child(2) {margin-right:0!important;}
					#sidebar #searchform input {
						width:173px;
						}
					#sidebar select {
						width:185px;
						}
	
}


/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 320px) {
	
	body {
		width:320px;
		margin-top:0;
		padding-top:0;
		}
	
	header {width:310px;}
		header .headerinfo {position:absolute; top:50px; left:105px;}
		header .headerinfo li {display:block;}
		header .logo {margin:-10px -5px 0 0;}
		header .logo {margin:0; max-width: 180px;}
		header .headersocial {margin-top:15px;}
		nav {
			width:321px;
			margin-bottom:5px;
			}
			nav > ul {width:321px;}
				nav > ul li {display:block;}
					nav > ul li a {margin:0;}
				nav ul #contact {float:none;}
				nav #services-children {width:300px; height:auto; padding-bottom:10px;}
					nav #services-children ul {width:280px;}
						nav #services-children ul li.title {width:290px; margin-left:-5px;}
						nav #services-children ul li a {width:250px; margin-left:-5px;}
			
	
		#wrapper {
				width:320px;
				}
				#content {
					width:300px;
					margin:0;
					padding-top:150px;
					}
					.nivo-controlNav {margin-top:0px; margin-bottom:-20px;} /* Hompage slider buttons */
					
			.srv-box {width:48%;}


		.sidebar {
			width:320px;
			}
			.sbi {
				display:inline-block;
			}
			
			#leftbar {display:none;} /* Temporary? */
					
			#rightbar .sbi {
			display:inline-block;
			width:310px;
			min-height:120px;
			vertical-align:top;
			margin-top:-5px;
			margin-left:-140px;
			}
			#rightbar .sbi:first-child {margin-top:0;}
			#rightbar .sbi:last-child {text-align:right;}
			#rightbar .sbi h4 {width:310px; padding-right:2px;}
			
			#rightbar .sbi #contact-form input[type="text"] {
				width:290px;
			}
			#rightbar .sbi #contact-form label {
				display:block;
			}
			#rightbar .sbi #contact-form textarea {
				width:290px;
			}
			#rightbar .sbi #contact-form button {
				display:block;
				float:right;
				width:300px;
				margin-right:6px;
			}
		.contact-info {width:100%;}
		#contact-form-large {
			width:295px;
			}
			#contact-form-large input[type="text"], quick-contact input[type="email"] {
				width:285px;
				font-size:1em;
				padding:5px;
				margin:5px 0 5px 0;
			}
			#input-spacer {display:none;}
			#contact-form-large select {
				margin-top:10px;
				margin-bottom:10px;
			}
			#contact-form-large label {}
			#contact-form-large textarea {
				width:285px;
				font-size:1em;
				padding:5px;
				margin-top:5px;
			}
			#contact-evaluation-address {display:block; max-width:100%;}
			#contact-evaluation-options div {display:block; max-width:100%;}
			/* Facebook like button (adds css making contact page too wide) */
			#contact-social li:first-child {display:none;}
			
			footer {
				padding:10px;
				}
}