/* Define CSS Variables and Re-Usuables */

@default-textcolor: #444;
@default-linkcolor: #51767c;
@default-linkhover: #6b979e;
@default-font: Arial, sans-serif;
@header-font: Georgia, serif;
@background-color: #f3f5ec;
@default-size:13px; 
@active-color:#C88C5B;
@contentbg:#f9f9f6;
@border-color:#e0e0e0;

/* End CSS Variables */

@import "/assets/css/foundation.css"; //Import the Reset Styles
@import "/assets/css/960.css"; // Import the 960 Grid 
body {font:13px/1.231 sans-serif; *font-size:small; background: @background-color; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: @default-textcolor; font-family: @default-font; }
h1,h2,h3,h4,h5,h6 { font-weight: bold;  font-family: @header-font;}
html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: @default-linkcolor; }
a:hover { color: @default-linkhover; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
/*
::-moz-selection{ background: yellow; color:#fff; text-shadow: none; }
::selection { background:yellow; color:#fff; text-shadow: none; } a:link { -webkit-tap-highlight-color: #FF5E99; } */


button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;	 } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


 /* Primary Styles
 Author: Matthew Bulfair */

.custom-size(@size:13px,@padding:10px){font-size: @size;line-height: @size + 4;padding: @padding 0;}
h1{.custom-size(24px);}
h2{.custom-size(22px);}
h3{.custom-size(20px);}
h4{.custom-size(18px);}
h5{.custom-size(16px);}
h6{.custom-size(15px);}
p{.custom-size(14px);}
.hide{display: none !important;}
.box{background: #fff; border-top:5px solid @border-color; border-bottom: 3px solid @border-color; padding: 15px; overflow: hidden;}
h1.headline{
	text-align: center; padding: 25px 0;
	cite{font-size: @default-size + 1;}
}
.rounded(@radius: 3px) { -webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}
.home{
	text-align: center;
	a {border:1px solid #e3e5dc; display:block; .rounded(15px);}
	a:hover{ border:1px solid @active-color; .rounded(15px);}
}
/*Define Header and Logo */
.header {background: #51767c; width: 100%; height: 65px; border-bottom: solid 2px #8baaaf;}
.content {background: @contentbg url('/assets/images/content_bg.jpg') repeat-x; width: 100%; overflow:hidden; padding:0 0 25px 0;}
.logo {margin: 5px 0 0 0;}


/*Navigation*/
.nav-items {font-size:@default-size + 2; font-family:@header-font; font-weight:bold;}
.navigation {
	.nav-items;
	a {text-decoration:none;}
	padding: 15px 0;
	li { display:inline; margin:0 15px 0 0;}
	li.last-item, li.bracket{margin: 0 2px 0 0; color:@default-linkcolor; font-size:@default-size - 1}
	li.portfolio-item{font-size:@default-size - 1}
	li.last{float: right;}
	a:hover{text-decoration:underline;}
	a.active{color:@active-color;}
}

.minibutton(@font-size: 11px,@background-start: #f4f4f4, @background-end: #ececec){
	display: block;padding:8px 10px; text-align: center;font-size:@font-size;font-weight:bold;color:@default-linkcolor;text-shadow:1px 1px 0 #fff;white-space:nowrap;border:none;overflow:visible;cursor:pointer;border:1px solid #d4d4d4;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:@background-start;background:-webkit-gradient(linear,left top,left bottom,from(@background-start),to(@background-end));background:-moz-linear-gradient(top,@background-start,@background-end);
}

/*Resume Section*/
.section{
	padding: 0 0 15px 0;
}
.download a {
	.minibutton(12px);
	float: right;
}
.download a:hover {
	.minibutton(12px,#ececec,#f4f4f4)
}
.subheadline {
	border-bottom: 3px double @border-color; padding: 0 0 10px 0;
}

#contact-information {
 	float: left; margin: 0; width: 400px; padding:8px 0;
	li {margin:2px 15px 2px 0; padding:2px 0;list-style: none; display:inline;}
	}
#social-networking {
	margin:22px 0 0 0; overflow: hidden; float: right; width:200px;
	li{list-style: none; margin: 0 2px 0 0; float:right;}
	li a {width:32px; height:32px; display:block;}
	li.linkedin a{ background: url('/assets/images/icons.png') no-repeat 0 0;}
	li.twitter a{ background: url('/assets/images/icons.png') no-repeat 0 -64px;}
	li.facebook a{ background: url('/assets/images/icons.png') no-repeat 0 -32px;}
	li.behance a{background:  url('/assets/images/icons.png') no-repeat 0 -96px;}
}
.downloadable {
	width: 145px; text-align: center;
	img {padding: 10px 0; width: 128px; height: 128px; }
	em {font-size: 11px;}
}
.item {
	position: relative; border-bottom: 1px dotted @border-color;
	em{.custom-size(14px);}
	.date{.custom-size(11px); position:absolute; top:10px; right:0; background:#F4F4F4; padding:5px 10px; border:1px solid #D4D4D4;}
	ul{
		display: block; margin: 10px 0 10px 15px; list-style: none; padding: 0 15px 0 0;
	}
	ul>li{
		margin: 0 0 10px 0;
	}
}
.skills{
	.custom-size(14px);
	margin:0 0 15px 0; list-style: none;
	li{ margin: 0 0 5px 0; overflow:hidden;}
	li strong {
		float: left; width: 69%;
	}
	.rating{display:block; height:16px; float:left; background:url('/assets/images/star.png') no-repeat top left;}
	.five{ width:85px;}
	.four{ width:69px;}
	.three{ width:51px;}
	.two{ width:34px;}
	.one{ width:17px;}
}

.recent-work {
	list-style: none; margin: 0;
	li {.custom-size(14px);}
	li strong {display: block;}
	
}
#awards{
	strong{display: block;}
	img{
		margin: 0 10px 0 0;
	}
}
#education {
	
	strong,em{display: block; margin:0 0 5px 0;}
	
	img {margin: 0 10px 0 0;}
	.date{
		.custom-size(13px); display: block; padding: 0;
	}
}

/*Portfolio Section*/
.portfolio {
	list-style: none; overflow: hidden; margin:0 0 10px 0;
	li{float:left; width:165px; margin:0 10px 10px 0; text-align:center;}
	a {
		overflow: hidden; height: 95px; display: block;border: 3px double @border-color;
	}
	li>strong {
		display: block; .custom-size(12px); padding: 0;
	}
	li>em{
		display: block;.custom-size(10px); padding: 0;
	}
	li img {
		
	}
	
}
.quick{
	list-style: none;
	margin: 0;
	li > a {.minibutton(12px);}
	li > a:hover {
		.minibutton(12px,#ececec,#f4f4f4);
	}
	li {
		margin: 0 0 5px 0;
	}
	li.last {
		margin: 15px 0 0 0;
	}
	li.last > a {
		.minibutton(10px);
	}
	li.last > a:hover {
		.minibutton(10px,#ececec,#f4f4f4);
	}
}

/*Contact Page */


#contact label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 155px; -webkit-border-radius:5px; }
#contact input, textarea, select { width: 250px; margin: 0; padding: 5px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; webkit-border-radius:5px; }   
#contact input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; }
#contact input.submit {.minibutton(14px);}
#contact input.submit:hover { .minibutton(14px,#ececec,#f4f4f4); }
#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset { padding:20px; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px;  width:90%;}
#contact legend { padding:7px 10px;  border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }
#message { margin: 10px 0; padding: 0; 
.success {padding:15px; .custom-size(15px); text-align:center; font-weight:bold;}}
acronym { border-bottom:1px dotted #ccc; } 

#contactform {
	em.error {font-size: 12px; margin: 0 0 0 5px; color: #8a1f11;}
}

#contact-email {
	padding: 0 0 15px 0; border-bottom: 1px dotted @border-color;
	strong a {.minibutton(18px); text-decoration:none;}
	strong a:hover {.minibutton(18px,#ececec,#f4f4f4);}
}
#contact-phone {
	strong{display: block; text-align: center; .custom-size(18px);}
	
}



/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */
ul.error,.alert,input.error,textarea.error { background: #fbe3e4 !important; color: #8a1f11 !important; border-color: #fbc2c4 !important;}
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 			{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a			{ color: #205791; }




/*Footer Section*/
.footer{
	background: url('/assets/images/footer_bg.jpg') repeat-x; width: 100%;
	
	p {
		font-size: 10px; padding: 10px; text-align: center; display: block;
	}
}