﻿/*!
 * ============================================================================ 
 * SF|Boilerplated based on H5BP v4.0.2 | sfnormalize.css
 * ============================================================================ 
 */

/* General */
body {
    background:url(../Images/bg.jpg) repeat-x top left;
}
#banner-wrap, #footer-wrap-top, #footer-wrap-bottom {
    display:block;
    width:auto;
    max-width:81.5em;
    min-width:18.75em;
    margin:0 auto;
    clear:both;
}
#header-wrap, #content-wrap, #f1, #f2, #utility-bar, #title-area  {
    max-width:60em;
    min-width:18.75em;
    display:block;
    width:auto;
    margin:0 auto;
    clear:both;
}

/* Logo and Navigation Area */

#utility-bar {
    height:6.875em;
}
#logo {
    float:left;
    width:35%;
    padding-top:1.25em;
}
#nav {
    float:left;
    width:65%;
    padding-top:2.5em;
}
#nav .RadMenu_mainnav .rmItem, #nav .RadMenu_mainnav .rmLink, #nav .RadMenu_mainnav .rmText {
    margin:0;
    padding:0;
    border:none;
    background:none;
}
#nav .RadMenu_mainnav {
    float:right;
}
#nav .RadMenu_mainnav .rmItem {
    margin-right:1em;
}
#nav .RadMenu_mainnav .rmLast {
    margin:0;
}
#nav .RadMenu_mainnav .rmLink {
    padding:0.25em 0.5em;
    font-family:'alternategothic';
    font-size:1.5em;
    color:#fff;
    cursor:pointer;
}
#nav .RadMenu_mainnav .rmLink:hover, #nav .RadMenu_mainnav .rmSelected {
    background:#095470;
    box-shadow:inset 1px 1px #1c617b;
}
#nav .RadMenu_mainnav .rmGroup {
	background:#000000;
	padding:1em 1.5em;
}
#nav .RadMenu_mainnav .rmGroup .rmItem {
	float:none;
	display:block;
}
#nav .RadMenu_mainnav .rmGroup .rmLink {
	padding:0.35em 0;
	font-size:1.35em;
}
	
#nav .RadMenu_mainnav .rmGroup .rmLink:hover, #nav .RadMenu_mainnav .rmGroup .rmSelected {
	background-color: transparent;
    box-shadow:none;
	color:#3E94C1;
}
#nav .RadMenu_mainnav .mobileHide {
	display:none !important;
}
#nav .RadMenu_subnav {
	display:none;
}
	
/* Banner Area */

#title-area {
    margin:3em 0 0.5em;
}
#title-area h1 {
	float:right;
}
.inside #title-area h1 {
	float:left;
}
#banner {
    position:relative;
}
.tabArea {
	float:left;
	width:100%;
	clear:both;
}
#bannerTabs {
    float:right;
}
#bannerTabs li {
    float:left;
    margin-left:0.125em;
    padding:0.75em 1em;
    background-color:#1a6a87;
    text-align:center;
    font-family:'crillee';
    font-size:1.125em;
    border-radius:10px 10px 0 0;
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
}
#bannerTabs li:hover {
    background-color:#37829e;
}
#bannerTabs a {
    color:#fff;
}
.slideArea {
	clear:both;
	float:left;
	width:100%;
	box-shadow:0px 5px 10px #ccc;
}
.leftBtn, .rightBtn {
    width:155px;
    font-family:'alternategothic';
    color:#fff;
    background-color:#4dbbe4;
    position:absolute;
    top:262px;
    font-size:28px;
    background-image:url(../Images/arrows.png);
    background-repeat:no-repeat;
    cursor:pointer;
    transition:1s all;
    -moz-transition:1s all;
    -webkit-transition:1s all;
}
.buttonsNarrow .leftBtn, .buttonsNarrow .rightBtn {
	position:relative;
	width:100%;
	height:100%;
	float:left;
	top:0;
}
.leftBtn:hover, .rightBtn:hover {
    background-color:#fff;
    color:#4dbbe4;
}
.leftBtn {
    left:0;
    background-position:left 18px;
    padding:20px 12px 20px 0;
    text-align:right;
}
.rightBtn {
    right:0;
    background-position:right -72px;
    padding:20px 0 20px 12px;
}
.homeSlider {
    width:60em;
    margin:0 auto;
}
.buttonsNarrow {
    clear:both;
    max-width:60em;
    margin:0 auto;
    display:block;
}
.buttonsNarrow .left {
    float:left;
    width:48%;
}

.buttonsNarrow .right {
	float:right;
	width:48%;
}

.inside #banner-wrap {
    display:none;
}
.mb-panel {
	width:960px;
}
.mb-inside {
	height:390px;
}

.mb-inside h3 {
	font-family:'alternategothic';
	font-size:1.5em;
	margin:0 0 1em;
	text-transform:uppercase;
}

.mb-inside .right h3 {
	margin:0.5em 0 1em;
}

.mb-inside h2 {
	font-family:'crillee';
	font-size:3.5em;
	margin:0 0 0.45em;
	color:#e53b1f;
}

.mb-inside p {
	font-size:0.75em;
	font-family:Verdana,sans-serif;
	color:#444;
	line-height:1.75em;
}

#slides {
	width:960px;
	height:390px;
	overflow:hidden;
	margin:0;
	padding:0;
}
#slides li {
	background-color:#fff;
}
#slides #pros .mb-inside {
	padding:2em;
}
#slides li .left {
	float:left;
	width:70%;
	padding:2em;
}
#slides li .right {
	float:left;
	width:30%;
	padding:2em 1em 2em 0;
}
#slides .highlight {
	display:block;
	margin-bottom:0.5em;
	padding:0.5em 1em;
	background-color:#a7c8dd;
}
#slides .right .highlight a {
	color:#e53b1f;;
	font-family:'alternategothic';
	text-transform:uppercase;
	font-size:1.35em;
}
#slides .right ul {
	margin-top:1em;
}
#slides li li a {
	font-family:verdana, sans-serif;
	font-size:0.75em;
	color:#444;
	line-height:1.25em;
}

/* Content Area */

#content {
    margin-top:3em;
    clear:both;
}
.services .sf_cols:first-of-type {
    margin-bottom:3em;
}
.services .sf_3cols_2in_34 {
    margin:0 20px;
}
.services h1 {
    font-family:'crillee';
    font-size:1.25em;
    margin-bottom:0.75em;
    padding:0.25em 0 1em;
    border-bottom:1px dotted #999;
}
.services h1 a {
	color:#555757;
}
.services p {
    color:#444;
    font-family:Verdana,sans-serif;
    font-size:0.75em;
    line-height:1.825em;
    margin:0;
}
.managedit h1, .cloudservices h1, .backuprecovery h1, .phonesystems h1, .cabling h1, .project h1 {
    background-image:url(../Images/page-icons.png);
    background-repeat:no-repeat;
    text-shadow:none;
    padding-left:2.25em;
}
.managedit h1 {
    background-position:-20px -36px;
}
.cloudservices h1 {
    background-position:-20px -98px;
}
.backuprecovery h1 {
    background-position:-20px -168px;
}
.phonesystems h1 {
    background-position:-20px -236px;
}
.cabling h1 {
    background-position:-20px -305px;
}
.project h1 {
    background-position:-20px -377px;
}
#content .left ul,#content .left ol  {
	padding:0 0 0 3em;
	margin-bottom: 1.5em;
}
#content .left .sfpostsList {
	padding:0;
}
#content .left li{
	font-family: Verdana,sans-serif;
	color: #4b4b4b;
	list-style-type:disc;
	line-height: 1.65em;
	font-size: 0.8125em;
}
#content .left ol li {
	list-style-type:decimal;
}
.inside #content {
    background:url(../Images/content-bg.gif) repeat-y;
}
.inside #content .left {
    float:left;
    width:39.5em;
    padding:2.5em;
    border-top:1px solid #ccc;
}
.inside #content {
    margin-bottom:4em;
    border-bottom:1px solid #ccc;
}
.titleArea {
    float:left;
    width:66%;
}
.inside h2 {
    color:#444;
    font-size:1.5em;
    margin-bottom:0.65em;
}
.inside .right h2 {
	margin:0.5em 0;
}
.inside .left h2 {
	font-size:2em;
}
/*.inside .left h2:first-of-type {
    margin-top:1.2em;
}*/
.inside .left img {
    margin-bottom:2.75em;
}
.inside p {
    font-family:Verdana,sans-serif;
    color:#4b4b4b;
    line-height:1.65em;
    font-size:0.8125em;
}
.sfFormBox, .sfFormDropdown, .sfFormBlock {
	display:block;
	margin-bottom:2em;
}
.formTitle label {
	font-family:Verdana,sans-serif;
    color:#4b4b4b;
    font-size:0.8125em;
	margin-bottom:1em;
	display:block;
	font-weight:bold;
}
.formInput {
	clear:both;
	margin-bottom:1em;
}
.formInput input, .formInput textarea {
	padding:0.75em 1em;
	width:100%;
}
.formInput input:focus {
	background-color:#FFC;
}
.sfFormSubmit input {
	padding:1em 2em;
	background-color:#1C617B;
	color:#fff;
	border:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

/* Interior Sidebar */

.searchArea {
    float:left;
    width:34%;
}
.inside #content .right {
    float:left;
    width:20.5em;
}
/*.inside .left h2:first-of-type {
    margin-top:1.2em;
}*/
.inside .left h3:first-of-type {
    margin-bottom:.75em;
}
.inside #content .right p {
    padding:0 1.5em;
    margin-bottom:2em;
}
.sideTitle {
    padding:0 1.5em;
    background:#156481 url(../Images/side-title-bg.gif) no-repeat 94% center;
    height:3.625em;
    line-height:3.625em;
    margin-bottom:1.5em;
}
.sideTitle h3 {
    color:#fff;
    margin:0;
    font-family:'crillee';
}
.sfsearchBox {
    background:#0090c5;
    background:rgba(0,0,0,0.2);
    padding:0.5em 1em;
	transition:1s all;-moz-transition:1s all;-webkit-transition:1s all;
}
.sfsearchBox:hover {
	background:rgba(0,0,0,0.5);
}
.sfsearchTxt {
    color:#f5f5f5;
    font-size:0.825em;
    font-family:Verdana,sans-serif;
    border:none;
    background:none;
    outline:none;
    -moz-outline:none;
    float:left;
    width:90%;
    line-height:3.4em;
	height:3.5em;
}
.sfsearchSubmit {
    border:none;
    background:url(../Images/search.png) no-repeat right center;
    text-indent:-9999px;
    float:left;
    width:10%;
    height:3.125em;
}

/* Blog Items */

.blogPosts {
    clear:both;
    float:left;
	width:100%;
    margin:3em 0;
}
.blogTitle {
    font-family:'crillee';
}
.blogTitle .left {
    float:left;
    width:20%;
    color:#1a495b;
    font-size:1.25em;
}
.blogTitle .right {
    float:left;
    width:80%;
    text-align:right;
    height:2.25em;
    line-height:2.25em;
    background:url(../Images/blog-title-bg.gif) no-repeat right center;
}
.inside .sfContentBlock {
    margin-bottom:3em;
}
.blogPosts .sfpostsList  {
	margin-top:2em;
}
.blogTitle a {
    color:#fff;
    font-size:0.875em;
    padding-right:1.2em;
}
.sfpostListItem {
    float:left;
    width:32%;
    margin-right:2%;
}
.inside .sfpostsList {
    padding:0 1.2em;
}
.inside .sfpostListItem {
    float:none;
    display:block;
    width:100%;
    margin:0 0 2.5em;
    padding-bottom:2.5em;
    border-bottom:1px dotted #ccc;
}
.inside .right .sfpostListItem {
	margin-bottom:0.25em;
	padding-bottom:0.25em;
}
.sfpostListItem:last-of-type {
    margin:0;
}
.inside .left h2.sfpostTitle {
    margin:0 !important;
	font-size:3em;
}
h2.sfpostTitle a {
    color:#0092c8;
    margin:0 0 1em;
    font-size:0.875em;
	line-height:1em;
    display:block;
}
.inside .right h2.sfpostTitle a {
	margin:0;
}
h1.sfpostTitle {
    color:#0092c8;
    margin:0 0 1em;
    font-size:2.25em;
    text-shadow:none;
}
.inside .sfpostTitle a {
    color:#4b4b4b;
}
.sfpostAuthorAndDate, .sfpostDate {
    display:none;
}
.sfpostsList .sfpostSummary {
    color:#444;
    font-family:Verdana,sans-serif;
    font-size:0.75em;
    line-height:1.825em;
    margin-bottom:1.5em;
}
.inside .sfpostSummary {
	font-size:1em;
}
.sfpostsList .sfpostFullStory {
    display:inline-block;
    padding:0.75em 1em;
    background-color:#009ed9;
    color:#fff;
    font-size:0.75em;
    text-transform:lowercase;
}
.sfpostsList .sfpostFullStory:hover {
    background-color:#0f789f;
}
.sf_pagerNumeric {
	clear:both;
	float:left;
	width:100%;
}
.sf_pagerNumeric a {
	float:left;
	margin-right:1em;
	font-family:'alternategothic';
	font-size:1.25em;
	color:#444;
	padding:0.5em 0.85em;
}
.sf_pagerNumeric .sf_PagerCurrent, .sf_pagerNumeric a:hover {
	background:#444;
	color:#fff;
}
.inside .right h6 {
    padding:0 1.2em;
}
h6 a {
    color:#ed563d;
}
.blog .blogContent, .blog .right .sfpostDetails {
    display:none;
}
.sfreContentArea {
    background:#fefefe;
    padding:1.25em;
}
.sfsearchResultTitle {
	text-transform:uppercase;
	display:block;
	margin-bottom:0.75em;
}
.sfsearchResultHighLighter {
	display:block;
	margin-bottom:3em;
	font-family:Verdana,sans-serif;
    color:#4b4b4b;
    line-height:1.65em;
    font-size:0.8125em;
}

/* Footer */

#footer-wrap-top {
    background:url(../Images/footer.gif) repeat-x top left;
    height:21.9375em;
    padding-top:2em;
    max-width:100%;
}
#footer-wrap-bottom {
    background:#222;
    padding:1em 0;
    max-width:100%;
}

#f1 .left, #f1 .mid, #f1 .right {
    float:left;
    width:30%;
    margin-right:2%;
}

#f1 .right {
    width:36%;
    margin:0;
}

footer h3 {
    color:#5f5f5f;
    margin-bottom:1.25em;
    padding-bottom:0.75em;
    background:url(../Images/foot-sep.png) repeat-x left bottom;
}
footer .left ul, footer .mid ul {
    margin:0;
    padding:0;
}
footer .left li, footer .mid li {
    margin-bottom:0.25em;
    font-size:1.125em;
    font-family:'alternategothic';
}
footer .right h3 {
    margin-bottom:0.75em;
    background:none;
    padding:0;
    float:left;
}
footer .right ul {
    float:right;
}
footer .right li {
    float:left;
}
footer .right li a {
    background:url(../Images/social-icons.png) no-repeat 0 0;
    width:1.125em;
    height:1.125em;
    margin-right:0.5em;
    float:left;
    text-indent:-9999px;
}

li#fb a {
    background-position:left top;
}
li#fb:hover a {
    background-position:left -22px;
}
li#tw a {
    background-position:-25px 0;
}
li#tw:hover a {
    background-position:-25px -22px;
}
li#linked a {
    background-position:-53px 0;
}
li#linked:hover a {
    background-position:-53px -22px;
}
#f1 #map {
    border:2px solid #fff;
    clear:both;
    float:left;
}
#map img {
	max-width:100%;
	vertical-align:bottom;
}
#f1 a {
    color:#686868;
}
#f1 a:hover {
    color:#009ed9;
}
#f2 .left, #f2 .right {
    float:left;
    width:50%;
    color:#c5c5c5;
}
#f2 .left {
    text-align:left;
}
#f2 .right {
    text-align:right;
}
#f2 a {
    color:#c5c5c5;
}
#f2 {
    text-align:right;
}
#f1 .right .sfContentBlock {
	float:left;
	width:100%;
	clear:both;
	margin-bottom:10px;
}
.inside #f2 .sfContentBlock {
    margin-bottom:0;
}

/* Media Queries */

@media all and (max-width: 75em) {
	#content {
		margin:0.25em 0 0;
	}
	.buttonsNarrow {
		margin-bottom:2em;
	}
	.mb-panel img {
		max-width:100%;
	}
}

@media all and (max-width: 30em) {
    body {
        background:#fff;
    }
    #logo {
        float:none;
        width:100%;
        text-align:center;
    }
    #nav {
        float:none;
        width:100%;
        text-align:center;
		padding:0;
    }
    #nav .RadMenu_mainnav, #nav .RadMenu_mainnav .rmHorizontal {
        float:none;
        width:100%;
    }
	#nav .RadMenu_mainnav .rmSlide, #nav .RadMenu_subnav .rmSlide {
		display:none !important;
	}
    #nav .RadMenu_mainnav .rmItem {
        padding:0 2%;
        width:100%;
        float:none;
    }
    #nav .RadMenu_mainnav .rmLast {
        padding-bottom:2em;
    }
    #nav .RadMenu_mainnav .rmLink, #nav .RadMenu_mainnav .rmText {
        display:block;
        float:none;
    }
	#nav .RadMenu_mainnav .rmLast {
		padding:0;
	}
	#nav .RadMenu_subnav {
		display:block;
		float:none;
	}
	#nav .RadMenu_subnav .rmHorizontal, #nav .RadMenu_subnav .rmItem, #nav .RadMenu_subnav .rmLink, #nav .RadMenu_subnav .rmText {
		padding:0;
		margin:0;
		float:none;
		display:block;
	}
	#nav .RadMenu_subnav .rmHorizontal {
		width:100%;
		float:left;
	}
	#nav .RadMenu_subnav .rmItem {
		float:left;
		width:48%;
		margin:0.25em 1%;
		background-color:#333;
	}
	#nav .RadMenu_subnav .rmText {
		padding:1em 0;
		text-align:center;
		color:#fff;
		cursor:pointer;
	}
    #utility-bar {
        background:#222;
        height:auto;
    }
    #title-area {
        background:#14aae2;
        margin:0;
        padding:2em 0;
    }
	#title-area h1 {
		float:none;
		margin:0.35em 0 0;
	}
    #content-wrap {
        background:#fff;
    }
    #title-area {
        text-align:center;
    }
    #title-area img {
        max-width:80%;
        margin:0 auto;
    }
    #bannerTabs {
        margin:0 auto;
        float:none;
    }
    #bannerTabs li {
        display:inline;
        border-radius:0;
        margin:0;
        width:50%;
    }
    .homeSlider {
        display:none;
    }
    .homeSlider img {
        max-width:100%;
    }
    .leftBtn, .rightBtn {
        display:none;
    }
    .services .sf_colsOut {
        float:none;
        display:block;
        width:90%;
        margin:0 5% 3em;
    }
    .services .sf_colsIn {
        margin:0 !important;
    }
    .blogTitle .left {
        float:none;
        width:96% !important;
        margin:0 2% 1em;
    }
    .blogTitle .right {
        display:none;
    }
    .sfpostListItem {
        width:96%;
        margin:0 2% 1em;
        float:none;
        display:block;
    }
	.inside #content { 
		border:none;
	}
	#footer-wrap-top {
		background:#ECECEC;
	}
	.inside .sfpostListItem:last-of-type {
		border:none;
	}
    .sfpostListItem:last-of-type {
        margin:0 2%;
    }
    #f1  .left, #f1  .mid  {
        display:none;
    }
	#f1 .right{
		width:96%;
		margin:0 2%;
		padding:0 1em;
	}
	#f1 .right img {
		max-width:100%;
	}
    #f2 .left, #f2 .right {
        float:none;
        width:96%;
        margin:0 2% 1em;
        text-align:left;
    }
    .titleArea {
        float:none;
        width:96%;
        margin:0 2%;
    }
    .searchArea {
        display:none;
    }
    .inside #content {
        margin-bottom:0;
    }
    .inside #content .left {
        float:none;
        width:100%;
        background:#fff;
        border:none;
    }
    .inside #content .right {
        float:none;
		clear:both;
		margin-top:2em;
        width:100%;
        background:#ececec;
        border:none;
    }
}