/* Blue Style */

/* Imports */
@import url(../css/mixins.less);

// VARIABLES

// Colors
@color_links: #52a8e8; // Links / Main theme colour 
@color_body: #3c4851; // Body Copy not inside frames
@color_content: #555; // content color inside frames
@color_shadow: #fff; // text shadow

// Borders
@border_main: #d6dfe5; // The 1px grey rules used throughout the WF
@border_top: #232729; // The 1px grey rules used throughout the WF

// Buttons
@button_grey: #9aa3a9;
@button: #227fc6;

// Backgrounds
@bg_light: #fdfdfd;
@bg_dark: #c6ced3;


/*-------------------------------------------------------------------------------------------*/
/* 1. SETUP */
/*-------------------------------------------------------------------------------------------*/


/* 1.1 Defaults */

body  { color: @color_body; background: url(blue/bg-body.png) repeat; }

h1, h2, h3, h4, h5, h6  { color: darken(@color_body, 10%); }

hr { background-color: @border_main; }

input, textarea { border-color: darken(@border_main, 8%) @border_main @border_main darken(@border_main, 8%); color: @color_content; }

/* 1.2 Hyperlinks */

a { 
	color: @color_links; 
	&:hover {
		color: @color_links - #222;
	}
}


/*-------------------------------------------------------------------------------------------*/
/* 2. SITE STRUCTURE & APPEARANCE */
/*-------------------------------------------------------------------------------------------*/

/* 2.1 Containers & Columns */

#content-wrap { border-bottom: 1px solid darken(@border_main, 10%); }

#footer-wrap { 
	background: url(blue/bg-footer.png) repeat; 
	border-bottom: 1px solid darken(@border_main, 10%);
	border-top: 1px solid @color_shadow;	
}

/* 2.2 Navigation */

.nav {
	a {
		border-color: transparent darken(@border_main, 5%) transparent #fff;		
		color: lighten(@color_body, 20%); 
		text-shadow:0 1px 0 @color_shadow;
		&:hover { color: darken(@color_body, 15%); }
	}
	li {
		&.current_page_item, &.current_page_parent, &.current-menu-ancestor, &.current-cat, &.li.current-menu-item, &.sfHover {
			a { color: darken(@color_body, 15%); }
		}
	}
}

/* Optional Styling */
#navigation { 
	border:1px solid darken(@border_main, 5%); 
	.vertical_gradient(#ffffff,#f5f5f5);
}

/* 2.2.1 Drop-down menus */

#navigation .nav li ul { background: @bg_light; border-color: darken(@border_main, 5%) }
#navigation .nav li ul a { color: lighten(@color_body, 20%); }
				
/* 2.3 Header */
#header-wrap { 
	border-bottom: 1px solid darken(@border_main, 10%);
	border-top: 3px solid @border_top;
}

#header {
	.site-title, .site-description {
	    a { color: darken(@color_body, 20%); }
	}
	.site-description { color: lighten(@color_body, 10%); }
}				

/* 2.4 Content */
#content { 
	
	#intro { 
		border-bottom: 1px solid @border_main;
		.box_shadow(0,1px,0,0,@color_shadow);
		p { color: lighten(@color_body, 10%); }
	}
	
	/* 2.4.1 Featured */
	.slider-container {
		border-bottom: 1px solid @border_main;
		.box_shadow(0,1px,0,0,@color_shadow);
	
		.flex-control-nav {
			li {
				a {
					background: none repeat scroll 0 0 #919191;
					&:hover, &.active {
					  	background: #222222;
					}			
				}			
			}
		}		

	}	
	/* 2.4.4 Portfolio Gallery */
	#portfolio-gallery {
		.port-tags {
			a {
				.vertical_gradient( lighten(@button,5%), darken(@button,5%);			
				.vertical_gradient( lighten(@button_grey,5%), darken(@button_grey,5%) );
				border: 1px solid darken(@border_main,40%);
				color: #fff;
				&.current { .vertical_gradient( lighten(@button,5%), darken(@button,5%) ); }
			}
		}
	}
}

/* 2.6 Footer */

#footer{
	color: lighten(@color_body, 10%);
	p { color: lighten(@color_body,20%); }
}

#footer-widgets { 
	border-bottom: 1px solid darken(@border_main, 10%); 
	.box_shadow(0,1px,0,0,@color_shadow);
}

/* 2.7 Breadcrumbs */
#breadcrumbs { 
	 border-bottom:1px solid @border_main; .box_shadow(0,1px,0,0,@color_shadow); 
}

/*-------------------------------------------------------------------------------------------*/
/* 3. POSTS */
/*-------------------------------------------------------------------------------------------*/

.archive_header {
	border-bottom:@border_main 1px solid;
	.box_shadow(0,1px,0,0,@color_shadow);	
}

.type-post, .type-page, .portfolio {
	background: @bg_light;
	border: 1px solid @border_main;

	header h1 {
		a:link, a:visited { color: darken(@color_content, 10%); }
	}

	.post-meta {
		li  { 
			&.post-comments a, &.post-date a { 
				.text_shadow(0,1px,0,rgba(0,0,0,.5)); 
				.vertical_gradient( lighten(@button_grey,5%), darken(@button_grey,5%) );
				.inset_box_shadow(0,0px,0px,1px,rgba(255,255,255,.5);
				border: 1px solid darken(@border_main,40%);
				color: #fff;
			} 
			&.post-comments { 
				a { .vertical_gradient( lighten(@button,5%), darken(@button,5%) ); 
				}
			}
		}
	}
	
	header .post-meta { 
		color: lighten(@color_content, 30%); 
		a { color: lighten(@color_content, 30%) }
	}
}

/* 3.3 Pagination / WP-Pagenavi / Woo-Pagination */
.nav-entries {
	a {
		color: @color_body;
	}
}
.woo-pagination {
	.page-numbers {
		color: lighten(@color_body, 20%);
		border:1px solid darken(@border_main, 5%); 
		.vertical_gradient(#ffffff,#f5f5f5);
		&:hover { border-color: darken(@border_main, 10%); color: @color_body; }
		&.current  { background: lighten(@color_body,10%); border-color: @color_body; color: #fff; .text_shadow(0px,1px,0px,darken(@color_body,30%)); }
	}
}

/* 3.4 Single Post Author */
#post-author { 
	background: @bg_light; 
	border:1px solid @border_main; 
}

/* 3.6 Connect */
#connect { 
	background: @bg_light; 
	border:1px solid @border_main; 
	.related-posts {
		border-left:1px solid @border_main;
	}
}

/*-------------------------------------------------------------------------------------------*/
/* 4. WIDGETS */
/*-------------------------------------------------------------------------------------------*/

/* 4.1 Generic Widgets */
.widget  { 
	margin-bottom: 2em;
	font-family: @sans_google;
	h3 { font-family: @sans_google; font-size:1.4em; letter-spacing:-1px; margin: 0 0 1em 0;padding:0; color:@color_body; text-transform: uppercase; }
	p { margin-bottom:1em; }
	ul {
		clear: both;
		padding-left:10px;
		list-style-position: inside;
		list-style-type: disc;
		li {
			a {
				padding:0 0 0 5px; 
				line-height: 1.9;
				text-decoration: none;
				&:hover { text-decoration: underline; }
			}
		}
		ul { padding:0 0 0 15px; border-top:0; }
	}
}

/* 4.2 Specific Widgets */
/* SEARCH FORM */
.searchform  { 
	background: #fff; 
	input.s { color: @color_content; }
	input.button { 	border-color: darken(@border_main, 8%) @border_main @border_main darken(@border_main, 8%); }
}

/* CALENDAR */
#wp-calendar{
	th, td { background: darken(@bg_light, 10%);  }
	td { color: lighten(@color_body, 10%); }
}

/* TWITTER */
.widget_woo_twitter {
	.back { padding:10px; background: darken(@bg_light, 1%); .border_radius(3px); border: 1px solid @border_main; }
	h3 { border-bottom:0; padding:0; margin:0; padding-bottom:15px;	}
	ul { 
		background: #fff;
		padding-left:0;
		border:1px solid @border_main;
		li {
			border-bottom:1px solid @border_main;
			padding:15px;
			list-style: none;
			&:last-child { border: none; }
			a { padding:0; }
			.time { color: lighten(@color_content, 30%); }
			.content { font-size: 1.2em; font-family: @serif;	}
		}
	}
	p {
		padding:10px 0 0 5px;
		font-weight: bold;
		color: lighten(@color_content, 10%);
		a { color: darken(@color_content, 20%); }
	}
}

/* WOOTABS */
#tabs {	
	ul.wooTabs {
		li {
			.vertical_gradient(#ffffff, #f5f5f5);
			a {
				color: lighten(@color_content, 10%);
				border:1px solid @border_main;
				border-left:0;
				&.selected, &:hover { background: #fff; border-width:1px 1px 0 0;}
			}
			&:first-child a { border-width:1px 1px 0 1px; border-left:1px solid @border_main; }
		}
	}
	.inside {
		background: #fff;
		border:1px solid @border_main;
		#tab-tags {
			a {
				background: darken(@bg_light, 5%);
				&:hover { background: darken(@bg_light, 10%);  }
			}
		}
		li {
			border-bottom:1px solid @border_main;
			a { color: @color_content;  }
			span.meta { color: lighten(@color_content, 30%); }
			img.avatar, img.thumbnail {
				border:1px solid @border_main;
				background: #fff;
				&:hover { border-color: darken(@border_main, 10%); }
			}
		}
	}	
}

/*-------------------------------------------------------------------------------------------*/
/* 5. COMMENTS */
/*-------------------------------------------------------------------------------------------*/

/* 5.1 Comments */
#comments {
	border-top:1px solid @border_main;
	.comment { 
		&.thread-even { background: @bg_light; border-bottom:1px solid @border_main; }
		&.bypostauthor { background: #fef7d2; border-bottom:1px solid #efe3ae; }
		.avatar {
			img { border:1px solid @border_main; background: #fff; }
		}
		.reply {
			a {
				background: darken(@bg_light, 2%);
				border-color: darken(@border_main, 7%);
				color: @color_body!important;
				&:hover { background: @border_main; }
			}
		}
	}
	
	ul.children {
		li { border-top:1px solid @border_main; }
	}
}

/* 5.2 Comments Form */
#respond  { 
	label { color: lighten(@color_body, 10%); }
	#commentform  {	
		input.txt, textarea { border-color: darken(@border_main, 8%) @border_main @border_main darken(@border_main, 8%); color: @color_content; background: @bg_light; }
	}
}


/*-------------------------------------------------------------------------------------------*/
/* 6. PAGE TEMPLATES */
/*-------------------------------------------------------------------------------------------*/

/* 6.1 Timeline Page Template */
#archives { 
	.archives_list {
		border-left:1px solid @border_main;
		.date { color: lighten(@color_content, 10%);  }
		.comments {
			a {
				color: lighten(@color_content, 15%);
			}
		}
	}
}
h3.archive_year { color: @color_content; }

/* 6.3 Image Gallery */
.image-gallery-item img {
	border:1px solid darken(@bg_light,10%); background:@bg_light;  
	&:hover { border: 1px solid darken(@bg_light,20%);}
}

/*-------------------------------------------------------------------------------------------*/
/* 7. MISC */
/*-------------------------------------------------------------------------------------------*/

/* 7.1 Buttons */
a.button, 
a.comment-reply-link, 
#commentform #submit,
.submit,
input[type=submit],
input.button,
button.button {
	border: 1px solid @button - #333;
	border-bottom-color: @button - #444;
	color: white !important;

	.vertical_gradient( lighten(@button,5%), darken(@button,5%) );
	.inset_box_shadow(0,0px,0px,1px,rgba(255,255,255,.5);
	
	
	&:hover { .vertical_gradient(lighten(@button,5%) + #111,darken(@button,5%) - #111); }
	&:active {
		border-color: @button - #555;
	}
}