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

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

/* A container should group all your columns. */
.container {
  width: 945px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid {
	background: url(css/src/grid.png);
}

/* Body margin for a sensile default look. */
body {
	margin-top: 0em;
	margin-right: 0;
	margin-bottom: 0em;
	margin-left: 0;
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {
	float:left;
	margin-right: 15px;
	margin-bottom: 10px;
}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 25px;}
.span-2  { width: 65px;}
.span-3  { width: 105px;}
.span-4  { width: 145px;}
.span-5  { width: 185px;}
.span-6  { width: 225px;}
.span-7  { width: 265px;}
.span-8  { width: 305px;}
.span-9  { width: 345px;}
.span-10 { width: 385px;}
.span-11 { width: 425px;}
.span-12 { width: 465px;}
.span-13 { width: 505px;}
.span-14 { width: 545px;}
.span-15 { width: 585px;}
.span-16 { width: 625px;}
.span-17 { width: 665px;}
.span-18 { width: 705px;}
.span-19 { width: 745px;}
.span-20 { width: 785px;}
.span-21 { width: 825px;}
.span-22 { width: 865px;}
.span-23 { width: 905px;}
.span-24, div.span-24 { width: 945px; margin: 0; }


/* Sets up right grid floating and margin. */
div.rspan-1, div.rspan-2, div.rspan-3, div.rspan-4, div.rspan-5, div.rspan-6, div.rspan-7, div.rspan-8, div.rspan-9, div.rspan-10, div.rspan-11, div.rspan-12, div.rspan-13, div.rspan-14, div.rspan-15, div.rspan-16, div.rspan-17, div.rspan-18, div.rspan-19, div.rspan-20, div.rspan-21, div.rspan-22, div.rspan-23, div.rspan-24 {float:right;}


/* Use these classes to set the width of a column. */
.rspan-1  { width: 25px;}
.rspan-2  { width: 65px;}
.rspan-3  { width: 105px;}
.rspan-4  { width: 145px;}
.rspan-5  { width: 185px;}
.rspan-6  { width: 225px;}
.rspan-7  { width: 265px;}
.rspan-8  { width: 305px;}
.rspan-9  { width: 345px;}
.rspan-10 { width: 385px;}
.rspan-11 { width: 425px;}
.rspan-12 { width: 465px;}
.rspan-13 { width: 505px;}
.rspan-14 { width: 545px;}
.rspan-15 { width: 585px;}
.rspan-16 { width: 625px;}
.rspan-17 { width: 665px;}
.rspan-18 { width: 705px;}
.rspan-19 { width: 745px;}
.rspan-20 { width: 785px;}
.rspan-21 { width: 825px;}
.rspan-22 { width: 865px;}
.rspan-23 { width: 905px;}
.rspan-24, div.rspan-24 { width: 945px; margin: 0; }







/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}



/* Border on right hand side of a column. */
div.border {
  padding-right:6.5px;
  margin-right:7.5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:20.5px;
  margin-right:17.5px;
  border-right: 1px solid #eee;
}



/* Border on right hand side of a column. */
div.borderl {
  padding-left:6.5px;
  margin-left:7.5px;
  border-left: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborderl {
  padding-left:20.5px;
/*  margin-left:17.5px;*/
  border-left: 1px solid #eee;
}




/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}
.pull-5 { margin-left: -200px;}
.pull-6 { margin-left: -240px;}
.pull-7 { margin-left: -280px;}
.pull-8 { margin-left: -320px;}
.pull-9 { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}
.pull-20 { margin-left: -800px;}
.pull-21 { margin-left: -840px;}
.pull-22 { margin-left: -880px;}
.pull-23 { margin-left: -920px;}
.pull-24 { margin-left: -960px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}


.push-1 { margin: 0 -40px 1.5em 40px;}
.push-2 { margin: 0 -80px 1.5em 80px;}
.push-3 { margin: 0 -120px 1.5em 120px;}
.push-4 { margin: 0 -160px 1.5em 160px;}
.push-5 { margin: 0 -200px 1.5em 200px;}
.push-6 { margin: 0 -240px 1.5em 240px;}
.push-7 { margin: 0 -280px 1.5em 280px;}
.push-8 { margin: 0 -320px 1.5em 320px;}
.push-9 { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}
.push-20 { margin: 0 -800px 1.5em 800px;}
.push-21 { margin: 0 -840px 1.5em 840px;}
.push-22 { margin: 0 -880px 1.5em 880px;}
.push-23 { margin: 0 -920px 1.5em 920px;}
.push-24 { margin: 0 -960px 1.5em 960px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}



/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box {
	padding: 25px;
	margin-bottom: 1.5em;
	background-color: #F4F4F4;
	border: 2px dashed #BBBBBB;
}

/* Use this to create a horizontal ruler across a column. */
hr {
	clear: both;
	float: none;
	width: 100%;
	height: .1em;
	margin: 0 0 1.45em;
	border: none;
	background-color: #CCCCCC;
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }


/*Custom class*/

.para-2em {
	line-height: 1.8em;
	font-size: 12px;

}

.para-who {
	line-height: 1.2em;
	font-size: 12px;
	text-align: left;

}

.para-who a{
	line-height: 1.2em;
	font-size: 12px;
	text-align: left;
	text-decoration: underline;
	color: #CC0000;

}

.para-who a:hover {
	text-decoration: none;
	color: #CC0000;

}





.menu-footer {
	padding-top: 20px;
	color: #FFFFFF;
	font-size: 11px;

}

.menu-footer a           {
	text-decoration: none;
	color: #FFFFFF;
}
.menu-footer a:focus, 
a:hover     {
	text-decoration: underline;
	color: #FFFFFF;
}






.menu-footer-right {
	padding-top: 20px;
	color: #FFFFFF;
	text-align: right;
	font-size: 11px;
}

.image-help {
	margin-top: 20px;
	background-image:url(../images/veovend-help.jpg);
	height: 220px;
}

.text-tour {
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 42px;
	padding-left: 0px;
	padding-right: 5px;

}
.dist-title {
	font-size: 14px;
	font-weight: bold;
	color: #D50A06;
	margin-bottom: 10px;
	padding-top: 5px;

}
.manf-title {
	font-size: 14px;
	font-weight: bold;
	color: #4498F0;
	margin-bottom: 10px;
	padding-top: 5px;

}
.oper-title {
	font-size: 14px;
	font-weight: bold;
	color: #B0DE33;
	margin-bottom: 10px;
	padding-top: 5px;

}



.text-tour-veovend {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 27px;
	padding-left: 40px;

}
.red-text {
	color: #C60000
}


.menu-top {
	color: #000000;
	text-decoration: none;
	text-align: right;
}

.menu-top a           {
	color: #666666;
	text-decoration: none;
}

.menu-top a:focus {
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #0099FF;
	text-decoration: none;
} 
.menu-top a:hover {
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #0099FF;
	text-decoration: none;
}

.menu-footer-down {
	padding-top: 30px;
	color: #FFFFFF;
	font-size: 11px;
	float: left;
	margin-left: 15px;

}
.menu-footer-down a           {
	text-decoration: underline;
	color: #FFFFFF;
}
.menu-footer-down a:focus, 
a:hover     {
	text-decoration: none;
	color: #FFFFFF;
}

.menu-right-title {
	font-size: 1.2em;
	line-height: 1.25;
	margin-bottom: 5px;
	font-weight: bold;
}

.menu-right-text {
	font-size: 11px;

}

.btn-more-info {
	float: right;
	width: 140px;
	background-image: url(../images/btn-image.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 25px;
	padding-top: 8px;
	text-align: center;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;

}

.btn-more-info a           {
	text-decoration: none;
	color: #FFFFFF;
}
.btn-more-info a:focus, 
a:hover     {
	text-decoration: underline;
	color: #FFFFFF;
}


.right-column {
	width: 270px;
	text-align:right;
}

.para-who-real {
	line-height: 1.2em;
	font-size: 11px;
	text-align: left;
	color: #999999;

}

.demo-box {
	line-height: 1.8em;
	font-size: 12px;
	background-color: #F4F4F4;

}

.btn-sign-up {
	float: left;
	width: 140px;
	background-image: url(../images/btn-image.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 28px;
	padding-top: 5px;
	text-align: center;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	margin-left: 15px;
	margin-top: 10px;

}

.btn-sign-up a           {
	text-decoration: none;
	color: #FFFFFF;
}
.btn-sign-up a:focus, 
a:hover     {
	text-decoration: underline;
	color: #FFFFFF;
}


.vs-1 {
	padding-top: 20px;
}

.vs-2 {
	padding-top: 60px;
}

.vs-3 {
	text-align:right;
}

.vs-4 {
	height: 60px;
	display: none;
}

.vs-5 {
	margin-top:5px; 
	margin-right:0px; 
	padding-right:0px;
}

.vs-6 {
	height: 20px;
	width: 540px;
	float: right;
}

.vs-7 {
	height: 18px;
}

.vs-8 {
	height: 80px;
}

.vs-9 {
	height: 18px;
}

.vs-10 {
	height: 550px;
}

.vs-11 {
	margin-top: 18px;
}

.vs-12 {
	margin-bottom:40px;
}

.vs-13 {
	text-align:left; 
	margin-top: 18px;
}

.vs-14 {
	height: 95px;
}

.vs-15 {
	margin-bottom:10px;
}

.vs-16 {
	height: 80px;
}

.vs-17 {
	height: 95px;
}

.vs-18 {
	margin-top: 10px;
	float: left;
}

.vs-19 {
	height: 200px;
}

.signup-box {
	margin-bottom:40px;
	padding: 1.5em 1.5em 1.5em 1.5em;
	height: 300px;
	margin-top:18px;
}

.bg-footer-down {

}
.vs-colour {
	background-color:#CC0099;
}
.veovend-logo-small {
	text-align:right;
	margin-top:48px;
}
.su-1 {
	padding-left:15px;
}
.su-2 {
	margin-left:15px;
}
.su-3 {
	margin-left:15px;
}
.su-4 {
	text-align:left; 
	margin-top: 18px;
}
.su-5 {
	height: 95px;
}
.su-6 {
	margin-bottom:10px;
}
.su-7 {
	height: 80px;
}
.au-colour {
	background-color:#00aba9;
}
.au-1 {
	text-align:left;
}
.au-2 {
	margin-top: 18px;
}
.cu-colour {
	background-color:#FF6600;
}
.cu-1 {
	height: 90px; 
	margin-top: 18px;
}
.cu-2 {
	height: 55px;
}
.d-1 {
	background-color:#FF0033;
}
.d-2 {
	text-align:center;
}
.m-colour {
	background-color:#3366CC;
}
.o-colour {
	background-color:#99CC00;
}
.i-colour {
	background-color:#424B52;
}
.i-1 {
	height: 10px;
}
.i-2 {
	height: 230px;
}
.i-3 {
	margin-top:5px;
}

ul.menu-top-n {
	list-style-type: none;
	display: block;
	float: left;
	list-style-image: none;
	margin: 0px;
	width: 545px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
}
ul.menu-top-n li{
	list-style-type: none;
	float: left;
	padding-left: 7px;
	margin-left: 7px;
	text-align: right;
	margin-right: 0px;
	padding-right: 0px;
	clear: none;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	padding-bottom: 0px;
	margin-bottom: 0px;
	line-height: 1.3em;
}

a.sitemap {
	text-decoration:underline;
	color:#000000;
}

a.sitemap:hover{
	text-decoration:none;
	color:#000000;
}