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

/* ------------------------------------------------------------------------------------------------

	Created by elykinnovation, inc. - http://www.elykinnovation.com
	Jacksonville, Florida - Web Design Company

--------------------------------------------------------------------------------------------------- */


a, div {-moz-outline:none;}

/* ----------------------------------------------------------------------------------------------------------------

	.png hack

------------------------------------------------------------------------------------------------------------------*/

/* * { behavior: url(iepngfix.htc); }*/
.iepngfix { behavior: url(css/iepngfix.htc); }
 

/* ---------------------------------------------------------------------------

	Body 

--------------------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
	background-color: #DFDFE1;
	background-image: url(images/layout2_bg.jpg);
	background-repeat: repeat-x;
	font-family: Tahoma, sans-serif;
	font-size: 13px;
	color: #333;
}

p {
	line-height: 22px;
	margin: 0px 0px 16px 0px;
	padding: 0px;
}

.wrapper {
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	border: 0px;
	width: 870px; /* Make this number 10px wider than actual design for ie issues */
}

.body_container {
	background-color: #fff;
	text-align: left;
	padding: 0px 10px 10px 10px;
	width: 840px;
	float: left;
}

.logo_container {
	float: left;
	width: 840px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.menu_container {
	float: left;
	width: 840px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/menu-bg.png);
	background-repeat: no-repeat;
}

.header {
	float: left;
	width: 840px;
	height: 254px;
	background-image: url(../images/banner-1.png);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.header_2 {
	float: left;
	width: 840px;
	height: 254px;
	background-image: url(../images/banner-2.png);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.header_3 {
	float: left;
	width: 840px;
	height: 254px;
	background-image: url(../images/banner-3.png);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.header_4 {
	float: left;
	width: 840px;
	height: 254px;
	background-image: url(../images/banner-4.png);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.header_5 {
	float: left;
	width: 840px;
	height: 254px;
	background-image: url(../images/banner-5.png);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.header_6 {
	float: left;
	width: 840px;
	height: 254px;
	background-image: url(../images/banner-6.png);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


.container {
	float: left;
	width: 840px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/body-content-bg-top.png);
	background-repeat: no-repeat;
	background-position: top;
}


.side_a {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 300px;
}

.side_b { 
	float: left;
	margin: 0px 0px 0px 12px;
	padding: 30px 0px 0px 0px;
	width: 510px;
}

.side_b a {
	color: #0066ff;
	text-decoration: underline;
}

.side_b a:hover {
	color: #006699;
	text-decoration: none;
}


/* ---------------------------------------------------------------------------

	For 3 column design: Leave off if unneccessary

--------------------------------------------------------------------------- */

.side_c {
	margin: 0px 0px 0px 0px;
	padding: 15px 0px 0px 14px;
	width: 820px;
}

.footer {
	clear: both;
	margin: 10px 0px;
	padding: 8px 0px;
	float: left;
	text-align: center;
	color: #fff;
	width: 860px;
	font-size: 13px;
	background-color: #044F86;
	border: solid 1px #fff;
}

.elyk {
	margin: 0px 10px 0px 0px;
	float: right;
}


/* ---------------------------------------------------------------------------

	Logo Replace

--------------------------------------------------------------------------- */

.logo a {
	float: left;
	text-decoration: none;
	width: 258px;
	height: 88px;
	background-image: url(../images/logo-sycom-services.png);
	background-repeat: no-repeat;
	margin: -8px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
}


.tagline {
	display: block;
	float: left;
	text-decoration: none;
	width: 226px;
	height: 99px;
	background-image: url(../images/tagline.png);
	background-repeat: no-repeat;
	margin: 50px 0px 0px 35px;
	padding: 0px 0px 0px 0px;
}

.grey_button {
	float: left;
	background-image: url(../images/button-grey.png);
	background-repeat: no-repeat;
	text-align: center;
	height: 21px;
	width: 180px;
	padding: 5px 0px 0px 0px;
	margin: 50px 0px 0px 150px;
	font-size: 12px;
}

.grey_button a {
	color: #000;
	text-decoration: none;
}

.grey_button a:hover {
	color: #fff;
	text-decoration: none;
}




/* ---------------------------------------------------------------------------

	Navigation

--------------------------------------------------------------------------- */



.menu {
	width: 840px;
	height: 30px;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 3px 0px;
	text-align: right;
	font-size: 14px;
}

.menu ul {
	 padding: 0px;
	 margin: 0px;
	 text-indent: 0px;
	 list-style: none;
}

.menu li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 12px;
	display: inline-block;
	float: left;
}

a.button {
    color: #333;
    display: inline-block;
    float: left;
    height: 30px;
    margin: 3px 0px 0px 0px;
    padding: 0px 13px 0px 0px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
	height: 30px;
    display: inline-block;
    padding: 3px 1px 0px 13px;
    margin: 0px 0px 0px 0px;
} 

a.button:hover,
.menu li.active a.button {
    background: url('../images/menu-right.png') no-repeat scroll top right;
    color: #333;
    text-decoration: none;
}

a.button:hover span,
.menu li.active a.button span {
    background: transparent url('../images/menu-left.png') no-repeat;
	color: #fff;
	cursor: pointer;
} 



/* ---------------------------------------------------------------------------

	General Declarations

--------------------------------------------------------------------------- */

h1 {
	font-size: 22px;
	color: #006699;
	font-weight: lighter;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
}

h2 {
	font-size: 15px;
	color: #195788;
	font-weight: normal;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
}

h3 {
	font-size: 14px;
	color: #045185;
	font-weight: lighter;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
}

h4 {
	color: #045185;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
}



.hide {
	visibility: hidden;
	display: none;
	text-indent: -8520px;
}

.pictureframe {
	border: #000 1px solid;
	padding: 4px;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.clear {
	clear: both;
	background-color: transparent;
	height: 1px;
}

.twitter {
	width: 30px;
	height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 0px 0px;
	float: left;
}


.chat_button {
	float: right;
	width: 144px;
	height: 41px;
	margin: 0px 0px 0px 20px;
}

/* ---------------------------------------------------------------------------

	Tips Area Stylings

--------------------------------------------------------------------------- */

.tips_container {
	float: left;
	width: 260px;
	margin: 0px 0px 0px 0px;
	padding: 18px 0px 0px 15px;
}

.the_tips {
	float: left;
	width: 230px;
	margin: 0px 0px 15px 0px;
	padding: 12px 15px;
	border-top: #999 solid 1px;
	border-bottom: #999 solid 1px;
}

.the_tips_top {
	float: right;
	width: 220px;
	height: 50px;
	margin: 15px 0px 12px 0px;
	padding: 0px 15px 0px 25px;
	border-top: #999 solid 0px;
	border-bottom: #999 solid 0px;
}

.the_tips_bottom {
	float: left;
	width: 220px;
	height: 62px;
	margin: 0px 0px 12px 0px;
	padding: 0px 15px 0px 25px;
	border-top: #999 solid 0px;
	border-bottom: #999 solid 1px;
}

.the_tips p {
	font-size: 12px;
	line-height: 18px;
	margin: 0px 0px 16px 0px;
	padding: 0px;
}

.grey_button_tips {
	float: left;
	background-image: url(../images/button-grey.png);
	background-repeat: no-repeat;
	text-align: center;
	height: 21px;
	width: 180px;
	padding: 5px 0px 0px 0px;
	margin: 0px 0px 0px 50px;
	font-size: 11px;
}

.grey_button_tips a {
	color: #000;
	text-decoration: none;
}

.grey_button_tips a:hover {
	color: #fff;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------

	Career Opportunities Page

--------------------------------------------------------------------------- */

.career_opportunity {
	margin: 2px;
	padding: 6px 0;
	border-top: 1px solid #999;
}

.career_opportunity h3 {
	margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------

	Unordered List Stylings

--------------------------------------------------------------------------- */
.jobs_list {
	float: left;
	width: 240px;
	margin: 0px 12px 12px 0px;
	padding: 0px;
}

.jobs_list ul {
	 padding: 0px 0px 0px 5px;
	 margin: 0px 0px 0px 5px;
	 text-indent: 1px;
	 list-style: none;
}

.jobs_list li {
	border-bottom: #CCCCCC 1px dotted;
	width: 95%;
	margin: 0px 0px;
	padding: 4px 0px;
	font-size: 13px;
}

.jobs_list a:link, .jobs_list a:visited {
	color: #oo6699;
	text-decoration: none;
}

.jobs_list a:hover, .jobs_list a:visited:hover {
	color: #990000;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------

	Online Job Search Engine

--------------------------------------------------------------------------- */

.live-job-openings a {
	float: left;
	text-decoration: none;
	width: 207px;
	height: 42px;
	background-image: url(../images/button-live-job-openings.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

.live-job-openings a:hover {
	text-decoration: none;
	background-image: url(../images/button-live-job-openings-hover.jpg);
	background-repeat: no-repeat;
}