$baseFontSize : 14px;
$importantModNum : 20px;
$headerFontFamily : 'Palatino', 'serif';
$headerFontWeight : bold;



@import "compass";
@import "compass/reset";


@import "general";

html { height: 100%;width: 100%; }


body{
	font-family:Palatino, Georgia;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
	
	#index_images{
	
	margin:0 -4px;
	img{
	padding:4px;
	margin:0;
	display:block;
	float:left;
	
	&:hover{
	opacity:0.8;
	
	}
	}
	
	}
	
	
	#admin_over{
	
	.ace_editor{
		height:400px;
		width:57%;
		border:solid 1px #C9C9C9;


		.ace_scroller{


			background:transparent !important;
		}




	}
	position:fixed;
	top:0px;
	left:0px;
	z-index:3;
	
	#portfolio_form{
	background:rgba(250,250,250, 0.9);
	padding:1em;
	}
	
	}
	
	#top{
	background:#383838;
	color:white;
	padding:1em;
	margin-top:1em;
	a{
	color:white;
	}
	
	}
	
	
	
	#small_index{
		position:fixed;
		left:252px;
		right:2px;
		top:0px;
		bottom:0px;
		background:rgba(250,250,250, 0.9);
		overflow:auto;
		z-index:2;
		
		display:none;
		&.active{
		display:block;
		
		}
	
	}
	
	#left{
	
		position:fixed;
		left:0px;
		//top:1em;
		width:250px;
		z-index:3;
	
		
	
		#logo{
			display:block;
			margin:25px 0;
	
		}
	
	
		#menu{
		padding-top:1px;
			padding-left:25px;
			background:#97bc4a;
			color:white;
			padding-bottom:4em;
			*{
				color:white;
	
			}
		}
	}
	
	#main{
		margin-left:250px;
		
		padding:1px 1em;
		.text{
		max-width:600px;
		margin:auto;
		
		}
		
		.text{
		img{
		max-width:100%;
		}
		
		}
	}
	#pagination{
	
	background:red;
	width:100px;
	height:100px;
	border-radius:50%;
	
	position:fixed;
	z-index:2;
	right:1em;
	bottom:1em;
	color:white;
	*{
		color:white;
	}
	}
}


#logo{

width:100px;

}

.portfolio{


	.intro{
		text-align:center;
		max-width:70%;
		margin:auto;
		*{
			text-align:center;
		}
	}
	
	.fileupload{
		display:none;
	}
	
	.images{
		min-height:400px;
		text-align:center;
		font-family:courier;
		
		.image_block{
			
			display:inline-block;
			max-width:90%;
			margin:auto;
			margin-top:2em;
			position:relative;

			.image{
				max-height:90%;
				max-width:100%;
			
			}
			
			.title{
				text-align:left;
				color:gray;
				
				.exifs{
					position:absolute;
					right:0;
					top:0px;
					width:110%;
					font-size:0.6em;
					text-align:right;
					
					@include transform-origin(top, right); 
					@include rotate(-90deg);
					
					&:hover{
					font-size:1em;
					}
				
				}
			}
			
			.time{
				color:gray;
				float:right;
				position:absolute;
				right:0px;
			
			
			}

			.admin{
				display:none;
				position:absolute;
				top:0px;
				left:0px;
				bottom:1em;
				width : 200px;		
				background:rgba(250,250,250, 0.9);
				overflow:auto;
				z-index:2;
			
			}
		
			&:hover{
				.admin{
					display:block;
				}
			
			}

		}

		
	}
}

@media only screen and (min-width: 890px)  {

#main{
	
	
	
	
	.text{
	img{
	max-width:110% !important;
	margin-left:-5%;

	}
	
	}
}

}

@media only screen and (min-width: 1200px)  {

#main{
	
	
	
	
	.text{
	img{
	max-width:130% !important;
	margin-left:-20%;
	
	}
	
	}
}

}

@media only screen and (min-width: 1250px)  {

.portfolio{



	.images{
	
		.portfolio_image_block{
			
			max-width:900px;
		

			.image{
				
				max-height:85%;
				max-width:100%;
				

			}

}}}}