/**************************** project images ****************************/

.project_header {
	display: block;
	position: relative;
	margin-bottom: 35px;
}

.project_header p {
	line-height:150%;
}

#project_leftbox {
	margin-top: 70px;
}

#project_leftbox ul {
	display:block;
	float:left;
	clear:both;
	list-style: none;
	margin:0;
	padding:0;
}

#project_leftbox ul li{
	padding-top:7px;
	padding-bottom:7px;
	border-bottom:1px dotted Silver;
}

#project_leftbox ul li:last-child {
	border: none;
}

#project_leftbox ul li a{
	color:Gray;
	text-decoration:none;
}

#project_leftbox ul li a:hover{
	color:Black;
	text-decoration:underline;
}

#project_rightbox {
	display:block;
	float:left;
	width:764px;
	/*overflow:hidden;*/
}

#project_rightbox ul {
	display:block;
	float:left;
	clear:both;
	list-style: none;
	margin:0;
	padding:0;
}

#project_rightbox h2 {
	font-style:normal;
	font-weight:100;
	font-size: 46px;
	letter-spacing:0.7px;
	line-height: 1.05em;
	color:Gray;
	border-bottom:1px dotted Silver;
	margin-bottom: 21px;
}

#project_rightbox h2 span{
	padding-left:5px;
	font-style:normal;
	font-weight:normal;
	font-size:11px;
	letter-spacing: 0px;
	color:Gray;
	white-space:nowrap;
}

#project_rightbox h3{
	padding:0;
	margin:0;
	margin-bottom:10px;
}

/**************************** profile project icons ****************************/

#projects > ul, #projects_sample > ul {
	display:block;
	width:100%;
	float:left;
	clear:both;
	list-style: none;
	margin:0;
	padding:0;
}

#projects > ul > li, #projects_sample > ul > li{
	position:relative;
	width:300px;
	height:240px;
	display:block;
	float:left;
	margin-right:28px;
	margin-top:28px;
	text-align:left;
	overflow:hidden;
}

#projects ul li .box, #projects_sample ul li .box{
	display:block;
	color:Gray;
	text-decoration:none;
}

/********* styles for edit mode only *********/

.help_iconize_wrapper {
	display: block;
	position: absolute;
	z-index: 10;
	top: 36px;
	right:44px;
	width: 200px;
	height: 100px;
}

.help_iconize {
	display: block;
	position: relative;
	padding: 14px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
	background-color: Yellow;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFB00), to(#FFD500));
	background: -moz-linear-gradient(top, #FFFB00, #FFD500);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFB00', endColorstr='#FFD500');
}

.help_iconize_wrapper .arrow-up {
	position: relative;
	top: 3px;
	left: 171px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #FFFB00;
}

.layer_del, .layer_confirmdel, .layer_transpa, .layer_controls {
	display:none;
}

#projects.edit .box,
#projects.edit .layer_transpa,
#projects.edit .layer_del{
	display:block;
	text-decoration:none;
	color:#4B473B;
	overflow:hidden;
}

#projects.edit .layer_transpa {
	z-index:1;
	display:none;
	float:left;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-color:Black;
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
	}
	
#projects.edit .layer_controls{
	z-index:2;
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	color:Gray;
	background-image: url('../images/slot_overlayer_view.png');
	background-position: center center;
	}
	
#projects.edit .layer_controls a.view {
	position: relative;
	left: 0px;
	top: 0px;
	display: block;
	width: 100%;
	height: 100%;
}

#projects.edit .layer_controls a.view:hover {
	background-color: inherit;
}

#projects.edit .move {
	position:absolute;
	display:block;
	bottom:0px;
	left:0px;
	width:100%;
	height:60px;
	color:White;
	cursor:pointer;
	background-image: url(../images/dragger.png);
	background-position: top center;
	cursor:move;
}

#projects.edit .del {
	position:absolute;
	display:block;
	top:0px;
	right:0px;
	padding: 15px;
	float:right;
	text-align: right;
}

#projects.edit .del:hover {
	color: Red;
}

#projects.edit .layer_del {
	z-index:3;
	display:none;
	float:left;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-color:White;
	filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
}

#projects.edit .layer_confirmdel {
	z-index:4;
	display:none;
	float:left;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:80%;
	color:Gray;
	background-image: url('../images/slot_overlayer.png');
	text-align: center;
}

#projects.edit .confirmdel, #projects.edit .closedel {
	margin: 0 auto;
	margin-top: 100px;
	vertical-align: middle;
	display: inline-block;
}

#projects.edit .closedel {
}

#projects.edit .closedel:hover {
	text-decoration:underline;
}

/********* slot edit styles *********/

#slots .panel-heading {
	position: relative;
}

#slots {
	position: relative;
}

#slots ul {
	display:block;
	width:100%;
	float:left;
	clear:both;
	list-style-type: none;
	margin:0;
	padding:0;
}

.placeholder {
	display:block;
	border:1px dashed Yellow;
	width:25px;
	height:25px;
}

#slots .slot_editbox {
	float:left;
	width:100%;
	height: inherit;
	padding:0;
	margin-bottom:14px;
	overflow:hidden;
	
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
		
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F4F4F4');
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F4F4F4));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: -moz-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: -ms-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: -o-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: linear-gradient(top, #FFFFFF, #F4F4F4); /* standard, but currently unimplemented */
}

.slot_editbox .layer_confirmdel {
	display:none;
	position:absolute;
	top:0px;
	right:0px;
	margin: 9px;
	padding:5px 11px 6px 0px;
	text-shadow: none;
}

#slots.edit ul li .confirmdel{
	background-color:#CC0000;
	color:White;
	padding:7px 14px 7px 14px;
	margin-right:7px;
}

#slots.edit ul li .confirmdel,
#slots.edit ul li .closedel {
}

#slots.edit ul li .confirmdel:hover,
#slots.edit ul li .closedel:hover {
	text-decoration:underline;
}

.slot_head {
	position:relative;
	float:left;
	width:100%;
	color:Gray;
	font-weight:bold;
	
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F4F4F4');
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F4F4F4));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: -moz-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: -ms-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: -o-linear-gradient(top, #FFFFFF, #F4F4F4);
	background-image: linear-gradient(top, #FFFFFF, #F4F4F4); /* standard, but currently unimplemented */
}

.slot_caption {
	position:relative;
	padding:14px;
	font-size: 13px;
}

.slot_caption:hover {	
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='White', endColorstr='Silver');
	background-image: -webkit-gradient(linear, left top, left bottom, from(White), to(Silver));
	background-image: -webkit-linear-gradient(top, White, Silver);
	background-image: -moz-linear-gradient(top, White, Silver);
	background-image: -ms-linear-gradient(top, White, Silver);
	background-image: -o-linear-gradient(top, White, Silver);
	background-image: linear-gradient(top, White, Silver); /* standard, but currently unimplemented */
}

.slot_controls  {
	position: absolute;
	width:70px;
	height:18px;
	text-align:right;
	padding:2px;
	top: 0px;
	right: 0px;
	margin: 12px;
	}

.slot_del {
	float:right;
	width:16px;
	height:16px;
	background-image: url(../images/cross.png);
	background-repeat:no-repeat;
	cursor:pointer;
}

.slot_move {
	float:right;
	width:16px;
	height:16px;
	background-image: url(../images/icon_move.gif);
	background-repeat:no-repeat;
	background-position:3px 3px;
	margin-right:7px;
	cursor:move;
}

.slot_iconize a{
	float:right;
	display:block;
	width:15px;
	height:15px;
	background-image:url(../images/icon_crop.png);
	background-repeat:no-repeat;
	margin-top:2px;
	margin-right:7px;
	cursor:pointer;
}

.slot_iconize span.disabled{
	float:right;
	display:block;
	width:15px;
	height:15px;
	background-image:url(../images/icon_crop_disabled.png);
	background-repeat:no-repeat;
	margin-top:2px;
	margin-right:7px;
	cursor:not-allowed;
}

.slot_body {
	position: relative;
	clear:both;
	padding:14px;
}

.slot_image {
	position: relative;
	clear: both;
	border: 14px solid White;
	background-color: White;
	overflow: hidden;
}

.slot_embedbox {
	display:none;
}

.slot_videocode  {
	clear: both;
}

.project_title_jedit, .project_title_jedit input {
	font-style:normal;
	font-weight:100;
	font-size: 46px;
	letter-spacing:0.7px;
	line-height: 1.05em;
	color:Gray;
	border-bottom:1px dotted Silver;
}

/**************************** jeditable fields when they are being edited ****************************/

.project_title_jedit input,
.slot_title_jedit input,
.project_desc_jedit textarea,
.slot_desc_jedit textarea {
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	background-color: #FFFFD3;
	padding: 4px;
	border: 1px solid #CCCCCC;
	margin-bottom: 4px;
}

project_title_jedit input {
	font-size: 22px;
}

.slot_title_jedit input {
	font-size: 15px;
	font-weight: bold;
	margin-right: 4px;
}

.project_desc_jedit textarea,
.slot_desc_jedit textarea {
	font-size: 12px;
}

project_title_jedit input:focus,
.slot_title_jedit input:focus,
.project_desc_jedit textarea:focus,
.slot_desc_jedit textarea:focus {
	border: 1px solid #CCCCCC;
}

/**************************** end of jeditable fields ****************************/

.project_desc_jedit button[type=submit]{
}

.project_desc_jedit button[type=cancel]{
}

.slot_title_jedit {
	float: left;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 14px;
	color: Black;
}

.slot_desc_jedit {
	margin-top: 14px;
}

#project_head {
	width:100%;
	float:left;
	clear:both;
	margin-bottom:14px;
}

#project_breadcrump {
	float:left;
	width:188px;
}

#project_preview {
	float:right;
	text-align:right;
	margin-right:14px;
}

/********* END OF styles for edit mode only *********/



/********* front end styles *********/

#projects {
	position: relative;
}

#projects ul li a:hover{
	background-color:Silver;
}

#projects ul li a:hover h2{
	color:White;
}

#projects ul li a:hover .views,
#projects ul li a:hover .date{
	color:Silver;
}

#projects .imgbox, #projects_sample .imgbox {
	display:block;
	width: 100%;
	height:200px;
	text-align:center;
	background-color:White;
	margin-bottom:2px;
	overflow:hidden;
	box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
	background-image: url(../images/default_icon.gif);
}

#projects ul li img, #projects_sample ul li img{
	border:0;
}

#projects > ul > li h2, #projects_sample > ul > li h2{
	font-size:11px;
	padding:0;
	margin:0;
	margin-top: 5px;
	font-weight:Bold;
	text-overflow:ellipsis;
	overflow:hidden;
	text-transform:capitalize;
}

#projects .project_category,
#projects_sample .project_category,
#project_header  .project_category{
	background-color:Gray;
	color:White;
	font-size:10px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:5px;
	padding-right:5px;
	display: none;
}

#projects .views,
#projects .date,
#project_details  .views,
#project_details  .date {
	color:Gray;
}

#project_details p {
	line-height: 150%;
}

/**************************** profile project page ****************************/

#profile_projectbox {
	display:block;
	float:left;
	width:960px;
	overflow:hidden;
	text-align:center;
}

#project_header {
	width:842px;
	float:left;
	clear:both;
	margin-bottom:11px;/*there is already a natural border of 3px that cannot be cleared for some reason 3+11 = 14*/
	margin:auto;
}

/* this may be deleted, it's probably not in use any more
#project_details {
	float:left;
	width:90px;
	padding:14px;
	text-align:left;
}*/

#project_description {
	float:left;
	width:696px;
	padding-right:14px;
	padding-left:14px;
	text-align:left;
	clear:right;
}

#project_description h1 {
	font-size:18px;
	color:Black;
}

#project_description p {
	color:#333333;
}

#profile_projectbox table{
	clear:both;
	margin:auto;
}

#project_footer {
	float:left;
	width:856px;
	padding:14px;
	padding-left:90px;
	padding-top:0px;
	text-align:left;
	background-color:#EEEEEE;
}

#project_footer h2 {
	font-size:16px;
}

#project_footer a{
	color:Gray;
}

#profile_projectbox  ul{
	display:inline;
	list-style: none;
	margin:0;
	padding:0;
}

#profile_projectbox .imgbox{
	text-align:left;
	margin-bottom:9px;/*there is already a natural border of 5px that cannot be cleared for some reason 5+9 = 14*/
}