@font-face {
    font-family: 'TradeGothicLTStdCnNo18';
    src: url('/fonts/tradegothicltstd-cn18-webfont.eot');
    src: url('/fonts/tradegothicltstd-cn18-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/tradegothicltstd-cn18-webfont.woff') format('woff'),
         url('/fonts/tradegothicltstd-cn18-webfont.ttf') format('truetype'),
         url('/fonts/tradegothicltstd-cn18-webfont.svg#TradeGothicLTStdCnNo18') format('svg');
    font-weight: normal;
    font-style: normal;

}
html, body {
  height:100%;
  width:100%;
  min-width: 1000px;
}
body {
  background-color:#e0e0de;
  color:rgb(50, 50, 50);
  text-align:center; /* horizontal centering for IE Win quirks */
  font: 62.5% Arial, Helvetica, sans-serif;
  line-height: 1;
  background-image: url(/img/border.gif);
  background-repeat: repeat-y;
  background-position: center center;
}
h2 {
	font-size: 1.8em;
	line-height: 2em;
}
p {
	font-size: 1.2em;
	line-height: 1.3em;
}
a{
	color:rgb(50, 50, 50);
}

a:hover{
	color: #FC9111;
}
a.current{
	color: #FC9111;
}
#IEwarning {
	color: red;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	left: 60px;
	top: -20px;
}

.right {
  text-align: right;
}
.left {
  text-align: left;
}
.fifty {
  height: 50px; 
}
.error, #warning {
	color: red;
}
input.error, select.error, textarea.error {
	border: 1px dotted red;
}
select.error{
	color: #fff;
}
span.error
{
	position: absolute;
	right: 0px;
}
.warning {
	position: relative;
	height: 1px;
}
.warning .error {
	position: absolute;
	left: 210px;
	top: -22px;
	width: 300px;
	font-size: 10px;
}

td {
vertical-align: middle;
}
td.top {
vertical-align: top;
}
#top{
  margin: 0 auto;
  height: 50px; 
}
#footer{
  background-color: #e0e0de;
  width: 100%;
  height: 50px;
  font-family: "Times New Roman", Times, serif;
  background-image: url(/img/border.gif);
  background-repeat: repeat-y;
  background-position: center center;
  position: absolute;
  bottom: 0;
  text-align: center;
}

#distance { 
  width:1px;
  height:50%;
  background-color:#fff;
  margin-bottom:-350px; /* half of container's height */
  float:left;
}

#container {
  margin:0;
  position:relative; /* puts container in front of distance */
  text-align:left;
  height:650px;
  width:100%;
  clear:left;
  background-color:#fff;
} 
#page{
  height: 600px;
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
#content {
  margin-right: 50px;
  margin-left: 50px;
  width: 900px;
  margin-top: 20px;
}
#holder {
  position: absolute;
  top: 80px;
  text-align: center;
  width: 900px;
}

#rss {
	position:absolute;
	top: -40px;
	right: 20px;
}
/****************** Menyn ******/


.menu {
  width: 905px;
  clear: both;
  margin-left: 50px;
}
.menu ul {
  list-style-type: none;
  height: 80px;
  font-size: 1.5em;
}
.menu ul li {
  vertical-align: middle;
  padding: 0px;
  float: left;
  margin-top: 30px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
.menu ul li a {
  text-decoration: none;
  color: rgb(50,50,50);
}
.menu ul li a:hover, .menu ul li.current a {
  background-repeat: no-repeat;
  background-position: 0px -30px;
  color: rgb(180,180,180);
}
li#home {
width: 205px;
margin-right: 0;
}
li#home a img{
position: relative;
top: -80px;
}
a.about{
  background-image: url(/img/about.gif);
  background-repeat: no-repeat;
  height: 32px;
  width: 98px;
  display: block;
    
}
a.freelance{
  background-image: url(/img/freelance.gif);
  background-repeat: no-repeat;
  height: 32px;
  width: 174px;
  display: block;
    
}
a.client{
  background-image: url(/img/client.gif);
  background-repeat: no-repeat;
  height: 32px;
  width: 146px;
  display: block;
    
}
a.utopia{
  background-image: url(/img/utopia.gif);
  background-repeat: no-repeat;
  height: 32px;
  width: 118px;
  display: block;
    
}
a.jobs{
  background-image: url(/img/jobs.gif);
  background-repeat: no-repeat;
  height: 32px;
  width: 63px;
  display: block;   
}
a.contact{
  background-image: url(/img/contact.gif);
  background-repeat: no-repeat;
  height: 32px;
  width: 100px;
  display: block;
    
}

/********* Forms ******/

#request, #join, #login, #contact {
	background-color: #f0f0f0;
	position: relative;
	top: 0px;
}
#join, #request, #login {
	top:20px;
}
#login {
	height: 305px;
}
#join table {
	position: relative;
	left: -100px;		
}

#request #loader, #requestInfo, #jobInfo, #legalInfo {
	display:none;
	z-index:10000;
	background-color: #fff;
	width:350px;	
	min-height:0px;
	padding: 20px;
	font-size: 14px;
	-moz-box-shadow: 0px 0px 10px #666;
	-webkit-box-shadow: 0px 0px 10px #666;
	box-shadow: 0px 0px 10px #666;
	font-size: 13px;
}
#requestInfo, #legalInfo {
	width:500px;
	text-align: left;
	font-family: TradeGothicLTStdCnNo18, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
#requestInfo p, #requestInfo em, #legalInfo p {
	padding: 0px 20px;
	font-size: 13px;
	
}
#requestInfo h3, #legalInfo h2 {
	padding: 20px 20px 5px;
	font-size: 14px;
	font-weight: bold;
}
#requestInfo em {
	padding: 20px;
	display: block;
	line-height: 16px;
	
}
#jobInfo, #legalInfo {
	padding: 20px 0px 20px 20px;
	width: 640px;
}
.contentWrap {
	overflow: auto;
	width. 620px;
	height: 500px;
	padding: 0px 20px 0px 0px;
}
#legalWrap
{
	text-align: left;
	overflow: hidden;
	width. 620px;
	height: 300px;
	padding: 10px 20px 10px 20px;	
}
#legalWrap{
	font-family: TradeGothicLTStdCnNo18, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: justify;

}
#legalWrap h2{
	margin: 0px;
	padding: 0px;
	line-height: 16px;
	text-align: center;
	font-size: 14px;
}
#legalWrap p{
	margin: 0px 10px 15px;
	padding: 0px;
	font-size: 13px;
}
#showInfo {
	position: relative;
	background-color: #ccc;
	padding: 2px 6px;
	cursor: pointer;
	left: -10px;
}
table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 15px;
	margin: 15px auto 10px;
}
#request td, #join td {
	text-align: right;
}
th {
	font-weight: bold;
}
th h1{
	margin-left: 15px;
	font-size: 13px;
	line-height: 15px;
	margin-bottom: 10px;
}
input, textarea, select
{
	padding: 2px 4px;
	border: 1px solid #d4d4d4;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 15px;
	width: 170px;
	margin-bottom: 5px;
	margin-left: 15px;
}

select
{
	background-color: #646464;
	width: 180px;
	color: #fff;
}
#ccode
{
	width: 70px;
}

#phone
{
	width: 95px;
	margin-left: 0px;
}
#terms, .terms {
	width: 19px;
	height: 19px;
	float: left;
}
.terms {
	background-image: url(/img/checkbox.gif);
	background-repeat: no-repeat;
	display: block;
	display: none;
	margin-left: 15px;
	position: relative;
	top: -3px;
	cursor: pointer;
}
.checked {
  background-position: 0px -19px;
}

#rate {
	width: 78px;
}
#currency {
	width: 90px;
	margin-left: 0px;
}
#startdate
{
	width: 78px;
}
#enddate
{
	width: 80px;
	margin-left: 0px;
}
textarea#desc {
	height: 248px;
	width: 292px;
}
textarea#contactMessage {
	height: 160px;
	width: 600px;
	margin-right: 10px;
}
#submitRequest, #closeLoader, #contactSend {
	background-color: #646464;
	width: 60px;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	cursor: pointer;
	padding-top: 3px;
	padding-bottom: 1px;
}
#loginForm input {
	margin-top: 2px;
	margin-bottom: 2px;
	width: 200px;
}
#loginForm input.login, #forgotform input.login {
	width: 50px;
	color: #fff;
	border: none;
	background-color: rgb(80,80,80);
	font-size: 11px;
	padding: 3px 0px 2px; 
	-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;
	cursor: pointer;
}
a#forgotpwd {
	font-size: 11px;
	float: left;
	margin-left: 17px;
	color: rgb(140,140,140);	
}
a#forgotpwd:hover {
	color: #fc9111;	
}

.newsletter {
margin-top: 30px;
}
/********* Preview & Featured ******/

#submenu {
  width: 900px;
  height: 130px;
  background-color: #CCC;
  background-image: url(/img/featured_bg.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  position: absolute;
  bottom: 25px;
  left: 50px;
}
#submenu ul {
    float: left;
    margin-right: 20px;
}
#submenu li {
  width: 200px; 
}
#submenu li:first-child {
  color: white;
  text-transform: uppercase;
  border-bottom: 1px solid #505050;
  line-height: 16px;
  margin-bottom: 5px;
}
#submenu li a {
  font-weight: normal;
  line-height: 14px;
  font-size: 11px; 
}
#submenu h2 {
	font-family: TradeGothicLTStdCnNo18, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	padding: 0px;
	margin-bottom: 2px;
	line-height:16px;
	color: #323232;
}
#submenu #info {
	padding-top: 18px;
}
/********* Footer ******/

#footer p { 
  font-size: 12px;
  line-height: 25px;
  text-transform: uppercase;
  color: #323232;
  height: 50px;
  overflow: hidden;
  letter-spacing: .6px;
width: 860px;
margin: 10px auto 0;
text-align: center;
}
#footer Img {
  vertical-align: middle;
}
#info {
  padding: 20px 0px 20px 18px;

}

#copyHolder{
	position: relative;
	top: 2px;
}



/********* Page - Contact ******/

#contactform{
	position: absolute;
	width: 900px;
	background-color: #f0f0f0;
	padding: 50px 0px 30px;
}

#contactInfo{
	text-align: center;
	font-size: 12px;
	padding-top: 10px;
}

/********* Page - Login ******/

#login table
{
	margin-top: 100px;
}
#resetPassword table
{
	margin-top: 0px;
}
#login th
{
	padding: 0px 0px 5px 15px;
}
#forgotform h1
{
	font-size: 16px;
	margin-bottom: 4px;	
}
#forgotform p
{
	font-size: 14px;	
}
#freshuser h1, #freshuser p
{
color: rgb(120,120,120);
text-shadow:  rgb(200,200,200) 2px 2px 2px;
}
body #freshuser h1
{
margin: 50px 0px 0px;
}
#login #freshuser table {
margin-top: 15px;
}

#freshuser th {
display: none;
}

#freshuser p a {
text-decoration: underline;
color: #FC9111; 
}
#login #warning
{
font-size: 14px;
position: relative;
top: 85px;
}

/********* Page - Jobs ******/
#searchResult {
	margin-top: 20px;
}
#searchResult th{
	background-color: rgb(180,180,180);
	line-height: 14px;
	font-size: 11px;
	color: #fff;
	padding: 2px 10px;

}
#searchResult td{
	background-color: rgb(240,240,240);
	line-height: 14px;
	font-size: 11px;
	color: #505050;
	padding: 2px 10px;
	border-top: 1px solid white;
}
#searchResult .centered{
	text-align: center;
}
.last {
    text-align: right;
}
#searchResult th.last {
	color: #FC9111;
}
/********* Page - Social ******/

#social {
	background-color: #f0f0f0;
	position:absolute;
	width: 900px;
	height: 300px;
	top: 25px;
}
#social p img{
	margin-top: 20px;
}

/********* Page - Browse ******/


#pager
{
	position: absolute;
	top: 15px;
	width: 900px;
}
#pager form
{
	position: absolute;
	top: 0;
	font-size: 12px;
}
#pager form#filter
{
	left: 0;
}
#pager form#pages
{
	right: 0;
	line-height: 20px;
}
#pager select
{
	font-size: 12px;
	padding: 0px 0px 0px 2px;
	margin: 0px 2px;
}

#pager input
{
	font-size: 12px;
	padding: 0px 0px 0px 2px;
	width: 40px;
	margin: 0px 2px;
}
#pager select.pagesize, .firstpage, .lastpage
{
	display: none;
}
#pager a
{
	cursor: pointer;
	font-size: 12px;
}
#pager a.current
{
	color: #FC9111;
	font-weight: bold;
}
.talents
{
	position: absolute;
	top: 20px;
}

/********* Misc. ******/

#noFlash {
border: 1px solid #ccc;
position: relative;
width: 400px;
margin: 0 auto;
top: 200px;
padding: 20px;
}
#noFlash h3
{
font-size: 22px;
line-height: 30px;
margin-top: 10px;
}
#noFlash img{
float: left;
margin-right: 20px;
}
#loader, #requestInfo {
display: none;
}

/********* Errors ******/
.errorHolder {
  display: none;
}
#error 
{
	color: red;
	font-size: 18px;
	line-height: 25px;
	position: absolute;
	top: 20px;
	left: 50px;
}
div.error {
	text-align: center;
}

/********* Panes with slideshow  ******/

/* container for slides */
.images {

  position:relative;  
  height:300px;
  
  width:900px;
  float:left; 
  cursor:pointer;
  top: 20px;

}

/* single slide */
.images div {
  display:none;
  position:absolute;
  top:0;
  left:0;   
  margin:0px;
  padding:0px 0px;
  height:300px;
}

/* header */
.images .contentHolder {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 900px;
	height: 300px;
}
.contentHolderBg
{
	width: 100%;
	height: 200px;
	position: absolute;
	top: 50px;
	display: block;
	background-color: #000;
    /* Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=30);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.3;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.3;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.3;
}

/* header */
.images h1, #freshuser h1, .images p, #freshuser p, .scrollable p, .scrollable h1   {
	font-family: TradeGothicLTStdCnNo18, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	color: #fff;
	text-shadow:  rgb(50,50,50) 2px 2px 2px;
}
.images h1, #freshuser h1, .scrollable h1 {	
	font-size: 55px;
	margin: 70px 0 0px 0;
line-height: 55px;
}
.images p, #freshuser p, .scrollable p {
	font-size:28px;
	margin:0 20px;
line-height: 28px;
}
#firstContent p, #firstContent h1, #freshuser h1, #freshuser p
{
color: rgb(120,120,120);
text-shadow:  rgb(200,200,200) 2px 2px 2px;
}
.items p a
{
	color: #fff;
	font-size: 20px;
	margin: 0 10px;
}
#main p a:hover
{
	color: #FC9111
}
.scrollable span.bullet{
	color: #FC9111;
	position: relative;
	top: -2px;
}
#main hr
{
	border-style: solid;
	width: 50px;
	color: #FC9111;
	margin: 15px auto;
}

/* CSS rules for jquerytools tabs plugin 
/* tabs (those little circles below slides) */
.slidetabs {
  	clear:both;
	margin: 20px auto;
	width: 56px;
	padding-top: 35px;
}

/* single tab */
.slidetabs a {
	  width:12px;
	  height:12px;
	  float: left;
	  margin:15px 1px;
	  background:url(/img/bullet.gif) 0 0 no-repeat;
	  display:block;
	  font-size:1px;    
}

/* mouseover state */
.slidetabs a:hover {
  	background-position:0 -13px;      
}

/* active state (current page state) */
.slidetabs a.current,  .slidetabs a.active{
  background-position:0 -13px;   
}   


/* CSS rules for jquerytools scrollable plugin

/* next */
.prev, .next        { background-position: 0 -30px; clear:right; display: none; }


/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
  visibility:hidden !important;   
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 900px;
	height:300px;
top: 25px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
  	height:300px;	
  	width: 900px;
	position:relative;
}

/* Utopia specific setup for scrollable */
 .scrollable div {
  height:300px;	
  width: 900px;
}
.scrollable .contentHolder {
	position: absolute;
	top: 0px;
left:0px;
	width: 900px;
	height: 300px;
}
.scrollable .contentHolderBg {
	width: 900px;
}
.scrollable span span{
	position: absolute;
	top: 0px;
left: 0;
width: 900px;
}
.slidetabs {
    clear: both;
    margin: 20px auto;
    padding-top: 5px;
    width: 56px;
}