/*==========================================================*/

/*CSS document for Tarkett Connect							*/

/*Author	: Oscar Ang										*/

/*Email	: design@sys-corp.com.au							*/

/*Company	: SysCorp Pty Ltd								*/

/*URL		: www.sys-corp.com.au							*/

/*==========================================================*/





/*==========================================================*/

/* General													*/

/*==========================================================*/

/* font-face */

@font-face {

    font-family: 'DINRegular';

    src: url('../font-face/ff_din_regular-webfont.eot');

    src: url('../font-face/ff_din_regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font-face/ff_din_regular-webfont.woff') format('woff'),

         url('../font-face/ff_din_regular-webfont.ttf') format('truetype'),

         url('../font-face/ff_din_regular-webfont.svg#DINRegular') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'DINBold';

    src: url('../font-face/ff_din_bold-webfont.eot');

    src: url('../font-face/ff_din_bold-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font-face/ff_din_bold-webfont.woff') format('woff'),

         url('../font-face/ff_din_bold-webfont.ttf') format('truetype'),

         url('../font-face/ff_din_bold-webfont.svg#DINBold') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'DINCondensed';

    src: url('../font-face/ff_din_condensed_regular-webfont.eot');

    src: url('../font-face/ff_din_condensed_regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('../font-face/ff_din_condensed_regular-webfont.woff') format('woff'),

         url('../font-face/ff_din_condensed_regular-webfont.ttf') format('truetype'),

         url('../font-face/ff_din_condensed_regular-webfont.svg#DINCondensed') format('svg');

    font-weight: normal;

    font-style: normal;



}





body {

	font: 12px normal Arial, Helvetica, sans-serif;

	background: #fff url(../images/bg/body.gif) left top repeat-x;

	margin: 0;

	padding: 0;

}



h1, h2, h3, h4, h5 { 

	font-family: "DINBold", Arial, Helvetica, sans-serif;

	font-weight: normal;

	margin: 0; 

	padding: 0; 

}



img { border: none; }



table { margin: 0 0 15px 0; font-size: 90%; }

table th { background: #8d9aa1; color: #fff; }

table tr.even { background: #e5e5e5; }







/*==========================================================*/

/* Layout container											*/

/*==========================================================*/

#container {

	float: left;

	position: relative;

	width: 1000px;

	height: auto;

	margin: 0;

	padding: 0;

}



#top, #maincontent, #footer {

	float: left;

	margin: 0;

	padding: 0;

	clear: both;

}

	#top {

		width: 100%;

		height: 21px;

		background: url(../images/bg/intro-right.gif) right center no-repeat;

	}

	

	#maincontent {

		width: 100%;

		border-bottom: 1px solid #8d9aa1;

		background: url(../images/bg/left.gif) repeat-y;

	}

	

	#footer {

		width: 100%;

		height: 21px;

	}







/*==========================================================*/

/* Top Layout												*/

/*==========================================================*/









/*==========================================================*/

/* Main Content Layout										*/

/*==========================================================*/

#leftcontent {

	float: left;

	width: 240px;

	margin: 0;

	padding: 0 0 15px;

	background: #a39d87;

}



#rightcontent {

	float: left;

	/*width: 720px;*/

	position: relative;

	width: 720px;

	min-height: 400px;

	margin: 0;

	padding: 20px;

	background: #fff;

}







/*==========================================================*/

/* Left Content Sub Layout									*/

/*==========================================================*/

#logo {

	display: block;

	width: 240px;

	height: auto;

	margin: 0;

	padding: 0;

}



#menu {

	float: left;

	display: block;

	width: 240px;

	height: auto;

	margin: 0;

	padding: 0;

}



#legend {

	float: left;

	display: block;

	width: 220px;

	height: auto;

	margin: 0;

	padding: 0 10px;

	color: #fff;

}







/*==========================================================*/

/* General Classes											*/

/*==========================================================*/

.valid { color: #000022; font-weight: bold; }

.invalid { color: #ff0000; font-weight: bold; }



a.m_image {

	display: block;

	width: 100px;

	height: 20px;

}



span.welcome {

	float: left;

	display: block;

	width: auto;

	height: 18px;

	margin: 0;

	padding: 3px 25px 0 25px;

	color: #fff;

	font-style: italic;

	background: url(../images/bg/intro-left.gif) left center no-repeat;

}



span.copyright {

	float: right;

	display: block;

	width: auto;

	height: 18px;

	margin: 0;

	padding: 3px 5px 0 0;

	font-size: 90%;

	color: #8d9aa1;

}



span.label {

	display: block;

	margin: 10px 0 5px 0;

	padding: 0;

	font-weight: bold;

}



div.upload {

	position: relative;

}



div.fakeinput {

	position: absolute;

	top: -10px;

	left: 0;

	z-index: 111;

}



/*div.pagination {

	display: block;

	width: 100%;

	height: 40px;

	margin: 15px 0;

	padding: 0;

	text-align: center;

}

	div.pageleft, div.pagemid, div.pageright {

		float: left;

		height: 40px;

		margin: 0;

		padding: 0;

	}

	div.pageleft {

		width: 200px;

		text-align: left;

	}

	

	div.pagemid {

		width: 480px;

		text-align: center;

	}

		div.pagemid label {

			display: inline-block;

			width: auto;

			font-weight: bold;

			margin-right: 5px;

			color: #8d9aa1;

		}



	div.pageright {

		width: 200px;

		text-align: right;

	}*/

	

ul.login {

	margin: 25px 0 0 0;

	padding: 0;

	list-style: none;

}

	ul.login li {

		padding: 0 0 0 15px;

		margin: 0 0 10px 0;

		background: url(../images/icons/list-arrow.gif) left center no-repeat;

	}

	

	ul.login li a { color: #666; text-decoration: none; }

	ul.login li a:hover { color: #8d9aa1; text-decoration: none; }





ul.conditions {

	margin: 0 0 0 15px;

	padding: 0;

	font-size: 90%;	

}



ul.conditions li { margin-bottom: 5px; }









/*==========================================================*/

/* Forms													*/

/*==========================================================*/

label {

	display: block;

	width: 100px;

	margin: 0 0 5px 0;

	padding: 8px 5px;

}

	label.inline {

		display: inline-block; 

		margin: 0 5px 5px 10px;

	}

	label.auto { width: auto; }

	label.error { 

		display: inline-block;

		width: auto; 

		margin: 0 5px 5px 10px;

		color: #ff0000; 

	}

	label.error.success { display: none; }



input {

	display: block;

	width: 250px;

	margin: 0 0 5px 0;

	padding: 8px 5px;

	border: 1px solid #8d9aa1;

	background: #e5e5e5;		

}

	input.inline { 

		display: inline-block; 

		margin-right: 15px;

	}

	input.nomargin { margin: 0; } 

	

	input.file {

		position: relative;

		width: 450px;

		/*filter: alpha(opacity: 0);

		opacity: 0.0;*/

		z-index: 77;

	}

	input.fakefile {

		position: absolute;

		top: 0px;

		left: 0px;

		width: 350px;

		z-index: 76;

	}

	

	input.search {

		display: inline-block;

		width: 200px;	

		margin: 0;

	}

	

	input.error {

		border-color: #ff0000;	

	}

	

	input.valid {

		font-weight: normal;

		color: #000;	

	}

	

	input.chkbox {

		width: auto;

		margin: 0;

		padding: 0;

		border: 0;

		background: none;

	}



select {

	display: block;

	width: 260px;

	margin: 0 0 5px 0;

	padding: 8px 3px;

	border: 1px solid #8d9aa1;

	background: #e5e5e5;		

}

	select.inline { display: inline-block; margin-right: 15px; }

	select.auto { width: auto; }

	select.page {

		display: inline-block;

		width: auto;

		padding: 3px;

		margin: 0 auto;	

	}
	
	select.company {

		display: inline-block;

		width: 260px;

		padding: 3px;

		margin: 0 auto;	

	}

	select.error {

		border-color: #ff0000;	

	}

	select.valid {

		font-weight: normal;

		color: #000;	

	}

	





button {

	display: block;

	position: relative;

	width: 150px;

	height: 40px;

	margin: 15px 0;

	padding: 5px 10px;

	border: 1px solid #8d9aa1;

	cursor: pointer;

	font-size: 14px;

	font-weight: bold;

	color: #404e54;

	background: #c4c4c4;

	background: -moz-linear-gradient(top,  #aaa,  #ddd);

	background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ddd));

	background: -webkit-linear-gradient(#aaa, #ddd);

	background: -ms-linear-gradient(#aaa, #ddd);

	background: -o-linear-gradient(#aaa, #ddd);

	background: linear-gradient(#aaa, #ddd);

	-pie-background: linear-gradient(#aaa, #ddd);

	behavior: url(PIE.htc);

}

	button.inline { 

		display: inline-block; 

		margin-right: 15px;

	}

	button.select { width: auto; height: 35px; padding: 5px; top: 2px; }

	button.btnsearch { 

		display: inline-block;

		height: 34px;

		width: auto; 

		top: 1px;

		margin: 0;

	}

	button.slim {

		display: inline-block;

		width: auto;

		height: auto;

		font-size: 12px;

		margin: 0;

		padding: 3px 10px 4px 10px;

	}



button:hover {

	color: #404e54;

	background: #bbb;

	background: -moz-linear-gradient(top,  #aaa,  #ccc);

	background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ccc));

	background: -webkit-linear-gradient(#aaa, #ccc);

	background: -ms-linear-gradient(#aaa, #ccc);

	background: -o-linear-gradient(#aaa, #ccc);

	background: linear-gradient(#aaa, #ccc);

	-pie-background: linear-gradient(#aaa, #ccc);

	behavior: url(PIE.htc);

}



#frmSearch {

	float: right;

	position: relative;

	width: auto;

	height: auto;

	top: -10px;

}



#frmUpload {

	position: relative;

}





/*==========================================================*/

/* Navigation												*/

/*==========================================================*/

/* Main Menu */

ul.menu {

	display: block;

	width: 240px;

	margin: 0 0 25px 0;

	padding: 0;

	list-style: none;

}



ul.menu li {

	display: block;

	width: 220px;

	height: auto;

	margin: 0;

	padding: 0 10px;

}

	ul.menu li:hover { background: #8d9aa1; }



ul.menu li a { 

	display: block;

	width: 220px;

	margin: 0;

	padding: 8px 0;

	color: #fff; 

	text-decoration: none; 

	border-bottom: 1px solid #bdb69d;

}





/* button Menu */

ul.buttonmenu {

	float: left;

	display: block;

	width: 100%;

	margin: 0 0 0 0;

	padding: 0;

	list-style: none;

}



ul.buttonmenu li {

	float: left;

	display: block;

	width: 260px;

	height: auto;

	margin: 0 15px 15px 0;

	padding: 10px;

	border: 1px solid #8d9aa1;

	background: #c4c4c4;

	background: -moz-linear-gradient(top,  #aaa,  #ddd);

	background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ddd));

	background: -webkit-linear-gradient(#aaa, #ddd);

	background: -ms-linear-gradient(#aaa, #ddd);

	background: -o-linear-gradient(#aaa, #ddd);

	background: linear-gradient(#aaa, #ddd);

	-pie-background: linear-gradient(#aaa, #ddd);

	behavior: url(PIE.htc);

}



ul.buttonmenu li a {

	display: block;

	width: 200px;

	height: auto;

	margin: 0;

	padding: 15px 0 15px 60px;

	font-size: 18px;

	font-weight: bold;

	color: #404e54;

	text-decoration: none;

}

	ul.buttonmenu li a.admin { background: url(../images/icons/settings.png) left center no-repeat; }

	ul.buttonmenu li a.view { background: url(../images/icons/view.png) left center no-repeat; }

	ul.buttonmenu li a.pass { background: url(../images/icons/lock.png) left center no-repeat; }

	ul.buttonmenu li a.logout { background: url(../images/icons/logout.png) left center no-repeat; }

	ul.buttonmenu li a.upload { background: url(../images/icons/add.png) left center no-repeat; }

	ul.buttonmenu li a.stock { background: url(../images/icons/stock.png) left center no-repeat; }

	ul.buttonmenu li a.ship { background: url(../images/icons/ship.png) left center no-repeat; }

	ul.buttonmenu li a.client { background: url(../images/icons/client.png) left center no-repeat; }

	ul.buttonmenu li a.user { background: url(../images/icons/user.png) left center no-repeat; }

	ul.buttonmenu li a.users { background: url(../images/icons/users.png) left center no-repeat; }

	ul.buttonmenu li a.home { background: url(../images/icons/home.png) left center no-repeat; }

	ul.buttonmenu li a.pdf { background: url(../images/icons/pdf.png) left center no-repeat; }



	ul.buttonmenu li a:hover { color: #8d9aa1; }