@import url('/css/topline.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	line-height: 1.5;
	/*font-family:inherit;*/
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

body { border-top: 5px solid #f0f0f0; font-family: 'Quattrocento', serif; margin: 0; padding: 0; background-color:#eaeaea;}
img { border: 0;}
.grey { color: #666; }
.aceRed { color: #f99; }
.aceBlue { color: #6cc; }
.aceYellow { color: #fc0; }
.btn { width: 100%; padding: 4px}
p { color: #666}

a{
	color:#000;
	text-decoration:none;
}
a:hover{
	color:#0eafe6;}
.titlebar{
	width:100%;
	border: 0;
	color:#1caee5;
	background-color:#1caee5;
	height:1px;
	margin:0 0 20px 0;
	float:right;
}
.subtitle{
	font-weight:bold;
}

.spacer10{width:100%;height:10px;}
.spacer20{width:100%;height:20px;}
.spacer30{width:100%;height:30px;}
.spacer40{width:100%;height:40px;}
.spacer50{
	width:100%;
	height:50px;
}


.divider {
    background-color: #CCC;	
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100%;
	-moz-box-shadow: 1px 1px 0px #FFF;
	-webkit-box-shadow: 1px 1px 0px #FFF;
	box-shadow: 1px 1px 0px #FFF;
}

#error_message{
	display:none;
}
/*==============================
HEADER
==============================*/
header { min-height: 50px; padding: 10px 10px 0; background-color:#1c1e1e;
}
a#sitelogo {
	width: 270px;
	height: 30px;
	background-image: url(/images/logo_white.svg);
	background-image: url(/images/logo_white.png)\9;
	background-size: 270px;
	background-repeat: no-repeat;
	display: block;
	margin: 8px auto 0px;
	float:left;
}


nav a {  
	font-size: 12px;
	font-weight: bold;
    color: #fff;  
    display: inline-block;  
    text-decoration: none;  
    line-height: 40px;  
}


nav li a {  
    text-align: center;  
  
}  
nav li:last-child a {  
    border-right: 0;  
} 

nav a:hover, nav a:active {
	color:#0eafe6;  
} 
nav a#pull {  
    display: none;  
}   

	
	
nav { margin: 0 auto; padding: 0; float:right;}
nav ul { width: 100%; display: table; padding: 0}
nav ul li { 
	height: 40px;
	list-style: none;
	display: table-cell;
	margin: 0 3%;
}


/*******Sliding Menu***********************/

* {margin:0; padding:0}
.menu {position:relative; height:36px; width:290px; margin: 0 auto;}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100;}
.menu li {float:left}
.menu a:hover {color:#1caee5}
#slide {position:absolute; bottom:0; height:4px; background:#1caee5; z-index:10}

/*******End Sliding Menu******************/







/*==============================
CONTENTS
==============================*/


#container { padding: 10px 0; position: relative;}
#container p { padding: 0 18px; }
#container dl { margin: 0 20px; }
#container dl dt { font-weight: bold; color: #999; margin-bottom:6px; }
#container dl dd { margin-bottom: 30px; }
#container dl dd li { margin-bottom: 12px; } 

/*==============================
ICONS
==============================*/


#home { background-position: left top; }
#who { background-position: -100px top; }
#what { background-position: -200px top; }
#news { background-position: -300px top; }
#affiliate { background-position: -400px top; }
#contact { background-position: -500px top; }
#business { background-position: -600px top; }
#customer_management { background-position: -700px top; }
#user_authentication { background-position: -800px top; }
#credit_card_processing { background-position: -900px top; }
#phone { background-position: -1000px top; }
#fax { background-position: -1100px top; }
#location { background-position: -1200px top; }
#marketing { background-position: -1300px top; }
#shopping_cart { background-position: -1400px top; }
#monitoring { background-position: -1500px top; }
#tools { background-position: -1600px top; }
#career { background-position: -1700px top; }
#support { background-position: -1800px top; }
#calendar { background-position: -1900px top; }
#team { background-position: -2000px top; }
#benefits { background-position: -2100px top; }
#work { background-position: -2200px top; }



.icons100 {
	width: 100px;
	height: 100px;
	background-image: url(/images/icons100.svg);
	background-image: url(/images/icons100.png)\9;
	display: block;
	position:auto;
	margin:4% auto 0 auto;
  -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
       -o-transition: all 0.1s ease-in-out;
      -ms-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
}


.fourcol:hover .icons100,
.sixcol:hover .icons100 {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);

}



.icons50 {
	width: 50px;
	height: 50px;
	background-image: url(/images/icons50.svg);
	background-image: url(/images/icons50.png)\9;
	display: block;
	position:auto;
	margin:0 0 10px 0;
}

.icons25 {
	width: 25px;
	height: 25px;
	background-image: url(/images/icons25.svg);
	background-image: url(/images/icons25.png)\9;
	display: block;
	position:auto;
}


.floatL{
	float:left;
	margin-right:10px;
}

.floatR{
	float:right;
}




/*==============================
Horizon Image
==============================*/
.globe{
	background-image: url(/images/globe.png);
	height:280px;
	width:100%;
	background-repeat:no-repeat;
	margin:0 auto 0 auto;
	background-position:center;
}

.horizon{
	/*background-image: url(http://celerityglobal.org/wp-content/uploads/background/1.jpeg);*/
	background-image: url(/images/horizon.png);
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	background-color: #000;
	height:100px;
}
/*==============================
NEWS
==============================*/

.news_post{
	margin:10px 10px 40px 10px;
	color:#000;
	font-size:16px;
	text-shadow: 1px 1px 1px #FFF, 1px 1px 1px #FFF;
}
.news_title{
	font-size:24px!important;
	font-weight:bold;	
    overflow: hidden;
    text-align: left;
}

.news_date{
	color:#999;
	font-size:12px;
	line-height:1em;
}


/*==============================
About Us
==============================*/

.employee_number{
	color:#000!important;
	min-height:40px;
	font-size:44px!important;
	font-weight:bold;	
    overflow: hidden;
	margin:auto auto auto 20px!important;
    text-align: left;
	text-shadow: 1px 1px 1px #FFF, 1px 1px 1px #FFF;}


/*==============================
FOOTER
==============================*/
#footer_spacer{
	float:left;
	width:100%;
	height:100px;
}

.footer_space ul li{
	width:20px;
}
footer {
   color:#FFF;
   position:fixed;
   left:0px;
   bottom:0px;
   height:20px;
   width:100%;
   background:#1c1e1e;
   font-size:12px;
   padding:6px 10px 6px 20px;
   line-height:22px;
   display:inline inline-block;
}

footer ul {
	display:inline;}
	
footer ul li {
	margin: 0 6px;
	display:inline ;
	}


footer a{
	color: #fff;  
    text-decoration: none;
}
footer a:hover{
	color: #0eafe6;  
}

/* IE 6 */
* html footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}


/*=======================================================================
####### Back to top button
========================================================================*/

#back-top {
	position: fixed;
	float:right;
	right:30px;
	bottom: 0px;
	margin-right:22px;
}
#back-top a {
	width: 50px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 80px;
	height: 24px;
	display: block;
	margin-bottom: 4px;
	background: #ddd url(/images/up-arrow.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #333;
}




/*=======================================================================
####### New Contact Form
========================================================================*/

/* Overlay */

.contact{padding:5px 10px;
}

.contact_link{
	color:#09F;
	font-weight:bold;
	font-size:12px;	
}
#contact-overlay {background-color:#000;}
#contact-container .close{
	margin-top:5px;
    cursor:pointer;
    position:relative;
	float:right;
	width:20px;
	height:20px;
	background-image:url(/images/icon_close.png);
	background-position:right;
}

/* Container */
#contact-container {font-size: 16px/22px; text-align:left; width:300px;}
#contact-container .contact-content {background-color:#FFF; min-height:100%; padding:20px;	color:#333; border-radius:6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px;}
#contact-container h1 {color:#000; font-size:16px; line-height:16px; margin:0; padding:0 0 6px 0px; text-align:left;}
#contact-container .contact-loading {background:url(../img/contact/loading.gif) no-repeat; height:55px; margin:-14px 0 0 190px; padding:0; position:absolute; width:54px; z-index:8000;}
#contact-container .contact-message {text-align:center;}
#contact-container .contact-message1 {text-align:center;}
#contact-container .contact-message2 {text-align:center;}
#contact-container .contact-message3 {text-align:center;}
#contact-container .contact-error {
	display:inline-block;
	float:none;
	font-size:12px;
	color: #e46c6d;
	margin-left:10px;
	}
#contact-container .error,
#contact-container input.error{
	background: #f8dbdb;
	border-color: #e77776;
}

#contact-container br {clear:both;}
#contact-container form {margin:0; padding:0;}
#contact-container label {display:block; float:none; font-size:12px; width:auto; font-weight: bold; margin-bottom: 5px; color: #333333;}
#contact-container em { color: #01b3b3;}
#contact-container .contact-cc {cursor:default; font-size:14px; vertical-align:top;}
#contact-container .contact-top {background-color:#FFF; height:13px; margin:0; padding:0; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; border-radius:8px 8px 0 0;}
#contact-container .contact-bottom {background-color:#FFF; font-size:12px; height:13px; line-height:12px; text-align:center; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; border-radius:0 0 8px 8px;}

#contact-container input,
#contact-container textarea {
	margin-bottom:10px;
	height:30px;
	width:100%;	
	text-indent:8px;
	border: 1px solid #cfdede;
	padding:4px auto;
	font-size:12px;
	color:#333; border-radius:3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	color: #777777;}
	
#contact-container textarea {font:12px Arial, Helvetica, sans-serif; height:60px; padding:4px auto;}
#contact-container input:focus, form#contactform textarea:focus { outline: none; border: 1px solid #649d9d;}


#contact-container .contact-button {
	float:left;
	line-height:1.4em;
	display: block;
	font-weight:bold;
	color:#FFF!important;
	width: 100%!important;
	max-width:260px;
	height: 44px!important;
	background-image:url(/images/send-button-sprite.png)!important;
	background-repeat: repeat-x;
	-webkit-border-radius: 3px!important;
	-moz-border-radius: 3px!important;
	border-radius: 3px!important;
	padding: 5px!important;
	border:0px;
}
	
#contact-container .contact-button {background-position: 0 0;color:#FFF!important;}
#contact-container .contact-button:hover {background-position: 0 -47px;color:#FFF!important;}
#contact-container .contact-button:active {background-position: 0 -47px;color:#FFF!important;}

#contact-container a.modal-close,
#contact-container a.modal-close:link,
#contact-container a.modal-close:active,
#contact-container a.modal-close:visited {	float:left; color:#999; font-size:18px; font-weight:bold; position:absolute; text-decoration:none; right:8px; top:0px;}
#contact-container a.modal-close:hover {color:#ccc;}


/*=======================================================================
####### MEDIA QUERY
========================================================================*/
@media only screen and (min-width: 1024px) {
	#wrapper { width: 960px; margin: 0 auto; }
}

@media only screen and (min-width: 768px) {
	
	#container { overflow: hidden; margin-bottom: 40px; }
	#container p { padding: 0 24px; }

}




@media screen and (max-width: 600px) {  
	#container { overflow: hidden; margin-bottom: 40px; width:100%; }
	#container p { padding: 0 24px; }
	nav{float:none;}
	a#sitelogo{float:none;}
	
}
	
	
@media screen and (max-width: 480px) { 
	.horizon{ display:none;}   
	#container { overflow: hidden; margin-bottom: 40px; }
	#container p { padding: 0 24px; }
	#back-top {position: fixed;bottom: 40px;}
	.copyright{display:none;}
	.footer_space{display:none;	}
	.row h3{font-size:14px!important; line-height:3.2em!important;}
	.row h4{font-size:14px!important; line-height:1.2em!important;}

}
	
	
	
@media screen and (max-width: 320px) {
	.horizon{ display:none;}  
	#container { overflow: hidden; margin-bottom: 40px; }
	#container p { padding: 0 24px; }
}