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

body		{ overflow-x:hidden; overflow-y:visible;}

#slickbox {	height: 50px;}	

#clickMessages { position: absolute; display:block;clear:none;top:10px; right:10px;color:green;}

            .bubblemenu > div {
                width: 205px;
                min-height: 1px;
			    position: absolute;
                margin-left:-8px;
                padding: 5px;
				visibility:hidden;
                opacity: 0;
				background: url(images/delivery/gradient.jpg) repeat-x #073c48;
				border: #fff 1px solid;
				
				/* Setting the border-radius property for all Browsers */
                -moz-border-radius: 5px; /* Firefox */
                -webkit-border-radius: 5px; /* Safari and Chrome */
                border-radius: 5px; /* Browsers that Support it like Opera */
				
				/* Setting the box-shadow property for all Browsers */
                -moz-box-shadow: 0 0 8px gray; /* Firefox */
                -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
				filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
                box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

				/* Setting the transition property for all Browsers */
				-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out; /* Opera */
                transition: all 0.5s ease-in-out;}
            
			.bubblemenu p {
				font-size:12px;
				line-height: 15px;
  				text-align: center;
				color:#fff;}
			
            .bubblemenu:hover > div {
				visibility:visible;
                opacity: 1;
                margin-top:-100px;
				/* Setting the transition property for all Browsers */
				-moz-transition: all 0.5s ease-in-out; /* Firefox */
                -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
                -o-transition: all 0.5s ease-in-out;  /* Opera */
                transition: all 0.5s ease-in-out; /* Browsers that Support it */}


/* bubble up */
#second {min-height:355px; margin:0 auto; padding:20px 0px 0px;}
#second h2 {margin-left:20px;}
.second-par {padding:10px 20px 0px;}
.shade	{-moz-box-shadow: 1px 2px 15px #ccc;-webkit-box-shadow: 1px 2px 15px #ccc;box-shadow: 1px 2px 15px #ccc;}
.cursor {cursor:default;}

/* first */
#home-screen {background:url(images/delivery/home-screen.jpg) no-repeat; width:510px; height:357px; margin:30px auto; position:relative;}
#list-button img {    position: absolute; top: 230px; left: 402px; }
#list-button img:hover { position:absolute; top:220px; left: 390px;}
#invoice-button img {    position: absolute; top: 97px; left: 154px; }
#invoice-button img:hover { position:absolute; top:87px; left:144px;}
	
.enlarge {
	height: 82px;
    width: 82px;
	-webkit-transition: -webkit-transform .5s ease-in-out;
	-webkit-transition-duration: .5s;
	transition: all 0.5s ease-in-out;}
.enlarge:hover {
	width: 100px;
    height: 100px;
    -webkit-transform:scale(1.2);
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition: all 0.5s ease-in-out;
	z-index: 10;
	cursor: default;}

	
span {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#444444; line-height:2em; text-align:justify; font-weight:bold;}
a span {display:none; text-decoration:none;}
div#list-button a:hover span {
   display: block;	
   position: absolute; 
   top: 350px; left: -15px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}
div#invoice-button a:hover span {
   display: block;	
   position: absolute; 
   top: 350px; left: -15px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}
div#list-icon a:hover span {
   display: block;	
   position: absolute; 
   top: 320px; left: -62px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}
div#list-stat a:hover span {
   display: block;	
   position: absolute; 
   top: 150px; left: -415px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}
div#line-pic a:hover span {
   display: block;	
   position: absolute; 
   top: 160px; left: -35px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}
div#delivery-pic a:hover span {
   display: block;	
   position: absolute; 
   top: 160px; left: -35px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}
div#fingers a:hover span {
   display: block;	
   position: absolute; 
   top: 105px; left: -246px; 
   width: 400px;
   padding: 5px; 
   margin: 10px; 
   z-index: 100;
   text-decoration:none;}


/* second */
#list-screen {background:url(images/delivery/list-screen.jpg) no-repeat; width:510px; height:357px; margin:30px auto; position:relative;}
#list-icon { position:absolute; top:40px; left:60px;}
#list-icon:hover { top:30px; left:48px;}

#list-stat { position:absolute; top:210px; left:410px;}
#list-stat:hover { top:200px; left:400px;}

/* third */
#summary-screen {background:url(images/delivery/summary-screen.jpg) no-repeat; width:510px; height:357px; margin:30px auto; position:relative;}
#list-icon { position:absolute; top:40px; left:60px;}
#list-icon:hover { top:30px; left:48px;}

#list-stat { position:absolute; top:210px; left:410px;}
#list-stat:hover { top:200px; left:400px;}
/* fourth */
#invoice-screen {background:url(images/delivery/invoice-screen.jpg) no-repeat; width:510px; height:357px;}
#invoice-full {background:url(images/delivery/invoice-full.jpg) no-repeat; width:510px; height:357px;}

#fingers { position:absolute; top:255px; left:243px;}
#fingers:hover { top:245px; left:233px;}

/* tabbed */
.inside-tab {width:470px; margin:0 auto; position:absolute; top:155px; left:20px;}
#line-tab { background:url(images/delivery/line-tab.jpg) bottom left; width:510px; height:342px; margin:30px auto; position:relative;}
#line-pic { position:absolute; top:18px; left:0px;}
#delivery-pic { position:absolute; top:18px; left:0px;}

.slideshow { height: 357px; width: 510px; margin:30px auto; }

/* ---------------------------------------------------------------------------------------
   BUTTON-NAV
   --------------------------------------------------------------------------------------- */ 
   .header-bg {
   width:766px;
   height:110px;
   display:block;
   margin:0 auto;
   position:relative;
   }
   .button-bg {
   position:relative;
   margin:0 auto;
   }
   
   #button {
	height: 32px;
	width: 184px;
	position:absolute;
	top:56px;
	right:22px;
	z-index:1000;
	}
	
	ul, li {
		margin:0; 
		padding:0; 
		list-style:none;
	}
	
	.menu_class {
	}
	
	.the_menu {
		display:none;
		width:158px;
		border: 1px solid #1c1c1c;
	}
	
	.the_menu li {
		background-color: #fff;
	}
	
	.the_menu li a {
		color:#085977; 
		text-decoration:none; 
		padding:10px; 
		display:block;
	}
	
	.the_menu li a:hover {
		padding:10px;
		font-weight:bold;
		color: #e29d02;
	}
/* ---------------------------------------------------------------------------------------
   NAV
   --------------------------------------------------------------------------------------- */ 	
	.nav-wrap { 
		height:28px; 
		width:766px;
		position:relative; 
		margin:0px auto;
	}
		/* Example Two */
	#example-two { 
		margin: 0 auto; 
		list-style: none; 
		position: relative; 
		width: 722px;
		text-align:center;
		height:32px;
	}
	#example-two li { 
		display: inline-block; 
	}
	#example-two li a { 
		position: relative; 
		z-index: 200; 
		color: #fff; 
		font-size: 20px;
		display: block; 
		float: left; 
		padding: 3px 15px 4px 16px;
		text-decoration: none;
		text-transform: capitalize;
		font-family:"Trebuchet MS";
	}
	#example-two li a:hover { 
		color: white; 
	}
	#example-two #magic-line-two { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100px; 
		background: #e29d02; 
		z-index: 100; 
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.current_page_item_two a { 
		color: white !important; 
	}
	.ie6 #example-two li, .ie7 #example-two li {
		display: inline;
	}
    .group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
   *:first-child+html .group { zoom: 1; } /* IE7 */
   
   .fmsp-like	{ width:100px; position:absolute; top:65px; left:-40px; opacity:.2; -webkit-transition: opacity .5s ease-in-out;-moz-transition: opacity .5s ease-in-out;-o-transition: opacity .5s ease-in-out;transition: opacity .5s ease-in-out; }
   .fmsp-like:hover { opacity:1; -webkit-transition: opacity .5s ease-in-out;-moz-transition: opacity .5s ease-in-out;-o-transition: opacity .5s ease-in-out;transition: opacity .5s ease-in-out;}