@font-face { font-family: 'Arista'; 
src: url('../fonts/z_arista.eot'); 
src: url('../fonts/z_arista.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/z_arista.svg#[z] Arista') format('svg'), 
     url('../fonts/z_arista.woff') format('woff'), 
     url('../fonts/z_arista.ttf') format('truetype'); 
     font-weight: normal; font-style: normal;
 }


.logo-arista
{
	font-family: 'Arista';
	font-size: 250%;
	color:#58bbc2;
	vertical-align: middle;
	text-decoration: none;
}


ul{
	list-style-type: none;
} 

/* Global styling. */

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

a > img {
    border: 0; /* Removes the link border from images in INternet Explorer. */
}

.readonly{
	cursor: text;
}

textarea {
	background-color: white;
	border: 1px solid #aaa;
	border-radius: 5px;
	font-family: arial,sans-serif;
}

.display_inline {
	display: inline;
}

.list_style_none{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.float_left{
	float:left;
}

.float_right{
	float:right;
}

.hide
{
	display:none !important;
}

/* #header and related stylings */

#header {
	color:grey;
	background: whitesmoke;
	min-height: 3em;
	clear:both;
	width:100%;
}

.right_header {
	float: right;
	text-align: right;
	padding-top: 1em;
	padding-left: 5px;
	margin-right: 5px;
}

.left_header {
	float: left;
	text-align: left;
	padding-top: 0em;
}

.right_header .toolbar-item {
	display: inline;
	padding-right: 1em;	
}

.right_header .toolbar-item a{
	color:grey;
}

#logo {
	float:left;
}

#logo img {
	vertical-align:middle
}

#lang img {
	vertical-align:middle
}

.ie7 #header{
	height: 58px;
} 

.ie7 #from{
	margin-left:-28px;
}

.ie7 .thumbsup-action, .ie7 .thumbsup-action-selected {
	
	margin-left : -45px;
}

.ie7 .ui-notify{
	margin-left : 0px;
}

/* 
#search-box is the green background of the search textarea. this hold all the search criteria fields such as main search area, where, when, new  search button and location field
used in index.php
 */
#search-box {
	padding: 0.5em;
	margin-bottom: 1em;
}

.i_need_sub_heading {
	color: black;
	font-weight: bold;
}

#describe-your-need-lead-in, #thumb-up-lead-in, #sendinq-lead-in{
	font-size: 1.5em;
	font-weight: bold;	
}

#thumb-up-lead-in, #sendinq-lead-in {
	display: none;
}

#sendinq-lead-in {
	float: left;
}

#describe-your-need-lead-in span, #thumb-up-lead-in span, #sendinq-lead-in span {
	font-size: 1.25em;
	font-weight: bold;

}

#sendinq-lead-in span{

}

/* Possibly deprecated */
#search {
}

/* .form-textarea used no where - remove this code if you want. FROM STYLES */
.form-textarea {
	margin-top: 15px;
}

/*
.select-currency class is made by Ali and its used on the settings.php. 
this class modify the <select> tag
*/
.select-currency {
	background: transparent url(../images/formbg.png);
	border-radius: 3px;
	-moz-border-radius: 3px;
}

/* This is the main search field for needs. */
#search-textarea {
	height: auto;
	width: 100%;
	// font-size:150%;
	resize: vertical;
}

/*
.textarea-empty class is used in the textarea to style the <textarea> tag when its empty. this style is used in jquery to replace the style when no one has typed 
in the textarea. you can find this class in offer.js, custom.js and offer.js
*/
.textarea-empty {
	background: #fff;
	color: #aaaaaa;
}

/*
.textarea-empty:focus replace the textarea background when area is focused. 
*/
.textarea-empty:focus {
	background: #fff;
}

/*
.textarea-not-empty styles is used in jquery to replace the style when textarea is not empty. you can find this class in offer.js, custom.js and offer.js
*/
.textarea-not-empty {
	background: #fff;
	color: black;
}

/*
.textarea-not-empty:focus replace the textarea background when area is focused. 
*/
.textarea-not-empty:focus {
	background: #fff;
}

/* 
.where-empty class is used in where text field on the index.php page, you can find its template in var.mod.php
this is used to replace the style of text field when its empty but now its interchange style with where-full and this style is same
.you can find it in offer.js, custom.js
 */
.where-empty {
	background: #fff;
	color: #000;
}

/*
.where-full class is used in where text field on the index.php page, you can find its template in var.mod.php
this is used to replace the style of text field when its empty but now its interchange style with where-empty and this style is same
.you can find it in offer.js, custom.js
*/
.where-full {
	width: 150px;
	background: #fff;
	color: #000;
}

/*
#nsbutton_ class is used to hold the new search button on the main search area.
its change the margin top. it wont effect the margin-top if you change the value because its the the div under the describe you need image div
but it will effect other css properties.
*/
#nsbutton_ {
	margin-top: 23px;
	margin-left: 9px;
	margin-bottom: 10px;
}

/*
.newsearch-button class used in the index.php page. you can find the class used in var.mod.php
you change the background image to change the button style. also set the height and width of the image to see full button.
remember use an PNG image to tranparent background image of the button.
*/
.newsearch-button {
	width: 100px;
	height: 30px;
	color: #000;
	cursor: pointer;
	border: 1px solid #ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1),
		to(#dfdfdf) );
	background: -webkit-linear-gradient(#f6f6f6, #d4d4d4);
	background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4);
	background-image: -moz-gradient(top, #f6f6f6, #d4d4d4);
}

/*
#undersearch is where the rest of the search items go (where, when etc)
*/
#undersearch {
	margin-top: 0.5em;
}

/*
#where-box id hold the #when-image div on the index.page. you can found its template in var.mod
*/
#where-box {
	display: inline-block;
	padding-right : 1em; /* to have a distance from the Attachment panel*/
}
#where-box input[type=text] {
	border: 1px solid #aaa;
	font-size: 1.5em;
}
#where-box #where-field-helper {
	font-size: 1.5em;	
}

/*
#when-box id hold the #when-image div on the index.page. you can found its template in var.mod
*/
#when-box {
	margin-left: 1em;
	/* display: inline-block; */
	display: none;	
}
#when-image {
	width: 66px;
	height: 25px;
}

.inputText {
	width: 190px;
	margin-bottom: 10px;
}

/*
#from-box id hold the #from-img div on the index.page. you can found its template in var.mod
*/
#from-box {
	float: left;
	margin-left: 1em;
	/* display: inline-block; */
	display: none;	
}
#from-img {
	width: 66px;
	height: 25px;
}

/*
#to-box id hold the #to-img div on the index.page. you can found its template in var.mod
*/
#to-box {
	float: left;
	margin-left: 1em;
	/* display: inline-block; */
	display: none;
}
#to-img {
	width: 66px;
	height: 25px;
}

/* supplier-list and related stylings */

.supplier-list {
	display: none;
	margin-top: 20px;
	border: 1px solid #ccc;
	border-radius: 0.25em;
}

#display-noresult-text {
	display: none;	
}

.needResults {
	padding: 0;
}

,.need-thumbsup,.need-thumbsdown {
	padding: 0.25em;
	margin: 0.25em;
}

/*
 <li> Style for results on index.php page.
 */
.stream-item {
	border-bottom: 1px solid #EBEBEB;
	position: relative;
	border-radius: 5px;
	width:100%;
    display:table;
    margin-bottom:5px;
    padding-bottom: 10px;
}

.stream-item .left{
	vertical-align: top;
	padding-left: 0.25em;
}

.stream-item cite{
	font-style: normal;
}


.display_following_siblings_on_click {
	cursor:pointer;
}

/*
.thumbsup-stream class is used in offer.js. this is use to style thumbup sign on result list
*/
.thumbsup-stream {
	background: rgb(244, 255, 244);
}

/*
.thumbsdown-stream class is used in offer.js. this is use to style thumbdown sign on result list
*/
.thumbsdown-stream {
	background: rgb(255, 244, 244);
}

/*
.reported-stream is used in reported_needs.php. it highlight the reported needs li.
*/
.reported-stream {
	background: #FFFFCC;
	border-color: rgba(255, 0, 0, 0.148438);
	-webkit-box-shadow: #999 0px 3px 4px;
	border-bottom-left-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
	border-top-left-radius: 5px 5px;
	border-top-right-radius: 5px 5px;
	margin-bottom: 5px;
}

.need-text a {
	color: #1B6CCD;
	text-decoration: underline;
	font-size: 11px;
}

.supplier-title-display {
	text-decoration: none;
	font-size: 20px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	float: left;
	margin-top: 15px;
	margin-left: 5px;
}

.suggest {
	display: block;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #EAEAEA;
	border: 1px solid #BBB;
	float: left;
	font-size: 12px;
	height: 15px;
	line-height: 1.2em;
	padding: 0 4px;
	margin-left: 4px;
	margin-top: 4px;
	position: relative;
}

.suggest-missing {
	display: none
}

/*
.supplier-short-display a:link styled the link heading of the on the search list anchor heading
*/
.supplier_search_title {
	font-weight: bold;
}


/*
.need-text a - style the anchor style of the description on every search result
*/
.need-text a {
	text-decoration: none;
}

/*
.need_read_more style the read more style which is used on the offer.js on line no# 445
*/
.need_read_more {
	padding-left: 5px;
}

/*
.need_read_more:link,.need_read_more:visited,.need_read_more:active - style the achor link of read more text used in need search result list
*/
.need_read_more:link,.need_read_more:visited,.need_read_more:active {
	color: #444;
	text-decoration: none;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
}

.display_table_cell{
	display:table-cell;
}

/*
.need_read_more:hover,.need_read_more:focus - style the achor link hover and focus of read more text used in need search result list
*/
.need_read_more:hover,.need_read_more:focus {
	text-decoration: underline;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
}

/*
.need-actions is use to hold thumb up and thumb down on supplier.php page
 */
.need-actions {
	vertical-align: top;
	padding-left: 1px;
	width: 100px;
	text-align: right;
}

.need-actions a {
	display: inline-block;
}

/*
.need-actions a:link ,.need-actions a:link span b,.need-actions a:visited span b,.need-actions a.active span b - this style the anchor inside the .need-action class on supplier.php page and it is also used in offer.js
*/
.need-actions a:link,.need-actions a:link span b,.need-actions a:visited span b,.need-actions a.active span b
	{
	text-decoration: none;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	vertical-align: top;
}

/* 
.need-actions a:hover span b,.need-actions a:focus span b - style the link hover and focus style of need-actions class anchor used in supplier.php
*/
.need-actions a:hover span b,.need-actions a:focus span b {
	text-decoration: underline;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	vertical-align: top;
}

/*
.thumbsup-action span b - this change the color of "b" tag inside the inside the "thumbsup-action span"  on main search list and on supplier.php page
*/
.thumbsup-action span b {
	color: #4E7AA1;
}

/*
.thumbsup-action span:hover b - this change the color of "b" tag on hover inside the inside the "thumbsup-action span"  on main search list and on supplier.php page
*/
.thumbsup-action span:hover b {
	color: #79C500;
}

/*
.thumbsdown-action span b - this change the color of "b" tag inside the inside the "thumbsdown-action span"  on main search list and on supplier.php page
*/
.thumbsdown-action span b {
	color: #4E7AA1;
}

/*
.thumbsup-action span:hover b - this change the color of "b" on hover tag on hover inside the inside the "thumbsdown-action span"  on main search list and on supplier.php page
*/
.thumbsdown-action span:hover b {
	color: #F71D04;
}

/*
.thumbsup-action span i - this is to place a grey thumb up sign on need search list and on supplier.php page
*/
/*
Depriciated - this is no longer used, there is another class with the same name on the bottom
*/
.thumbsup-action span i {
	background: transparent url(../images/thumb/thumbs-up-light-grey.png)
		no-repeat top;
	display: inline-block;
	height: 60px;
	outline: none;
	text-indent: -99999px;
	width: 40px;
}

/*
thumbsup-action span:hover i - this change the image to dark grey when mouse hover the thumbup sign on need result list and on supplier.php page 
*/
.thumbsup-action span:hover i {
	background: transparent url(../images/thumb/thumb-up-dark-grey.png)
		no-repeat;
	display: inline-block;
	outline: none;
	text-indent: -99999px;
}

/*
.thumbsup-action-selected span i - this change the image to green when you click on the thumbup sign on need result list and on supplier.php page 
*/
.thumbsup-action-selected span i {
	background: transparent url(../images/thumb/thumbs-up-green.png)
		no-repeat;
	display: inline-block;
	height: 60px;
	margin: 0px 2px;
	outline: none;
	text-indent: -99999px;
	width: 40px;
}

/*
.thumbsup-action span i - this is to place a grey thumb down sign on need search list and on supplier.php page
*/
.thumbsdown-action span i {
	background: transparent url(../images/thumb/thumb-down-light-grey.png)
		no-repeat 0px 14px;
	display: inline-block;
	height: 60px;
	margin: 0px 2px;
	outline: none;
	text-indent: -99999px;
	width: 40px;
}

/*
thumbsdown-action span:hover i - this change the image to dark grey when mouse hover the thumbdown sign on need result list and on supplier.php page 
*/
.thumbsdown-action span:hover i {
	background: transparent url(../images/thumb/thumb-down-dark-grey.png)
		no-repeat 0px 14px;
	display: inline-block;
	height: 60px;
	margin: 0px 2px;
	outline: none;
	text-indent: -99999px;
	width: 40px;
}

/*
.thumbsup-action-selected span i - this change the image to green when you click on the thumbdown sign on need result list and on supplier.php page 
*/
.thumbsdown-action-selected span i {
	background: transparent url(../images/thumb/thumb-down-red.png)
		no-repeat 0px 14px;
	display: inline-block;
	height: 60px;
	margin: 0px 2px;
	outline: none;
	text-indent: -99999px;
	width: 40px;
}

#footer {
	clear: both;
	float:left;
	width:100%;
	background-color: whitesmoke;
}

#footer-menu {
	float:right;
	padding-right:4em;
}

#footer-menu ul {
	list-style: none;	
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
#signin_box {
	margin-top: 53px;
	margin-left: 0px;
	width: 180px;
	background-color: #fff;
	border: solid 3px #68b8bc;
	padding: 8px;
	position: absolute;
	display: none;
	z-index: 999;
}

/* Send inquiry button and related styles. */

#sendinq {
	display: inline-block;
	float: right;
}
#sending-inquiry-button {
	border: 0px;
	cursor: pointer;
}
/* Language adaptations. */
.sendinq-button-eng {
	background: transparent url(../images/send-inquiry-button-hover.png)
		no-repeat;
	width: 187px;
	height: 51px;
}
.sendinq-button-swe {
	background: transparent url(../images_sv/send-inquiry-button-hover.png)
		no-repeat;
	width: 187px;
	height: 51px;
}
.sendinq-button-enable {
	opacity: 0.9;
}
.sendinq-button-enable:hover {
	opacity: 1;
}
.sendinq-button-disable {
	opacity: 0.4;
}

/* Publish on Facebook button and related styles. */

.facebook-publish-eng{
	
	background: transparent url(../images/facebook-publish-button.png)
		no-repeat;
	width: 187px;
	height: 51px;
	opacity:0.9;
	
}
.facebook-publish-swe{
	
	background: transparent url(../images_sv/facebook-publish-button.png)
		no-repeat;
	width: 187px;
	height: 51px;
	opacity:0.9;
}

.facebook-publish-eng:hover{
	
	opacity:1;
}
.facebook-publish-swe:hover{
	
	opacity:1;
}
/*
.clr is use to clear the both side(left and right). if you use this class, it will show the div from new line. 
usage e.g <div class="clr"></div>
*/
.clr {
	clear: both;
}

/*
#reg-login is used in div class "grid_8" on these pages
activate_email.php, create-offer.php, editpassword.php, edit_need.php, edit_offer.php forgotpass.php
invitation_.php, ipn_result.php, login.php, new_edit_need.php, orders.php, pay_now.php, register-notification.php
register.php, reported_need_list.php, seller_payment.php, settings.php, supplier-register-reject.php, supplier-register.php, waitinglist.php
(note: if you modify its property it will effect all the pages listed above)
*/
#reg-login {
	margin-top: 10px;
}

/* 
#login-box is used in login.php to hold the main login box div
*/
#login-box {
	background-color: #f5f9f9;
	border: 1px solid #d2d5d5;
	margin: 1em;
	border-radius: 5px;
}

div#login-box div.help
{
	background-color: white;
	border: 1px solid #d2d5d5;
	padding: 1em;
	margin-left:3%;
	margin-right:3%;
	margin-top:1em;
	border-radius: 5px;
}

#login-box .native {
	display:inline-block;
	max-width: 400px; /* Removed inline if not followed by facebook login. */
	padding-left:3%;
	padding-right:3%;
	border-bottom:1px solid lightgray;
}

#login-box .facebook {
	display:inline-block;
	padding-left:3%;
	padding-right:3%;
	vertical-align:top;
	padding-bottom:1em;
}

/*
#login-box input[type=text] is used in login.php to style the input type text box within the #login-box div.
*/
#login-box input[type=text], #login-box input[type=email] {
	background-color: #fff;
	font-size: 13px;
	width: 240px;
	height: 29px;
	padding-left: 5px;
	padding-right: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
}

/*
#login-box input[type=text]:focus is used in login.php to style the input type text box when clicked in the input text box within the #login-box div.
*/
#login-box input[type=text]:focus,#login-box input[type=email]:focus {
	background-color: #eef7f7;
}

/*
#login-box input[type=password] is used in login.php to style the input type password box within the #login-box div.
*/
#login-box input[type=password] {
	background-color: #fff;
	font-size: 13px;
	width: 240px;
	height: 29px;
	padding-left: 5px;
	padding-right: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
}

/*
#login-box input[type=password]:focus is used in login.php to style the input type password box when clicked in the text box within the #login-box div.
*/
#login-box input[type=password]:focus {
	background-color: #eef7f7;
}

/*
#login-reg-box is used in login.php to show the register div along with the login-box div.
*/
#login-reg-box {
	background-color: #EAF2F2;
	width: 170px;
	height: 260px;
	padding: 10px;
	float: left;
	border-right: 1px solid #d2d5d5;
	border-top: 1px solid #d2d5d5;
	border-bottom: 1px solid #d2d5d5;
	-moz-border-radius-bottomleft: 0px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 5px;
	-webkit-border-bottom-left-radius: 0px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 5px;
}

/*
#login-reg-box p is used in login.php to style paragraph "p" tag within login-reg-box div.
*/
#login-reg-box p {
	margin-top: 5px;
}

/*
#login-reg-box ul is used in login.php to style unorder list "ul" tag within login-reg-box div.
*/
#login-reg-box ul {
	margin-left: 20px;
}

/*
#login-reg-box ul is used in login.php to style list-item "li" tag within login-reg-box div.
*/
#login-reg-box li {
	list-style-type: decimal;
}

/*
#register is used in login.php top hold the register button in the #login-reg-box div
*/
#register {
	width: 50px;
	height: 20px;
	margin-top: 10px;
	margin-left: 20px;
	padding: 5px;
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
#reg-button {
	color: #ffffff;
	font-weight: bold;
	width: 120px;
	height: 30px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #619B00;
	background-color: #79C500;
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
#reg-button:hover {
	background-color: #6fa020;
	border: 1px solid #4A6A15;
}

/*
#registration is as an css style butt also and jquery id is used in 'create-offer.php' page on line# 95
this is been used on 
create-offer.php, editpassword.php, forgotpassword.php, ipn_result.php, order.php, register.php, seller_payment.php
sypplier-register-rejec.php, supplier-register.php
*/
#registration {
	width: 100%;
	float: left;
	border: 1px solid #d2d5d5;
	padding: 10px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

/*
#registration p is used to style "p" paragraph tag with the #registration div 
*/
#registration p {
	margin: 0;
	color: #68b8bc;
}

/*
#registration h3 is used to style "h3" heading3 tag with the #registration div 
*/
#registration h3 {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #68b8bc;
	background-color: #DAE9E9;
	-webkit-border-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

/*
#registration label is used to style "label" tag with the #registration div 
*/
#registration label {
	color: #444;
	font-weight: bold;
}

/*
#registration input[type=text] is used to style the input type text box within the #registration div.
*/
#registration input[type=text] {
	font-size: 13px;
	width: 240px;
	height: 29px;
	padding-left: 5px;
	padding-right: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
}

/*
#registration input[type=text]:focus is used to style the input type text when user clicked the input type box within the #registration div.
*/
#registration input[type=text]:focus {
	background-color: #eef7f7;
}

/*
#registration input[type=password] is used to style the input type password box within the #registration div.
*/
#registration input[type=password] {
	font-size: 13px;
	width: 240px;
	height: 29px;
	padding-left: 5px;
	padding-right: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
}

/*
#registration input[type=password]:focus is used to style the input type password when user clicked the input type box within the #registration div.
*/
#registration input[type=password]:focus {
	background-color: #eef7f7;
}

/*
.setdiv1, .setdiv2, .setdiv3, .setdiv4 are the manually created layouting div structure.
if you want to use three column or two column in grid_8 class or grid_10 class you can use these classes. 
	--- --- ---
	| | | | | |
	--- --- ---
<div class="setdiv1"> 1st column </div> 
<div class="setdiv2"> 2nd column </div>  
<div class="setdiv3"> 3rd column </div> 
<div class="clr"></div> <-- to clear both and start the next div from new line 

if you want to use two column such as
	---  --------- 
	| |  |       |  
	---  --------- 
use this code
<div class="setdiv1"> 1st column </div> 
<div class="setdiv4"> 2nd column </div>
<div class="clr"></div> <-- to clear both and start the next div from new line 	

you can find the implimented code on
edit_need.php, new-profile.php, reported_need_list.php, settings.php, waitinglist.php
*/
.setdiv1,.layout_box_130_float_left {
	width: 20%;
	float: left;
	padding: 5px;
}

.setdiv2 {
	width: 300px;
	float: left;
	padding: 5px;
}

.setdiv3 {
	margin-left: 100px;
	color: #79C500;
	width: 200px;
	float: left;
	padding: 5px;
}

.setdiv4,.layout_box_600_float_left {
	width: 600px;
	float: left;
	padding: 5px;
}

.layout_box_float_left{
	width:75%;
	float: left;
	padding: 5px;
}

/*
.send-to-all is a div id which hold the title, textarea and send messege button. 
on supplier messeges and buyer messeges.
you can find its code in var.mod on line# 369, 632 and 661.
 */
.send-to-all {
	width: 100%;
	padding-bottom: 5px;
	vertical-align: top;
	color: #333333;
}

.grey-border {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: #E9E9E9;
}

.message-box {
	width: 100%;
	margin-bottom: 2px;
}

/*
.send-to-all is used to style the textarea within send-to-all div.
its used in supplier messeges and buyer messeges.
*/
.text-area textarea {
	border: 1px #84bab6 solid;
	padding: 5px;
	font-size: 14px;
	width: 100%;
	resize: vertical;
	/* Prevents the right border from disappearing when using 100% width. */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;	
}

.message-box-buttons {
	padding-top: 3px;
}

.button-right {
	float: right;
	padding-left: 5px;
}

.button-left {
	float: left;
	padding-right: 5px;
}

/*
.send-all-left is used to hold the title on the top of textarea
its used in supplier messeges and buyer messeges
*/
.send-all-left {
	width: 400px;
	padding-bottom: 4px;
	float: left;
}

/*
.send-all-right is used to hold the textarea in supplier messeges and buyer messeges pages
you can find it in var.mod line# 443, 455, 636, 642, 667 and 675
*/
.send-all-right {
	padding-top: 2px;
	width: 100%;
	float: left;
}

/*
.attach-button-div hold the send messege buttons on supplier messeges , buyer messeges
*/
.attach-button-div {
	margin-left: 10px;
	float: right;
}

/*

.commit-infobox {
	font-size: 18px;
	background: url(/images/code/bg-node-info.png) left bottom repeat-x;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #e6e6e6;
	border-bottom: 1px solid #ccc;
	margin: 0 0 12px 0;
	padding: 12px 15px 5px 0;
	clear: both
}

/*
#loading is used on the loading messege when results are feteching on index.php
*/
#loading {
	margin: 5px;
}

/* leftmain-menu and related stylings */

#leftmain-menu {
	float:right;
}

#leftmain-menu dt {
	color:Lavender;
	font-size :1.5em;
	font-weight : bold;
}

#leftmain-menu ul {
	list-style-type:none;
}


#leftmain-menu dd.menuitem a {
	color: #323232;
}

#leftmain-menu dl dd.menuitem a:hover {
	background-color: #f1f9fb;
	text-decoration: none;
}

#leftmain-menu dl dd.menuitem a.selected {
	background-color: #d8dfea;
	text-decoration: none;
}

#leftmain-menu dl dd.menuitem a.active {
	background-color: #f1f9fb;
	font-weight: bold;
}

#left_responsive_menu ul {
	list-style-type:none;
}


/*
.populatelist hold the div which contain the list of my need and my offer of user.
you can check my offer and my need pahe 
*/
.populatelist {
	margin-top: 20px;
}

/*
.myrequests-list ul styles the my Offer and My Needs List
*/
.myrequests-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

/*
.myrequests-list li styles the my Offer and My Needs List
*/
.myrequests-list li {
	display: block;
}

/*
.myreadrequest-item styles the read messeges style in My Offer and My Needs page
*/
.myreadrequest-item {
	background-color: #fbfbfb;
	border: 1px solid #efefef;
	padding: 10px;
	margin-bottom: 5px;
}

/*
.myreadrequest-item2 styles the unread messeges style in My Offer and My Needs page
*/
.myreadrequest-item2 {
	background-color: #eff3f4;
	border: 1px solid #68b8bc;
	padding: 10px;
	margin-bottom: 5px;
}

/* 
.listtitle hold the title of My Offer and My Need Offer within li
*/
.listtitle {
	font-size: 14px;
	font-weight: bold;
	width: 500px;
	float: left;
}

/*
.listbuttons hold the buttons on right of the li on My offer and My Need 
*/
.listbuttons {
	float: right;
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
.count-msg {
	float: left;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
	margin-top: -5px;
	margin-right: 5px;
	width: 12px;
	border: 1px solid #5b9300;
	display: block;
	background-color: #79c500;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
.count-msg-need {
	float: right;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
	margin-top: -5px;
	margin-right: 0px;
	width: 12px;
	border: 1px solid #5b9300;
	display: block;
	background-color: #79c500;
	color: #fff;
	font-size: 11px;
	text-align: center;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/*
.count-msg show the total number of messeges style on My Offer List and My Need list.
*/
.count-msg-inner {
	float: right;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	padding-right: 4px;
	margin-top: 2px;
	margin-right: 5px;
	border: 1px solid #F03D25;
	display: block;
	background-color: #F03D25;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/*
.rem_b a show the remove button on My Offer List and My Need list.
*/
.rem_b a {
	
}

/*
.listdecs show the description on My Offer List and My Need list.
*/
.listdecs {
	font-size: 11px;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}

/*
.listdatecreated is used to style the the My Offer List and My Need list created date style.
*/
.listdatecreated {
	float: left;
	padding-top: 5px;
	color: #cacaca;
	font-size: 11px;
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
.listlastupdate {
	padding-left: 200px;
	padding-top: 5px;
	color: #cacaca;
	font-size: 11px;
}

/*
.editable span style inline editable span styling
*/
.editable span {
	color: #ccc;
}

/*
.editable textarea is used to style the inline editable textarea styling which is used in edit_need.php
*/
.editable textarea {
	border: 1px solid #ccc;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
	font-size: 12px;
	color: #000;
	display: block;
	float: left;
	resize: none;
}

.editable input {
	border: 1px solid #ccc;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
	font-size: 12px;
	color: #000;
	display: block;
	float: left;
}

/*
editable_textarea is use to show the pencil/edit icon on editable field.
*/
.editable_textarea {
	padding-left: 20px;
	background-image: url("../images/ico_edit.gif");
	background-position: left top;
	background-repeat: no-repeat;
	color: #444;
	border: 1px silver;
	cursor: pointer;
}

/*
editable_textarea:focus is use to hide the pencil/edit icon when you click on it.
*/
.editable_textarea:focus {
	padding-left: 0px;
	background-image: none;
}

/*
.editable button is use to margin-top the button of editable field.
*/
.editable button {
	margin-top: 10px;
}

/*
.need-edit-title is used to style a need title on Need dashboard 
*/
.need-edit-title {
	color: #000;
	font-style: italic;
}

/*


/*
.supplierbuyer-list ul is used to style Need-Dashboard list and Offer-Dashboard list ul
 */
.supplierbuyer-list ul {
	list-style-type: none;
}

/*
.supplierbuyer-list ul is used to style Need-Dashboard list and Offer-Dashboard list ul li
*/
.supplierbuyer-list li {
	display: block;
}

/*
.True is used to show the read style of Need-Dashboard Messege and Offer-Dashboard Messege
*/
.True {
	background-color: #fbfbfb;
	border: 1px solid #efefef;
	padding: 10px;
	margin-bottom: 5px;
}

/*
.True is used to show the unread style of Need-Dashboard Messege and Offer-Dashboard Messege
*/
.False {
	background-color: #eff3f4;
	border: 1px solid #68b8bc;
	padding: 10px;
	margin-bottom: 5px;
}

/*
.offerneedlistbody hold the Title, recent reply, last updated date div in Need-dashboard and Offer-Dashboard
*/
.offerneedlistbody {
	float: left;
	width: 550px;
}

/*
.offerneedlistbody hold and style the Title div in Need-dashboard and Offer-Dashboard
*/
.offerneedtitle {
	font-size: 16px;
	font-weight: bold;
	width: 450px;
	float: left;
	word-wrap: break-word;
}

/*
.offerneedlistbody hold and style the recent reply div in Need-dashboard and Offer-Dashboard
*/
.recentreplies {
	font-size: 11px;
	color: #68b8bc;
	word-wrap: break-word;
}

/*
.offerneedlistbody hold and style the last updated date div in Need-dashboard and Offer-Dashboard
*/
.lastreplyupdate {
	float: left;
	color: gray
}

.color_red {
	color: red;
}

/*
.right-most-supplier-invites is the the third column of the Offer/Need and Dasboards Pages. where we show the buyer seller shake hand process.
used in the need-dashboard.php and offer-dashboard.php 
*/
.right-most-supplier-invites {
	border-left: 1px solid #efefef;
	margin-top: -10px;
	height: 550px;
}

/*
.edit-need-margins-offer-page is used in SELLER_OFFER_EDIT_TEMPLATE (edit_need.php) to give a same height to every editable field.
*/
.edit-need-margins-offer-page {
	min-height: 100px;
	word-wrap: break-word;
	clear: both;
}

.edit-need-margins-geo {
	min-height: 60px;
	word-wrap: break-word;
	clear: both;
}

.edit-need-margins-offer-page-textfield {
	min-height: 40px;
	height: 30px;
	word-wrap: break-word;
	clear: both;
}

/*
.messages used in offer-messeges.php and need-messeges.php
you can find this class in var.mod (USER_SUPPLIER_MESSAGES_TEMPLATE)
*/
.messages {
	
}

/*
.messages ul style the messeges list on offer-messeges.php and need-messeges.php
*/
.messages ul {
	list-style-type: none;
}

/*
.messages li style the messeges list on offer-messeges.php and need-messeges.php
*/
.messages li {
	
}

/*
.messages li:first-child is used the style the first messege li 
(used in offer-messeges.php and need-messeges.php)
*/
.messages li:first-child {
	border-top: 0px solid #68B7BE;
	padding-bottom: 5px;
	padding-top: 5px;
}

/*
.messages li is used to style the list item  of messege
*/
.messages li {
	padding-bottom: 5px;
	padding-top: 5px;
}

/*
.message-body style the div inside li which hold the messege title, date and submited
(used in offer-messeges.php and need-messeges.php)
*/
.message-body {
	padding: 0px;
	float: right;
	background-color: #f1f9fb;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-radius: 5px;
}

.their_message {
	width: 95%;
}

.your_message {
	width: 100%;
}

/*
.message-title-and-date is used to hold the title and date div on messege page list-item
(used in offer-messeges.php and need-messeges.php)
*/
.message-title-and-date {
	-webkit-border-top-left-radius: 5px 5px;
	-webkit-border-top-right-radius: 5px 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	padding: 5px;
	border: 1px solid #d9edee;
	background-color: #fbfcfc;
	display: block;
	height: 18px;
}

/*
.message-title is used to style the messege title on messege list
(used in offer-messeges.php and need-messeges.php)
*/
.message-title {
	color: #222;
	font-size: 13px;
	font-weight: bold;
	/* float: left; */
	overflow: hidden;
}

/*
.message-date is used to style the messege date on messege list
(used in offer-messeges.php and need-messeges.php)
*/
.message-date {
	text-align: right;
	font-size: 11px;
	width: 150px;
	float: right;
}

/*
.message-main is used to style the messege main text on messege list
(used in offer-messeges.php and need-messeges.php)
*/
.message-main {
	padding: 5px;
	word-wrap: break-word;
	/* font-size: 13px; */
	/* color: #444; */
}

/*
START BUYER SUPPLIER AWARD CASES
.award-cases styling used in offer-messeges.php and need-messeges.php
*/
.award-cases {
	
}

/*
.award-cases .leftbutton is a div inside div style use to alight the buttons on right
*/
.award-cases .leftbutton {
	margin: 0px 0 10px 0;
}

/*
.award-cases input[type=text] is used to style the input type text inside the award-cases div
*/
.award-cases input[type=text] {
	padding: 5px;
	margin: 10px 0 10px 0;
	width: 140px;
	line-height: 20px;
}

/*
.award-cases .proposeprice is used to style the the propose price style
*/
.award-cases .proposeprice {
	font-size: 22px;
	font-weight: bold;
}

/*
.award-cases .or-icon is used to show the up and down arrow
*/
.award-cases .or-icon {
	margin: 10px 0 10px 0;
	display: block;
	background-image: url("../images/oricon.png");
	width: 150px;
	height: 55px;
}

/*
.system-message-class style the system-generated messege, such as when handshake has been done etc
 */
.system-message-class {

	/* float: left; */
	padding: 5px;
	border: 1px solid #d2d5d5;
	border-radius : 5px;
	/* font-size: 11px; */
	color: #555;
}

.catalyst-msg {
	background-image: url("../images/bulb.png");
	background-repeat: no-repeat;
	background-color: yellow;
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	border-radius : 2px;
	margin-right: 10px;;
}

/*
.system-message-class #system-msg is used to show the system generated messege icon
*/
.system-msg {
	background-image: url("../images/systemmsg.png");
	background-repeat: no-repeat;
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	padding-right: 10px;
}

/*
######## Deprecated Css. remove it. its not in use ########
*/
.proposed-price {
	margin-top: 3px;
}

/*
.proposed-price-title is used on var.mod line# 560 as an propose price lable title
*/
.proposed-price-title {
	font-size: 18px;
	font-weight: bold;
	color: #68b8bc;
	padding-bottom: 4px;
	border-bottom: 1px solid #68b8bc;
}

/*
.proposed-price input[type=text] is used on var.mod line# 560 as an propose price lable title is used to style input text box with the purpose-price div
*/
.proposed-price input[type=text] {
	width: 150px;
	font-size: 18px;
	text-align: center;
}

/*
.proposed-price-button is used to style an propose price button on offer-messeges and need-messege.page
*/
.proposed-price-button {
	background-image: url("../images/purposed-button.png");
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 34px;
	margin: 0 auto;
	font-size: 24px;
	color: #626262;
	text-align: center;
}

/*
.shakehand-button is used to style an shakehand image button on offer-messeges and need-messege.page
*/
.shakehand-button {
	background-image: url("../images/handshake.png");
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 42px;
	display: block;
	cursor: pointer;
}

.shakehand-button-disabled {
	background-image: url("../images/handshake.png");
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 42px;
	display: block;
	cursor: default;
	opacity: 0.5;
}

/*
.shakehand-button:hover is used to style an shakehand image button when mouse hover on it, on offer-messeges and need-messege.page
*/
.shakehand-button:hover {
	background-image: url("../images/handshake-hover.png");
}

.shakehand-button-selected {
background-image: url("../images/handshake-hover.png");
}

/*
.right-most-messages used to style the  last grid_2 div in the need-dashboard.php and offer-dashboard.php 

.right-most-inner-messages used to style the inner margin of ".right-most-messages". (need-dashboard.php and offer-dashboard.php) 
*/
.right-most-inner-messages {
	margin-top: 0px;
	padding: 5px;
}

/*
.messeges-page is used in need-dashboard.php and offer-dashboard.php to padding the complete grid_8.
*/
.messeges-page {
	padding: 5px;
}

.table-wating-list table{
	border-spacing:0;
	
}
/*
.table-wating-list th is used in order.php, seller_payment.php and in var.mod line# 1159, 1194, 1231, 1398
this style the table header "th" tag
*/

.table-wating-list th {
/*	border: 1px solid #68b8bc;*/
	font-size:0.8em;
	text-align:left;
	
	}

/*
.table-wating-list td is used in order.php, seller_payment.php and in var.mod
this style the table "td" tag style
*/
.table-wating-list td {
/*	border: 1px solid #9F9F9F;*/
	text-align:left;
	font-size:0.75em;
	
}

.table-wating-list tr:nth-child(even){
 background-color: whitesmoke;
}

/*
.clearboth clear the left and right margin and start div from new line
*/
.clearboth {
	clear: both;
}

.container_12 { /*	background: #fff url(../images/12_col.gif) repeat-y;
	margin-bottom: 20px;*/
	
}

/*
#need-inline-edit textarea modify the inline editable textarea in need-inline-edit div
and it is used in var.mod line# 1706
*/
#need-inline-edit textarea {
	border: 1px solid #CCC;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: 8px;
	-webkit-box-shadow: 0 1px white;
	-moz-box-shadow: 0 1px white;
	box-shadow: 0 1px white;
	width: 650px;
	height: 56px;
	color: #222;
	font: 14px/18px Arial, sans-serif;
	outline: none;
	_width: 442px;
	overflow-x: hidden;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	resize: vertical;
}

.profile-top-bar {
	background-color: #d3e7dc;
	width: 100%;
	height: 20px;
}

.deleted {
	color: red;
	font-weight: bold;
}

.read-more {
	font-size: 10px;
}

.btn-block {
	width: 100%;
	z-index: 300;
	height: 40px;
	position: absolute;
	float: right;
	display: none;
	margin-top: 50px;
}

.error {
	background: #ffdfdf;
	border: 1px solid #ff0202;
	-webkit-box-shadow: #999 0px 3px 4px;
	border-bottom-left-radius: 5px 5px;
	border-bottom-right-radius: 5px 5px;
	border-top-left-radius: 5px 5px;
	border-top-right-radius: 5px 5px;
	display: none;
}

.show-button {
	display: block;
}

.hide-button {
	display: none;
}

.error p {
	background: url("../images/buttons/error.png") no-repeat 6px 5px;
	padding-left: 30px;
	padding-top: 5px;
	font-weight: bold;
}

.profile-statistics {
	float: right;
	width: 200px;
	padding: 0px;
	margin: 0px;
	height: inherit;
	border-left: 1px solid #ccc;
	background: url("../images/dot.png") no-repeat 6px 5px;
}

.new-msg-highlight {
	background: #feefd4;
}

#send_help_notice {
	padding: 10px;
	background-color: rgba(250, 251, 250, 0.6);;;
}

.thankyou-link {
	color: #68b8bc;
	font-size: 18px;
	cursor: pointer;
	color: #68b8bc;
}

.thankyou-link:hover {
	color: blue;
}

.need-option {
	color: #68b8bc;
	font-size: 12px;
	cursor: pointer;
	color: #68b8bc;
}

.need-option:hover {
	color: #b1d0d2;
}

/* Notification box styling and positioning (fixed at the top). */

#notification-box {
	position: absolute;
	left: 25%;
	top: 0%;
	width: 50%;
	z-index: 1;	
	text-align:left;
	background: #f1f9fb;
	border-radius: 0.25em;
	border: 1px solid #68B8BC;
	display:none;
	margin-top:0.25em;
	padding: 0.25em;
}

#notification-box .notification-error {
	color: red;
}

#notification-box .notification-message {
	color: blue;
}

#notification-box #notification-box-close  {
	float: right;
}

.form-heading {
	margin: 0px 0px 5px 0px;
	padding: 0;
	text-align: left;
	color: black;
	background-color: #DAE9E9;
	-webkit-border-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	padding-right: 10px;
	padding-left: 10px;
}

.form input[type=text],.form input[type=password],.form input[type=number] {
	background: transparent url(../images/formbg.png) top left no-repeat;
	font-size: 13px;
	width: 240px;
	height: 29px;
	padding-left: 5px;
	padding-right: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
	border: 1px solid #AAA;
	border-bottom-left-radius: 3px 3px;
	border-bottom-right-radius: 3px 3px;
	border-top-left-radius: 3px 3px;
	border-top-right-radius: 3px 3px;
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
}


.form input[type=text]:focus,.form input[type=password]:focus {
	border: 1px solid #68B8BC;
	-webkit-box-shadow: #68B8BC 0px 0px 5px 0px;
	-mox-box-shadow: #68B8BC 0px 0px 5px 0px;
	box-shadow: #68B8BC 0px 0px 5px 0px;
}

.form  textarea {
	-webkit-appearance: textarea;
	border: 1px solid #AAA;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: 8px;
	-webkit-box-shadow: 0 1px white;
	-moz-box-shadow: 0 1px white;
	box-shadow: 0 1px white;
	resize: none;
	color: #222;
	font: 14px/18px, Arial, sans-serif;
	outline: none;
	overflow-x: hidden;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	resize: vertical;
	width: 300px;
	background: transparent url(../images/formbg.png) top left no-repeat;
}

.form textarea:FOCUS {
	border: 1px solid #68B8BC;
	-webkit-box-shadow: #68B8BC 0px 0px 5px 0px;
	-mox-box-shadow: #68B8BC 0px 0px 5px 0px;
	box-shadow: #68B8BC 0px 0px 5px 0px;
}

/*
#login-box input[type=password] is used in login.php to style the input type password box within the #login-box div.
*/
.form input[type=password] {
	background-color: #fff;
	font-size: 13px;
	width: 240px;
	height: 29px;
	padding-left: 5px;
	padding-right: 5px;
	background: transparent url(../images/formbg.png) top left no-repeat;
}

/*
#login-box input[type=password]:focus is used in login.php to style the input type password box when clicked in the text box within the #login-box div.
*/
.form input[type=password]:focus {
	background-color: #eef7f7;
}

/*
 * supplier  profile page css
 */
#profile-detail {
	width: 800px;
	margin-bottom: 100px;
}

.prfole-detail1 {
	float: left;
	padding-left: 15px;
	padding-right: 20px;
	width: 60%;
}

.prfole-detail2 {
	float: right;
	width: 27%;
	padding: 0px;
	margin-right: 30px;
}

#supplierFrame {
	width: 100%;
	height: 100%;
	background-color: transparent;
	margin-bottom: 70px;
}

.hr-profile {
	margin: 10px 0px 10px 0px;
	padding: 0;
	border: 1px solid #68b8bc;
	/*-moz-box-shadow: 5px 5px 5px #ccc;
	-webkit-box-shadow: 5px 5px 5px #ccc;
 	box-shadow: 5px 5px 5px #ccc;*/
	z-index: 9999999;
}

.thumb-ul {
	width: 100%;
	margin-bottom: 10px;
	margin-top: 10px;
}

.profile-main-div {
	border: 1px #ccc solid;
	width: 800px;
	text-align: left;
	position: absolute;
}

.frame {
	overflow: hidden;
	top: 20px;
}

.master-div2 {
	width: 100%;
}

.site-bottom-bar {
	background-color: #fff;
	border-top: 1px solid #CCCCCC;
	bottom: 0px;
	font-size: 11px;
	height: 30px;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

.more-result-button {
	margin-top: 5px;
	text-align: center;
	width: 250px;
	height: 25px;
	color: #000;
	border: 1px solid #cccccc;
	border-radius: 0px;;
	background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1),
		to(#dfdfdf) );
	background: -webkit-linear-gradient(#f6f6f6, #d4d4d4);
	background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4);
	background-image: -moz-gradient(top, #f6f6f6, #d4d4d4);
	cursor: pointer;
}

.how_it_works fieldset {
	height: 130px;
	margin: 25px auto;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	-khtml-border-bottom-left-radius: 5px;
	-khtml-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff),
		to(#ededed) );
	background: -moz-linear-gradient(top, #fff, #ededed);
	text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.how-style-div {
	float: left;
	vertical-align: middle;
	margin-right: 10px;
	margin-left: 10px;
}

.how-it-works-numbers-text {
	font-size: 40px;
	float: left;
	color: #79C500;
}

.how-it-works-on-index-page-text {
	font-size: 17px;
	float: left;
	margin-top: 20px;
}

.how-it-works-text-details {
	width: 221px;
	height: 50px;
	margin-right: 5px;
	margin-left: 10px;
}



.display_inline_list {
	list-style: none;
	display: inline;
	vertical-align: middle;
}

.display_inline_list li {
	list-style: none;
	display: inline;
	vertical-align: middle;
}

.dialog-close {
	width: 16px;
	height: 16px;
	background:
		url(https://images.elance.com/media/images/4.0/dialogs/close-x.gif)
		no-repeat;
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 10px;
}

#Upload {
	float: right;
	height: 31px;
}


.thumbnail_pdf {
	background: transparent url(../images/pdf_logo.png) top left no-repeat;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.thumbnail_doc,.thumbnail_docx {
	background: transparent url(../images/word_logo.png) top left no-repeat;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.thumbnail_ppt,.thumbnail_pptx {
	background: transparent url(../images/powerpoint_logo.png) top left
		no-repeat;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.thumbnail_xls,.thumbnail_xlsx {
	background: transparent url(../images/excel_logo.png) top left no-repeat;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.thumbnail_txt {
	background: transparent url(../images/txt_logo.png) top left no-repeat;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.thumbnail_unknown {
	background: transparent url(../images/unknown_logo.png) top left
		no-repeat;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.crop {
	float: left;
	background: #F3F3F3;
	display: block;
	overflow: hidden;
	position: relative;
	overflow: hidden;
	width: 200px;
	margin-right: 10px;
	margin-bottom: 10px;
}

/* Column containers, inspired by The Perfect 3 Column Liquid Layout by Mathew James Taylor. http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;	/* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
	background:white;    	/* Right column background colour */
}
.holygrail .colmid {
	float:left;
	width:200%;
	margin-left:-16em; 		/* Width of right column */
	position:relative;
	right:100%;
	background:white;    	/* Centre column background colour */
}
.holygrail .colleft {
	float:left;
	width:100%;
	margin-left:-50%;
	position:relative;
	left:30em;         		/* Left column width + right column width */
	background:white;    	/* Left column background colour */
}
.holygrail .col1wrap {
	float:left;
	width:50%;
	position:relative;
	right:14em;        		/* Width of left column */
	padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
	margin:0 17em 0 15em;   /* Centre column side padding:
							Left padding = left column width + centre column left padding width
							Right padding = right column width + centre column right padding width */
	position:relative;
	left:200%;
	overflow:hidden;
}
.holygrail .col2 {
	float:left;
	float:right;			/* This overrides the float:left above */
	width:12em;        		/* Width of left column content (left column width minus left and right padding) */
	position:relative;
	right:1em;         		/* Width of the left-had side padding on the left column */
}
.holygrail .col3 {
	float:left;
	float:right;			/* This overrides the float:left above */
	width:14em;        		/* Width of right column content (right column width minus left and right padding) */
	margin-right:3em;  		/* Width of right column right-hand padding + left column left and right padding */
	position:relative;
	left:50%;
}

/* 2 column left menu settings */
.leftmenu {
	background:white;
}
.leftmenu .colright {
	float:left;
	width:200%;
	position:relative;
	left:14em;				/* Width of left column */
	background:white;
}
.leftmenu .col1wrap {
	float:right;
	width:50%;
	position:relative;
	right:14em;				/* Width of left column */
	padding-bottom:1em;
}
.leftmenu .col1 {
	margin:0 1em 0 15em;	/* Width of left column + 1 */
	position:relative;
	right:100%;
	overflow:hidden;
}
.leftmenu .col2 {
	float:left;
	width:12em;				/* Width of left column - 2 */
	position:relative;
	right:13em;				/* Width of left column - 1 */
}
	
#login {
	margin-right:-50px;
	margin-top: 25px;
	float:right;
	font-weight: bold;
	color:#fff;
}

a.signin.menu-open span {
	background-image:url("../images/login/toggle_up_dark.png");
	color:#FFF;
}

#signin_menu input[type=text], #signin_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 5px;
	padding:5px;
	width:203px;
}
#signin_menu input[type=text]:focus, #signin_menu input[type=password]:focus {
background-color: #eef7f7;
}



#signin_menu p {
	margin:0;
}

#signin_menu label {
	font-weight:normal;
}
#signin_menu p.remember {
	padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
	clear:both;
	margin:5px 0;
}


#signup_menu {
   /*	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;*/

	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	display:none;
	background-color:#f5f9f9;
	position:absolute;
	width:210px;
	z-index:100;
	border-bottom:1px solid #68b8bc;
	border-left:1px solid #68b8bc;
	border-right:1px solid #68b8bc;
	text-align:left;
    margin-left:-68px;
	padding:12px;
	top: 56px;
/*	right: 0px;*/
	margin-top:5px;
	margin-right: 0px;
	margin-right: -1px;
	color:#789;
	font-size:11px;
}

#signup_menu input[type=text], #signup_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 5px;
	padding:5px;
	width:203px;
}

#signup_menu input[type=text]:focus, #signup_menu input[type=password]:focus {
	background-color: #eef7f7;
}

#signup_menu p {
	margin:0;
}

#signup_menu label {
	font-weight:normal;
}
#signup_menu p.remember {
	padding:10px 0;
}
#signup_menu p.forgot, #signup_menu p.complete {
	clear:both;
	margin:5px 0;
}

.instruction {
color: #666;
font-size: 10px;
padding: 0px;
line-height:12px;
}

.offer_form_tos span{
	
	width:50%;
	word-wrap:normal;
	font-size: 11px;
	height:10px;
	
}

#offer_heading_panel {
	height:35px;
	margin-top:5px;
	margin-bottom:10px;
	width:97%;
}
#offer_heading_panel h3{
	margin: 2px 0px 5px 0px;
}

#save-div{
	margin-right:10px;
	height:35px;
}
/**
* Styling for the sub header on the supplier.php page
*/

.supplier-header{
	height: 55px;
}
.supplier-header h1{
	height: 55px;
	display: inline;
}

/**
* Styling used for thumbs currently only used on the supplier.php page
*/

.thumb40
{
	display:inline-block;
	background-repeat:no-repeat;
	width: 40px;
	height: 40px;
	cursor:pointer;
}
.thumb40.thumb_up
{
	background-position:0px 0px;
	background-image:url('../images/thumb/thumbs-up-light-grey.png');
}
.thumb40.thumb_down
{
	background-position:0px 0px;
	background-image:url('../images/thumb/thumb-down-light-grey.png');
}
.thumb40.thumb_up:hover
{
	background-image:url('../images/thumb/thumb-up-dark-grey.png');
}
.thumb40.thumb_down:hover
{
	background-image:url('../images/thumb/thumb-down-dark-grey.png');
}
.thumb40.thumb_up.thumb_checked
{
	background-image:url('../images/thumb/thumbs-up-green.png');
}
.thumb40.thumb_down.thumb_checked
{
	background-image:url('../images/thumb/thumb-down-red.png');
}

/**
* thumb54 is the same as thumb40, but with the hands aligned on center of gravity.
*/ 

.thumb54
{
	display:inline-block;
	background-repeat:no-repeat;
	width: 40px;
	height: 54px;
	cursor:pointer;
}
.thumb54.thumb_up
{
	background-position:0px 0px;
	background-image:url('../images/thumb/thumbs-up-light-grey.png');
}
.thumb54.thumb_down
{
	background-position:0px 14px;
	background-image:url('../images/thumb/thumb-down-light-grey.png');
}
.thumb54.thumb_up:hover
{
	background-image:url('../images/thumb/thumb-up-dark-grey.png');
}
.thumb54.thumb_down:hover
{
	background-image:url('../images/thumb/thumb-down-dark-grey.png');
}
.thumb54.thumb_up.thumb_checked
{
	background-image:url('../images/thumb/thumbs-up-green.png');
}
.thumb54.thumb_down.thumb_checked
{
	background-image:url('../images/thumb/thumb-down-red.png');
}

/**
* Misc supplier.php styling
*/

.public_supplier_profile_sidebar div.section
{
	font-size:90%;
	clear:both;
	border: 1px solid LightGray;
	border-radius: 5px;
	float: right;
	padding-left: 0.25em;
	padding-right: 0.25em;
}


.public_supplier_profile_sidebar {
	
}


.public_supplier_profile_sidebar div.section h1
{
	font-size: 1.4em;
	margin-top: 0.5em;
}

div.public_supplier_profile_site_toolbar
{
	clear:both;
	border-bottom:1px solid LightGray;
	text-align:center;
}

div.public_supplier_profile_site_toolbar.no_need
{
	text-align:right;
}

div.public_supplier_profile_site_toolbar .switch_to_profile_view
{
	background-color:lightgrey;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:0.5em;
	border-radius: 5px 5px 0px 0px;
	margin-left:2em;
}

div.public_supplier_profile_site_toolbar.no_need .switch_to_profile_view
{
	background-color:lightgrey;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:0em;
	margin-left:0em;
	margin-right:2em;	
	border-radius: 5px 5px 0px 0px;
}

div.public_supplier_profile_site_toolbar .back_to_need
{
	background-color:lightgrey;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:0.5em;
	border-radius: 5px 5px 0px 0px;
	margin-right:2em;
}
.attachment_images_block{
	display: inline-block; 
	width:6em;
	height:6em;
	text-align:center;
	overflow:hidden;
	padding : 8px 13px 5px 5px;
	position:relative;
}

.attachment_non_images_block{
	margin-top:2px; 
	border:1px solid #d9edee;
	display:inline-block;
	width:99.5%;
	margin-right: 10px;
	font-weight:bold
	
}
#downloads{
	font-size:14px;
}

/**
 * Used in the index page while uploading the files
 */
.attachment_item
{
	width:100%;
	margin:0.1em 0.1em 0.1em 0.1em;
	padding:0.1em 0.1em 0.1em 0.1em;
}

.image-button-pre {
border: none;
background: none;
text-shadow: 0 0 0;
cursor: pointer;
text-align: left;
padding: 1px 1px;

}



/**
 * Flowing classes are used in index page for the attachments list. These will be displayed before the file name showing its type
 */



.index_thumbnail_png, .index_thumbnail_jpg, .index_thumbnail_jpeg, .index_thumbnail_gif {
	background: transparent url(../images/jpeg_logo.png) center left no-repeat;
	display: inline-block;
	verticle-align:middle;
}  


.index_thumbnail_pdf {
	background: transparent url(../images/ppt_icon_index.png) center left no-repeat;
	display: inline-block;
	verticle-align:middle;
}

.index_thumbnail_doc,.index_thumbnail_docx {
	background: transparent url(../images/doc_icon_index.png) center left no-repeat;
	display: inline-block;
	verticle-align:middle;
}

.index_thumbnail_ppt,.index_thumbnail_pptx {
	background: transparent url(../images/ppt_icon_index.png) center left no-repeat;
	display: inline-block;
	verticle-align:middle;
}
.index_thumbnail_xls,.index_thumbnail_xlsx {
	background: transparent url(../images/excel_icon_index.png) center left no-repeat;
	display: inline-block;
	verticle-align:middle;
}

.index_thumbnail_txt {
	background: transparent url(../images/text_icon_index.png) center left no-repeat;
	display: inline-block;
	verticle-align:middle;
		
}
.attachment_delete
{
	color:rgb(145,105,105);
	cursor:pointer;
}

.attachments-files .single-file{
	border: 1px solid #ccc;
	padding:2px;
}

.attachments-images{
	margin:0px;
	padding: 0px;
	list-style: none;
}

.attachments-images li{
	margin-right: 
}

.attachments.vertical .attachment_delete
{
	float:right;
}
.attachments.horizontal .attachment_delete
{
	margin-left:0.5em;
}

.attachments-images .attachment_delete
{

   position: absolute;
	top: -2px;
	right: -2px;
	width: 30px;
	height: 30px;
	background: transparent url('../../js/lib/fancybox/fancybox.png') -40px 0px;
	cursor: pointer;
	z-index: 1000;
}

.attachment_images_block img{
z-index:-1;
}

.attachments.vertical .attachment
{
	display:block;
	width:100%;
	clear:both;
}
.attachments.horizontal .single_file 
{
	display:inline-block;
/*	background-color:rgb(236,236,236);*/
	border:1px solid rgb(211,211,211);
	padding:0.2em;
	margin:0.2em;
	-o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    /* width: 100%;      */            /* fixed width */
	
}
 
	
.attachments_view .single_file 
{

	display:inline-block;
	border:1px solid rgb(211,211,211);
	padding:0.2em;
	margin:0.2em;	
}
#attachments_area{

	display:inline-block;
	vertical-align: top;
	width:50%
}


.margin_bottom_2{
	margin-bottom:2px;
	
}

input.short_link {
	border: 0;
	width: 600px;
	outline: 0;
	background-color: #e0e0e0;
	background: #e0e0e0 url("../images/icon_link.png") no-repeat 10px center;
	font-size: 16px;
	color: #666;
	padding: 10px 10px 10px 45px;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02),inset 0 1px 2px 0 rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.8);
	-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02),inset 0 1px 2px 0 rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.8);
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	position: relative;
}


.share-buttons{
	padding: 0px;
	display: inline;
}

.share-buttons li{
	display: inline;
	margin-right: 8px;
}

.share-buttons a span{
	display: inline-block;
	vertical-align: middle;
	background-size: auto;
	width: 32px;
	height: 32px;
}

.share-buttons a.fb span{
	background: no-repeat url(../images/sharing_icons.png) 0 -1680px;
}

.share-buttons a.tw span{
	background: no-repeat url(../images/sharing_icons.png) 0 -288px;
}

.share-buttons a.li span{
	background: no-repeat url(../images/sharing_icons.png) 0 -876px;
}

.share-buttons a.gplus span{
	background: no-repeat url(../images/sharing_icons.png) 0 -1232px;
}



.facebook_button {
	padding: 11px 14px 11px 0px;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	text-shadow: 0 1px 1px rgba(255,255,255,.5);
	background-color: #ccc;
	background-repeat: no-repeat;
	border: 1px solid #ccc;
	cursor: pointer;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration:none;
	color: #fff;
	background-color: #3c5d96;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear,left top,left bottom,from(#6079ab),to(#3c5d96));
	background-image: -moz-linear-gradient(#6079ab,#3c5d96);
	background-image: -ms-linear-gradient(#6079ab,#3c5d96);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6079ab),color-stop(100%,#3c5d96));
	background-image: -webkit-linear-gradient(#6079ab,#3c5d96);
	background-image: -o-linear-gradient(#6079ab,#3c5d96);
	background-image: linear-gradient(#6079ab,#3c5d96);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6079ab',endColorstr='#3c5d96',GradientType=0);
	border-color: #3c5a98;
	border-bottom-color: #273b64;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.facebook_button:hover
{
	text-decoration: none;
}

a.facebook_button span{
padding: 3px 0px 0px 35px;
background: url(../images/facebook_icon.png) no-repeat 0 -4px;
}
#need_dashboard_right_options{
	float:right;
	margin-right:5px;
}

#left_menu_responsive{
	display:none;
	background-color:#fbfbfb;
	width:100%;
	color:grey;
	cursor:pointer;
	margin-top:0.5em;
	border :1px solid #efefef;
	text-align:center;
	
}

.show_menu, .hide_menu{
	display:none !important;
}

.mobile-menu-button {
border: none;
background: none;
cursor: pointer;
text-align: left;
padding: 1px 1px;
float: left;
}

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -90px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
#footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 90px; 
}

div.customer_request_wrapper
{
	background-color: whitesmoke;
	padding: .1em 1em;
	margin-top: 1em;
}

.need-negotiation-status
{
	font-weight:bold;
}

.need-negotiation-status.negotiating
{
	color:green;
}

.need-negotiation-status.done-negotiating
{
	color:red;
}

.done-negotiating-command
{
	font-weight:bold;
}

.negotiating-command
{
	font-weight:bold;
}

input.where-search-box {
    background: #333;
    background: url('../images/pin_map_icon.png') no-repeat;
    width:100px !important;
    padding: 7px!important;
    padding-left: 30px !important;
    border: 0;
    
}

/*
* Invitation styles
*/

.invitation_response a.button.loginfirst,a.button.yes{
	font-size: 5em;
	line-height: 1em;
}

.invitation_response textarea{
	width: 100%;
	box-sizing: border-box;	
}

.invitation_response div.extra-yes-info {
	padding: 0.5em;
	background-color: whitesmoke;
	margin-right: 0.5em;
}

form[name="invitation_no"]{
	display:inline-block;
}

form[name="invitation_no"] .no-thank-you-legend{
	font-weight: bold;
	font-size: 130%;
}

form[name="invitation_no"] .no-thank-you-section{
	border: none;
	background-color: whitesmoke;
	margin-bottom: 1em;
}

form[name="invitation_no"] .no-thank-you-section p{
	margin-top:0.5em;
	margin-bottom:0.5em;
}

form[name="invitation_no"] .no-thank-you-section-legend{
	font-weight: bold;
	background-color: whitesmoke;
	border-radius: 0.25em;
}

form[name="invitation_no"] input[name="insteadrecommended"]{
	width:100%;
	padding-left:0px;
	padding-right:0px;
}

form[name="invitation_no"] input[name="freetextreason"]{
	width:100%;
	padding-left:0px;
	padding-right:0px;
}

form[name="invitation_no"] .button.nook{
	float:right;
	font-weight: bold;
}

form[name="invitation_no"] .disabled-text{
	color:gray;
}

/*
* End invitation styles
*/

.tabheader {
	margin-left: 0;
	margin-right: 0;
	background-color: #fff;
	border-width: 1px;
	border-color: #ddd;
	box-shadow: none;
	position: relative;
	margin: 0 0px 15px;
	margin-top: 0.5em;
}

.tabheader ul{
	list-style: none;
	padding:0;
	padding-bottom:1px;
	margin:0;
	border-bottom: 1px solid #dddddd;
	display: -webkit-box;
}

.tabheader > ul:last-child{
	margin-bottom: 0;
}

.tabheader li {
	float: left;
	margin-bottom: -1px;
	position: relative;
	display: block;
}

.tabheader li a {
	margin-right: 2px;
	line-height: 1.428571429;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	position: relative;
	display: block;
	padding: 10px 15px;
	color: #555555;
}

.tabheader li.active a, .tabheader li.active a:hover, .tabheader li.active a:focus {
	border-bottom: 3px solid #dd4b39;
	color: #dd4b39;
	cursor: default;
}

.suggest-field-form{
	padding: 0.25em;margin: 0.25em;
}

/*
* Suggestion form
*/

form.company-recommendation textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
}

form.company-recommendation .company-recommendation-ok {
	float:right;
}

ul.thumbnails li
{
	display:inline-block;
}


.message-overlay {
    
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1500;
}