/*

	LiveQoS -
	VERSION 1.0 [CORE]
	
	-----------------------------------------
	
	developer: Michel Joanisse
	email: mjoanisse@simplebranch.ca
	website: http://www.simplebranch.ca
	
	-----------------------------------------

	
*/


/* CORE, COMMONALITIES & RECURRENCES
---------------------------------------------------------------------- */
* {margin:0;padding:0;font-size:12px;color:#333;font-family:Helvetica, Arial, "Trebuchet MS";}
dfn, dfn * {font-style:normal;font-size:10px;}
abbr {cursor:help;border-bottom:0;}
#header, #frame, #content, #solutions, #staff, #pre-footer, nav, footer, header {float:left;clear:both;width:100%;}
.grid980, #slider {width:980px;margin:0 auto;position:relative;}
a {outline:0;}
html {}
sup {font-size:9px!important;vertical-align:top;}
#content .no-marker {list-style:none;margin:0;}
body {background:#231f20; /* < charcoal*/}
#frame, #content {min-height:700px;background:#f9f9f9; /* < grey*/}
/*< end*/

/* HEADER
---------------------------------------------------------------------- */
header {}
header .grid980 {min-height:100px;}
header .branding {position:absolute;left:0;bottom:20px;z-index:100;}
header .branding a {display:block;float:left;}
header .branding img {float:left;}
header .branding span {text-transform:uppercase;color:#fff;font-weight:bold;letter-spacing:0.5px;font-family:"Trebuchet MS";display:block;position:absolute;left:155px;bottom:3px;width:300px;}
header #phone {color:#f26522;font-size:24px;position:absolute;top:20px;right:0;}
header nav {position:absolute;right:0;bottom:23px;}
header nav ul {float:right;}
header nav li {float:left;margin:0 0 0 10px;padding:0 0 0 10px;border-left:1px solid #fff;}
header nav li:first-child {border:0;padding:0;margin:0;}
header nav a {color:#fff;text-decoration:none;}


/* MAIN NAV
---------------------------------------------------------------------- */
nav#main {background:#e35f20 url(../_images/nav-gradient.png) top left repeat-x;border-top:1px solid #cb5939;border-bottom:1px solid #e6b096;position:relative;z-index:500;}
nav#main ul {float:right;}
nav#main li {float:left;margin:0 0 0 15px;padding:0 0 0 15px;position:relative;background:url(../_images/navitem-border.gif) left center no-repeat;}
nav#main a {display:block;float:left;color:#fff;text-transform:uppercase;font-weight:bold;font-size:14px;text-decoration:none;padding:15px 0;}
nav#main li.current-menu-item a, nav#main li.current-page-ancestor a, nav#main li.current-menu-ancestor a {color:#772802;}
nav#main li:hover .sub-menu {display:block;}

/* SUB MENU
---------------------------------------------------------------------- */
nav#main .sub-menu li {border:0;padding:0;margin:0;clear:both;width:100%;}
nav#main .sub-menu a {color:#231f20;text-transform:none;font-weight:normal;text-decoration:underline;padding:5px 10px;}
nav#main .sub-menu a:hover {color:#f26522;}

nav#main .sub-menu {position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:0;background:rgba(255,255,255,0.85);display:none;padding:10px 0;margin:1px 0 0 0;}
nav#main #menu-item-17 .sub-menu, nav#main #menu-item-16 .sub-menu {left:auto;right:0;}

/* SLIDER
---------------------------------------------------------------------- */
#slider {height:315px;background:#000;}


/* SOLUTIONS
---------------------------------------------------------------------- */
#solutions {background:url(../_images/border1.png) top center no-repeat;margin-top:30px;padding:30px 0;}
#solutions .item {display:block;float:left;width:200px;margin:0 60px 0 0;text-decoration:none;position:relative;}
#solutions .item.last {margin:0;}
#solutions .item img {padding:10px;background:#fff;box-shadow:inset 1px 2px 10px rgba(242,101,34,1);}
#solutions .mask {display:none;position:absolute;top:0;left:0;background:url(../_images/hex231f20-50.png);width:100%;height:87px;cursor:pointer;}
#solutions .item img, #solutions .mask {border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;}
#solutions h4 {margin:10px 0 0 0;font-size:14px;line-height:1.3em;}
#solutions h4, #solutions h4 * {text-align:center;text-transform:uppercase;}

#solutions .item:hover img {box-shadow:inset 1px 2px 10px rgba(0,0,0,0.7);}
#solutions .item:hover .mask {display:block;}

/* STAFF
---------------------------------------------------------------------- */
#staff {background:#f9f9f9 url(../_images/border1.png) top center no-repeat;padding:30px 0 50px 0;}
#staff .grid980 {}
#staff dl {float:left;min-height:273px;width:200px;margin:0 20px 0 0;background:url(../_images/border2.png) right center no-repeat;}
#staff dl.first {margin-left:72px;}
#staff dl.last {margin:0;background:0;}
#staff dt {font-size:18px;text-transform:uppercase;font-weight:bold;line-height:1.2em;margin:0 0 7px 0;}
#staff dd {line-height:1.5em;color:#f26522;/*< orange*/}
#staff dd.dets {min-height:40px;}
#staff dd.img {margin:10px 0 0 0;background:url(../_images/staff-bg.png) top left no-repeat;width:177px;height:116px;padding-top:7px;position:relative;}
#staff dd.img img {display:block;margin:0 auto;}
#staff dl a {display:block;margin:0 auto;width:163px;height:109px;background:black;}
#staff .mask {display:none;position:absolute;top:7px;left:7px;width:163px;height:109px;background:url(../_images/staff-mask.png);}
#staff dd.img:hover .mask {display:block;}


/* PRE_FOOTER
---------------------------------------------------------------------- */
#pre-footer {padding:30px 0;background:url(../_images/border3.gif) bottom center no-repeat;}
#pre-footer .grid980 {}

#pre-footer .col {float:left;width:140px;margin:0 20px 0 0;}
#pre-footer .col.sml {width:80px;}
#pre-footer .col.last {width:auto;margin:0;float:right;}
#pre-footer h6, #pre-footer h6 * {color:#f26522;/*< orange*/font-size:14px;text-transform:uppercase;text-decoration:none;}
#pre-footer h6 {margin:0 0 7px 0;}
#pre-footer ul a, #pre-footer .ul a {color:#898989;text-decoration:none;}
#pre-footer li {margin:0 0 5px 0;line-height:1.5em;}
#pre-footer a:hover {color:#fff;}

#pre-footer form {float:none;}
#pre-footer form input {margin:0 0 10px 0;width:200px;}
#pre-footer form button {float:none;margin:0;}

#pre-footer .socialmedia {float:right;margin:60px 0 0 0;}
#pre-footer .socialmedia p {float:left;color:#898989;padding:7px 0 6px 0;}
#pre-footer .socialmedia ul {float:left;margin:0 0 0 40px;}
#pre-footer .socialmedia li {float:left;margin:0 0 0 10px;position:relative;}
#pre-footer .socialmedia a {display:block;float:left;background:url(../_images/iconset-socialmedia.png);position:absolute;left:0;top:50%;margin:-12px 0 0 0;text-indent:-999em;}

#pre-footer .socialmedia .facebook, #pre-footer .socialmedia .facebook a {width:25px;height:25px;}
#pre-footer .socialmedia .twitter, #pre-footer .socialmedia .twitter a {width:32px;height:23px;}
#pre-footer .socialmedia .rss, #pre-footer .socialmedia .rss a {width:25px;height:25px;}

#pre-footer .socialmedia .facebook a {background-position:0 0;}
#pre-footer .socialmedia .twitter a {background-position:-25px 0;margin:-11px 0 0 0;}
#pre-footer .socialmedia .rss a {background-position:-57px 0;}

/* FOOTER
---------------------------------------------------------------------- */
footer {padding:30px 0;}
footer .buttons1 {float:left;width:400px;}
footer .buttons1 li {margin:0 10px 0 0;}
footer .buttons1 a {text-align:center;}
footer .buttons1 .orange a {background-image:url(../_images/halo2-wicon.png);}

footer .legal {float:left;max-width:580px;margin:-5px 0 0 0;}
footer .legal * {color:#898989;}
footer .legal p {margin:0 0 5px 0;line-height:2em;}

/* FORMS
---------------------------------------------------------------------- */
form {float:left;}
form button {background:#f26522;padding:7px;font-weight:bold;color:#fff;border:0;display:block;float:right;margin:-3px 0 0 15px;}
form input.text {padding:6px;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px;box-shadow:inset 1px 1px 4px rgba(0,0,0,0.3);width:200px;}
form input.text:focus, form input.text:active {box-shadow:inset 1px 1px 4px rgba(0,0,0,0.6);}

form select {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-o-border-radius:15px;box-shadow:inset 1px 1px 4px rgba(0,0,0,0.3);}


/* BUTTONS1
---------------------------------------------------------------------- */
.buttons1 a {
	float:left;
	display:block;
	color:#fff;
	text-transform:uppercase;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	padding:24px;
	line-height:1.2em;
	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-o-border-radius:12px;
	position:relative;
}

.buttons1 li {float:left;}
.buttons1 a:hover {opacity:0.7;}
.buttons1 .orange {width:170px;}
.buttons1 .orange a {background:#f26522 url(../_images/halo1.png) 50% 40% no-repeat;}
.buttons1 .grey {width:120px;}
.buttons1 .grey a {background:#878787 url(../_images/halo1.png) 50% 40% no-repeat;}

.buttons1 .wrapr {position:relative;z-index:100;font-size:16px;color:#fff;}
.buttons1 .dets {color:#fff;text-transform:none;clear:both;float:left;}
.buttons1 .icon {display:block;position:absolute;z-index:50;}