@charset "utf-8";
/*
 * Company:		IT FACILITAS
 * Name:		CSS - Header styles
 * Description:	-       this positions everything in the header section of the site
 * Notes: 		-
 */

/*UI
============================================================= */

html {}
body {background-color: #f1f1f1; color: #333; border: 0px; margin:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;}

ul,li {list-style: none;}

hr {border:0px; border-top:1px solid #272F3F; position:relative; top:-3px;}

a {color:#333; cursor: pointer;}
a:hover{color:#666; cursor:pointer;}

img { border:none; }

input[type="text"] {border:1px #d0d0d0 solid; height:28px; width:300px; font-size:12px; font-weight:bold; padding-left:3px; margin-bottom: 20px;
                    border-bottom:1px #999 solid; position:relative; top:10px; outline:none;}
input[type="submit"] {border-style:none;}

input[type="image"] {border-style:none; margin-top:20px;}



.nudge_me {position:relative; top:5px;}
#new {color:#ff0000; font-weight:bold; font-size:11px;}

.header{
    font-family:Arial, Helvetica;
    font-size: 16px;
    font-weight: bold;
    color:#272f3f;

}
.my_margin{
    margin-left:25px;
    margin-right:25px;
    width:948px;
}

#header {height: 100px;}
#header_menu {float:right;}
#logo {font-size:52px; font-weight:bold; font-family:Arial; color: #272f3f; letter-spacing: -2px; position:relative; top:8px; float:left;}
#logo_tagline{
    font-size:12px;
    font-weight:bold;
    font-family:Arial;
    color: #272f3f;
    letter-spacing: 0px;
    text-transform:uppercase;
    position:relative;
    top:-8px;
    left:3px;
}
#call_us_txt {font-size:12px; position:relative; top:10px; text-align:center;}
#call_us {font-family:Arial; font-size:19px; font-weight:normal; letter-spacing: 0px;}


#container {width:998px; margin-left:auto; margin-right:auto; margin-bottom:30px; border-bottom:1px solid #d0d0d0; background-color:white;}
#main {background-color:white; width:948px; margin-right:25px; margin-left:25px; display:inline-block;}


/*---- MAIN FEATURE ----------------------------------------------------------*/

#main_feature {height:400px; background-image: url("../images/bg_grad.png"); border-bottom:2px solid #272F3F; margin-bottom:20px; display:block;}


/*----RECENT UPDATES ---------------------------------------------------------*/
#recent-updates {background-color: white; font-size:13px;}

#title_recent-updates span {visibility:hidden;}
#title_recent-updates {background: url('../images/title_recentupdates.png') no-repeat 0 0; width:152px; height:18px; display:block;}


/*---- HOMEPAGE --------------------------------------------------------------*/

#left {width:225px; float:left; border:0px dashed #000;  }
#right {width:697px; float:right; background-color:white; border:0px dashed #000; border-left:1px dashed #d0d0d0;}
#right_content {margin-left:25px;}
#right_content p {text-align: justify; font-size: 13px;}


#custom_line1 {position:relative; top:-18px; border:1px solid #272F3F;}
#custom_line2 {position:relative; top:-23px;}




/*---- HOMEPAGE ----*/

.menu {position:relative; background-color: #272f3f; border-bottom-color: white; font-size: 13px; color:white; font-weight:bold;}

#top_menu {top:-12px; height:27px;}

#border_main-feature{top:-27px; height:3px; display:block;}



#title_welcome {background: url('/images/title_welcome.png') no-repeat 0 0; width:152px; height:18px; display: block;}

#nav li {     	float:left;
		display:block;                
                width:110px;
                list-style: none;
                border-left: 1px solid white;
                *+ position: relative;
                *+ z-index: 10;
	}
#nav li a {     display:block;
		font-weight:bold;
                font-size: 13px;
		color:#fff;
                height:27px;
		text-align:center;
                vertical-align: bottom;
                text-decoration:none;
          }
#nav li a:hover {
                    
                    height:27px;
                    background-color: #364563;
                }
#nav a.selected {   color:#fff;}
#nav ul {
                    display:none;
                    margin:0 0 0 -1px;                
                    list-style:none;
	}
#nav ul li {
                    height:27px;
                    float:left;
                    border-top:0px solid #fff;
           }
#nav ul a {
                display:block;
		height:27px;		
		color:#fff;
          }

#link_menu{
    

}
#table_titles, #table_links{
    list-style:none;
    position:relative;
    left:5px;
}
#link_titles{
    background-color:#e7e7e7;
    font-size: 13px;
    font-weight:bold;
    color: #999999;
    width:100%;
}
#link_links{
    background-color:#f5f4f3;
    font-size: 11px;
    margin-left:0px;
    color: #999999;
    width:100%;
}
#table_titles{
    background-color:#e7e7e7;
    width:600px;
    vertical-align:top;
}
#table_links{
    background-color: #f5f4f3;
    width:600px;
    vertical-align:top;
    padding-top:4px;
}
#table_titles td, #table_links td{
    
}
#table_titles span{
    font-size:13px;
}
#table_links li{
    font-size:11px;
    color:#999999;
    text-decoration:none;
    margin-top: 6px;
    margin-bottom:6px;
}
#table_links td{
    position:relative;
    
}
#table_links li a{
    font-size:11px;
    color:#999999;
    text-decoration:none;
    position:relative;
    left:-2px;

    *+ left:-15px;
}
#table_links li a:hover{
    font-size:11px;
    color:#999999;
    text-decoration:underline;
    position:relative;
    left:-2px;

    *+ left:-15px;
}


#services {margin-top:25px; margin-bottom: 40px;}
#services td {width:33%; height:22px; border-bottom:1px #d0d0d0 solid; padding-left:2px; padding-right:10px;}
#products {position:relative; left: -2px;}
#clients {position:relative; left: 1px;}
#footer {font-size:11px; width:998px; margin-left:auto; margin-right:auto; height:50px; color:#888; display:block;}




/* ---- MAIN FEATURE ---------------------------------------------------------*/

#arrow_left, #arrow_right {
    position:relative;
    top:140px;
    border: 0px solid #ffffff;
    display:block;
    z-index: 999;
    cursor:pointer;
}
#arrow_left {
    width:46px;
    height:74px;
    background-position: top;
    display:block;
    border: 0px solid #ffffff;
    outline-style:none;
    position:relative;

    left:10px;
    background-image:url(../images/feature_arrow_left_up.png); /*path to the sprite*/
}
#arrow_left:hover {
    width:46px;
    height:74px;
    background-position: bottom;
    display:block;
    outline:none;
    position:relative;
    background-image:url(../images/feature_arrow_left_down.png); /*path to the sprite*/
}
#arrow_right {
    width:46px;
    height:74px;
    background-position: top;
    display:block;
    border: 0px solid #ffffff;
    outline:none;
    position:relative;
    right:10px;
    
    background-image:url(../images/feature_arrow_right_up.png); /*path to the sprite*/
}
#arrow_right:hover {
    width:46px;
    height:74px;
    background-position: bottom;
    display:block;
    outline:none;    
    background-image:url(../images/feature_arrow_right_down.png); /*path to the sprite*/
}

#menu1{
    background-image: url('../images/support_feature.png');
    background-repeat: no-repeat;
    height:374px;
    width:856px;
    color:#666;
    font-size: 11px;
}
#menu2{
    background-image: url('../images/peap_feature.png');
    background-repeat: no-repeat;
    height:374px;
    width:856px;
    color:#666;
    font-size: 11px;
}
#menu3{
    background-image: url('../images/pep_feature.png');
    background-repeat: no-repeat;
    height:374px;
    width:856px;
    color:#666;
    font-size: 11px;
}


#menu1_content{
    position:relative;
    top:0px; /*45px*/
    left:0px; /*20px*/    
    /*border: 1px #000 dashed;*/
}

/* get rid of those system borders being generated for A tags */
a:active {  outline:none; }
:focus {   -moz-outline-style:none;}
/* everything is constructed with a single background image */
/* root element for tabs */
#flowtabs {
	/* dimensions */
	width:100%;
	height:31px !important;
	margin:0 !important;
	padding:0;

	/* IE6 specific branch (prefixed with "_") */
	_margin-bottom:-2px;
}

/* single tab */
#flowtabs li {
	float:left;
	margin:0;
	padding:0;
	text-indent:0;
	list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
	background: url(/tools/img/tabs/blue_panes.jpg) no-repeat;
	display:block;
	height: 31px;
	width: 189px;
	padding:0px;
	margin:0px;

	/* font decoration */
	color:#000;
	font-size:12px;
	line-height:33px;
	text-align:center;
	text-decoration:none;
}

/* adjust the background image position on each tab */
#flowtabs #t1 		{ background-position: 0 0; }
#flowtabs #t2 		{ background-position: -189px 0; }
#flowtabs #t3 		{ background-position: -378px 0; }
#flowtabs #t4 		{ background-position: -567px 0; width:192px;}

/* mouseover state */
#flowtabs a:hover 	{ color:#fff; }
#flowtabs #t1:hover 	{ background-position:      0 -33px; }
#flowtabs #t2:hover 	{ background-position: -189px -33px; }
#flowtabs #t3:hover 	{ background-position: -378px -33px; }
#flowtabs #t4:hover 	{ background-position: -567px -33px; }

/* currently selected tabs */
#flowtabs a.current		{ cursor:default; color:#fff; line-height:34px; }
#flowtabs #t1.current { background-position:      0 -66px; }
#flowtabs #t2.current { background-position: -189px -66px; }
#flowtabs #t3.current { background-position: -378px -66px; }
#flowtabs #t4.current { background-position: -567px -66px; }
/* panes */
#flowpanes {
	/*background: url(/images/feature_panel.png) no-repeat 0 -100px;*/
	/*width:100%;*/
        width:922px;
	height:429px;
        /*border:1px #000 dashed;*/
        position:relative;        
        left:41px;
}
/* single pane */
#flowpanes div {
	display:none;	
	/*margin:20px 29px;*/
        margin:0px 29px;
}

/* some decorations for elements inside single pane */
#flowpanes div h2 {
	font-weight:normal;
	color:#ddd;
	letter-spacing:1px;
	margin:10px 0 0 0;
	font-size:22px;
}

#flowpanes a { color:#666; font-size:14px; font-weight:bold; }
#flowpanes p, #flowpanes samp { color:#666; }
#flowpanes .narrow { padding-right:160px; }

/* FORM COMPONENTS - (SEE peap.js : CUSTOM FORM ELEMENTS */
.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(/images/components_checkbox.gif) no-repeat;
	display: block;
	clear: left;
	float: left;
}
.radio { background: url(/images/components_radio.gif) no-repeat; }
.select {

	position: absolute;
        /*top:25px;*/
	width: 150px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
	height: 25px;
	padding: 1px 24px 0 8px;
	color: #999;
	font: 14px arial,sans-serif;
        font-weight:normal;
	background: url(components_select.gif) no-repeat;
	overflow: hidden;
}
textarea{
        font-family: Arial, Verdana, Helvetica, sans-serif;        
        background: #fff;
        color: #000000;
        font-weight:bold;                
	
        max-width:502px;
        min-width:502px;
        min-height:120px;
        max-height:120px;

        padding-left:3px;

        position:relative;
        left:-2px;

        border: 1px #d0d0d0 solid;
        border-bottom:1px #999 solid;

        resize:none;
}

/* ---------------------------------------------------------------------------*/
/* CLIENT :index.php */
/* ===========================================================================*/

#client_index{
    border-top:1px #d0d0d0 solid;
    padding-bottom:15px;
    padding-top:15px;
}
#client_index td{ 
}
.client_img{
    max-width:200px;
    min-width:200px;
    min-height:200px;
    vertical-align:top;
}
.client_content{
    min-width: 400px;
    max-width: 400px;
    vertical-align:top;
}


/*---- NETWORK MANAGEMENT ----------------------------------------------------*/
#network-management-content { font-size:13px; margin-left:25px; margin-right:25px; margin-bottom:40px;}
#network-management-main {background-color:white; width:948px; margin-right:25px; margin-left:25px; display:inline-block; margin-bottom:50px;}
.network-management-icons {width:101px; height:68px; margin-top:15px; margin-right:15px; margin-bottom:15px; float:left;}
.display {display:inline-block;}

/*---- CONTACT US ------------------------------------------------------------*/
#contact-us-main {font-size:13px; background-color:white; width:898px; margin-right:50px; margin-left:50px; display:inline-block; margin-bottom:50px;}
#table-contact-us {border:0px dashed #000; margin-bottom:0px; margin-top:40px;}
#table-contact-us td {width:200px; text-align: left; border:0px dashed #000;}
#table-contact-us label {font-weight:bold;}


/* ---------------------------------------------------------------------------*/
/* BUTTONS */
/* ===========================================================================*/
.btn_clientswebsite {
    width:125px;
    height:35px; /*the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_clientswebsite.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.btn_clientswebsite:hover{
    width:125px;
    background-position: bottom;
    height:35px;
    background-image:url(../images/btn_clientswebsite.png) no repeat;
}
.btn_trydemo_peap {
    width:125px;
    height:35px; /*the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_trydemo_peap.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.btn_trydemo_peap:hover{
    width:125px;
    background-position: bottom;
    height:35px;
    background-image:url(../images/btn_trydemo_peap.png) no repeat;
}
.btn_trydemo_pep {
    width:125px;
    height:35px; /*the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_trydemo_pep.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.btn_trydemo_pep:hover{
    width:125px;
    background-position: bottom;
    height:35px;
    background-image:url(../images/btn_trydemo_pep.png) no repeat;
}

.btn_send {
    width:84px;
    height:32px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_send.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.btn_send:hover{
    width:84px;
    background-position: bottom;
    height:32px;
    background-image:url(/images/btn_send.png) no repeat;
}
.btn_support {
    position:relative; top:0px;
    width:125px;
    height:35px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_support.png); /*path to the sprite*/
    background-position: bottom; /* background position (in combination with the height!) */
}
.btn_support:hover{
    width:125px;
    background-position: top;
    height:35px;
    background-image:url(../images/btn_support.png) no repeat;
}
.btn_peap {
    position:relative; top:0px;
    width:125px;
    height:35px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_peap.png); /*path to the sprite*/
    background-position: bottom; /* background position (in combination with the height!) */
}
.btn_peap:hover{
    width:125px;
    background-position: top;
    height:35px;
    background-image:url(/images/btn_peap.png) no repeat;
}
.btn_pep {
    position:relative; top:0px;
    width:125px;
    height:35px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_pep.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.btn_pep:hover{
    width:125px;
    background-position: bottom;
    height:35px;
    background-image:url(/images/btn_pep_over.png) no repeat;
}
.button_add {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_add.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_add:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_add.png) no repeat;
}
.button_close {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_close.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_close:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_close.png) no repeat;
}
.button_send {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_send.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_send:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_send.png) no repeat;
}
.button_search {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(../images/btn_search.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_search:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(../images/btn_search.png) no repeat;
}
.button_password {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_password.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_password:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_password.png) no repeat;
}
.button_save {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/save_btn.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_save:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/save_btn.png) no repeat;
}
.button_update {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_update.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_update:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_update.png) no repeat;
}
.button_contacts {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_contacts.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_contacts:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_contacts.png) no repeat;
}
.button_ask {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/ask_btn.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_ask:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/ask_btn.png) no repeat;
}
.button_reset {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/reset_btn.jpg); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_reset:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/reset_btn.jpg) no repeat;
}
.button_password {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_password.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_password:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_password.png) no repeat;
}
.button_preview {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_preview.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_preview:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/btn_preview.png) no repeat;
}
.button_return {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/return_btn.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_return:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/return_btn.png) no repeat;
}
.button_create {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/create_btn.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_create:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/create_btn.png) no repeat;
}
.button_print {
    width:98px;
    height:38px; /* the height is not the height of the whole sprite, but the height of one single button */
    display:block;
    background-image:url(/images/btn_print.png); /*path to the sprite*/
    background-position: top; /* background position (in combination with the height!) */
}
.button_print:hover{
    width:98px;
    background-position: bottom;
    height:38px;
    background-image:url(/images/print_btn.png) no repeat;
}