@import "compass/css3";
@import "settings/gradient";
@import "settings/vars";

/* Set up Variable Colors */
$windowBorder: #AAA;
$dividerBorder: #888;

$black90: rgba(0,0,0,.90);
$black90hex: #141414;

$white75: rgba(255,255,255,.75);
$black75: rgba(0,0,0,.75);
$black75hex: #404040;

$white50: rgba(255,255,255,.50);
$black50: rgba(0,0,0,.50);
$black50hex: #7f7f7f;

$white25: rgba(255,255,255,.25);
$black25: rgba(0,0,0,.25);
$black25hex: #bfbfbf;

$black10: rgba(0,0,0,.10);
$black10hex: #DFDFDF;

$fontFamily: Arial, sans-serif;

$frameBorderRadius: 6px;

$buttonBorderRadius: 4px;
$buttonBorder: #666;


body {
	margin: 0;
}

div.clear {
	clear: both;
}
/* ======================================== */
/* = Websheets Presentation mode tool bar = */
/* ======================================== */
#wspToolbar {
	height: 36px;
	border-bottom: 1px solid #AAA;
	background-color: #F0F0F0;
	position: relative;
	@include box-shadow(0 0 1px rgba(0,0,0,.25), 0 1px 0 $white75 inset);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	ul.wspBreadcrumb {
		list-style: none;
		margin: 0;
		padding: 0 4px;
		li {
			display: block;
			float: left;
			margin: 6px;
			height: 24px;
			a {
				display: block;
				float: left;
				font: normal 11px/14px $fontFamily;
				padding: 4px 0;
				color: #333;
				text-decoration: none;
				text-shadow: 0 1px 0 rgba(255,255,255,.5);
				&:hover {
					text-decoration: underline;
				}
			}
			&.separator img {
				margin: 6px 0 5px 0;
				width: 6px;
				height: 11px;
				background: url(../img/ws_control_icons.png) 0 -11px no-repeat;
				display: block;
			}
			&.active a {
				font-weight: bold;
			}
		}
	}
	div.wspSlideOptions {
		position: absolute;
		right: 6px;
		top: 0;
/*		width: 140px;
		> div {
			float: right;
		}*/
		div.wspSlideNavigation {
			float: left;
			a {
				margin: 6px 0;
			}
		}
		a {
			display: block;
			float: left;
			font: normal 11px/14px $fontFamily;
			padding: 4px 10px;
			margin: 6px 6px 6px 0;
			@include background-gradient-ie(#EEE,#DDD);
			@include border-radius(2px);
			border: 1px solid #969696;
			color: #444;
			font-weight: bold;
			text-shadow: 0 1px 0 $white75;
			text-decoration: none;
			@include box-shadow(0 1px 0 rgba(255,255,255,.75), 0 1px 0 $white75 inset);
			img {
				width: 5px;
				height: 10px;
				margin: 2px 0;
				vertical-align: bottom;
			}
			&#prevSectionButton {
				margin-right: 0;
				@include border-radius(2px 0 0 2px);
				img {
					background: url(../img/ws_control_icons.png) -30px -18px no-repeat;
				}
			}
			&#nextSectionButton {
				@include border-radius(0 2px 2px 0);
				img {
					background: url(../img/ws_control_icons.png) -35px -18px no-repeat;
				}
			}
			&.closeButton {
				padding: 4px 8px;
				margin-right: 0;
				img {
					background: url(../img/ws_control_icons.png) -58px -40px no-repeat;
					width: 10px;
					height: 11px;
					margin: 1px 0;
				}
			}
			&:hover {
				@include background-gradient-ie(#FFF,#EEE);
			}
			&:active {
				@include box-shadow(0 1px 0 rgba(255,255,255,.75), 0 1px 2px $black50 inset);
				@include background-gradient-ie(#DDD,#CCC);
			}
			&.disabledButton {
				filter: none;
				background: #F0F0F0;
				cursor: default;
				&:hover {
					filter: none;
					background: #F0F0F0;
				}
				img {
					@include opacity(0.25);
				}
			}
		}
		span.totalSlides {
			display: block;
			float: left;
			font: normal 11px/14px $fontFamily;
			padding: 4px 14px 4px 0;
			margin: 6px 0;
			border-top: 1px solid #969696;
			border-bottom: 1px solid #969696;
			background: #FFF;
			@include box-shadow(0 1px 0 rgba(255,255,255,.75));
			width: 20px;
			text-align: left;
			em {
				font-style: normal;
				color: #666;
				padding-right: 4px;
			}
		}
		input {
/*			display: none;*/
			float: left;
			font: bold 11px/14px $fontFamily;
			padding: 4px 4px 4px 10px;
			margin: 6px 0;
			border: none;
			border-top: 1px solid #969696;
			border-bottom: 1px solid #969696;
			background: #FFF;
			color: #333;
			@include box-shadow(0 1px 0 rgba(255,255,255,.75));
			width: 20px;
			text-align: right;
		}
	}
}

/* ===================== */
/* = Section Container = */
/* ===================== */
div.wspSectionContainer {
	ul#wspSectionList {
		padding: 0;
		list-style: none;
		margin: 0 auto;
		min-height: 600px;
		max-height: 760px;
		min-width: 600px;
		max-width: 1160px;
		> li {
			display: none;
			margin: 40px 40px 60px 40px;
			> h2.wspSectionHeading {
				/* Section Headings */
				margin: 0 0 10px 0;
				padding: 10px;
				font: bold 24px/36px $fontFamily;
				color: #333;
				border-bottom: 1px solid #EEE;
			}
		}
	}
}
div.wsSectionContent {
	& > a {
		color: #000;
		font: normal 16px/24px $fontFamily;
	}
	/* Section Content Container */
	ul.wsSectionNavigation {
		list-style: none;
		margin: 0;
		padding: 10px;
		li {
			display: block;
			margin-bottom: 5px;
			a {
				display: block;
				font: normal 20px/24px Arial, sans-serif;
				color: #666;
				text-decoration: none;
				padding: 5px;
				@include transition(background, .2s);
				&:hover{
					background-color: #EEE;
				}
				img {
					border: none;
					margin: 0 10px 0 0;
					width: 24px;
					height: 24px;
					background-image: url(../img/ws_control_icons.png);
					background-repeat: none;
					background-color: transparent;
					vertical-align: middle;
					&.textIcon {
						background-position: 0 -81px;
					}
					&.plsqlIcon {
						background-position: -24px -81px;
					}
					&.chartIcon {
						background-position: -48px -81px;
					}
					&.dataIcon {
						background-position: 0 -105px;
					}
					&.nav_pageIcon,
					&.nav_sectionIcon {
						background-position: -24px -105px;
					}
					&.pageIcon {
						background-position: -48px -105px;
					}
				}
			}
		}
	}
}
div.wspTextSection {
	font: normal 16px/24px $fontFamily;
	color: #333;
	padding: 0 10px;
	h3 {
		font: bold 18px/30px $fontFamily;
		color: #666;
		margin: 10px 0;
		padding: 0;
	}
	p {
		margin: 0 0 10px 0;
		font: normal 16px/24px $fontFamily;
		}
	a {
		color: #888;
		font: normal 16px/24px $fontFamily;
		}
	& > ul,
	& > ol {
		margin: 10px 0 10px 30px;
		padding: 0;
		}
	& > ul {
		list-style: square outside;
		li {
			font: normal 16px/24px $fontFamily;
			}
		ul {
			list-style: square outside;
			margin: 2px 0 2px 50px;
			padding: 0;
			}
		}
	table {
		border-bottom: 1px solid #CCC;
		border-right: 1px solid #CCC;
		border-spacing: 0;
		border-collapse: collapse;
		td, th {
			border-left: 1px solid #CCC;
			border-top: 1px solid #CCC;
			padding: 10px;
			font: normal 16px/24px $fontFamily;
			color: #333;
		}
		th {
			text-align: left;
			background: #EEE;
			text-shadow: 0 1px 0 rgba(255,255,255,.75);
			font-weight: bold;
		}
		th strong {
			font: bold 16px/24px $fontFamily;
		}
		th > p {
			margin: 0;
			font: bold 16px/24px $fontFamily;
			strong {
				font: bold 16px/24px $fontFamily;
			}
		}
	}
}

/* ======================== */
/* = Page Navigation Tree = */
/* ======================== */
div.tree ul {
	li a {
		font: normal 16px/20px $fontFamily;
		height: 20px;
		padding: 2px 4px 2px 2px;
		color: #333;
		border: 1px solid transparent;
		@include transition(background border, .2s);
		&:hover {
			background-color: #F0F0F0;
			border-color: #E0E0E0;
			@include border-radius(2px);
			height: 20px;
			padding: 2px 4px 2px 2px;
		}
		&.clicked,
		&.clicked:hover {
			background-color: #E0E0E0;
			border-color: #D0D0D0;
			@include border-radius(2px);
			height: 20px;
			padding: 2px 4px 2px 2px;
		}
		ins {
			height: 20px;
			width: 16px;
			background: url(../img/ws_control_icons.png) -52px -107px no-repeat;
		}
	}
}

/* ===================================================== */
/* = Report Formatting for Reports inside of a Section = */
/* ===================================================== */
div.wsSectionReport {
	/* Float Left so that top action bar only stretches to the table width */
	float: left;
	table {
		border-collapse: collapse;
		border-spacing: 0 0;
		th {
			background-color: transparent;
			border: none;
			border-bottom: 1px solid #DDD;
			padding: 12px 16px 12px 0;
			font: bold 16px/20px Arial, sans-serif;
			color: #333;
		}
		td {
			border: none;
			border-bottom: 1px solid #EEE;
			padding: 12px 16px 12px 0;
			font: normal 16px/20px Arial, sans-serif;
		}
		tr:hover td {
			background-color: #F8F8F8;
		}
	}
	table.wsReportStyle1 {
		border: 1px solid #AAA;
		th {
			border-bottom: 1px solid #AAA;
			padding: 12px 16px;
			@include background-gradient-ie(#F8F8F8,#EEE);
			text-shadow: 0 1px 0 rgba(255,255,255,.75);
		}
		td {
			padding: 8px 16px;
			border-top: 1px solid #DDD;
			border-bottom: none;
		}
	}
	table.wsReportStyle2 {
		border: none;
		th {
			border-bottom: 1px solid #AAA;
			padding: 8px 16px;
		}
		td {
			padding: 8px 16px;
			border-bottom: 1px solid #DDD;
		}
		tr:last-child td {
			border-bottom: none;
		}
	}
	table.wsReportStyle3 {
		border: none;
		th {
			border-bottom: 2px solid #CCC;
			padding: 8px 16px;
			text-shadow: 0 1px 0 rgba(255,255,255,.75);
			vertical-align: bottom;
		}
		td {
			padding: 8px 16px;
			border-left: 1px solid #DDD;
			border-bottom: 1px solid #EEE;
		}
		tr td:last-child {
			border-right: 1px solid #CCC;
		}
		tr td:first-child {
			border-left: 1px solid #CCC;
		}
		tr:last-child td {
			border-bottom: 1px solid #CCC;
		}
		tr:hover td {
			background-color: #F2F2F2;
		}
	}
}

/* ========================== */
/* = Action Bar for Reports = */
/* ========================== */
div.wsActionBar {
	&.wsActionBarOnly {
		border-bottom: 1px solid $windowBorder;
		@include border-radius(2px);
		margin-bottom: 10px;
	}
	&.wsActionBarBottom {
		border-top: none;
		border-bottom: 1px solid $windowBorder;
		@include border-radius(0 0 2px 2px);
		div.wsActionBarInside {
			border-top: 1px solid #F0F0F0;
		}
	}
	background-color: #F8F8F8;
	border: 1px solid $windowBorder;
	border-bottom: none;
	height: 54px;
	position: relative;
	@include border-radius(2px 2px 0 0);
	span.wsActionBarRight {
		position: absolute;
		right: 0;
		top: 0;
		a.wsSmallButton {
			margin: 6px 6px 6px 0;
		}
	}
}
	span.wsActionBarRight {
		position: absolute;
		right: 0;
		top: 0;
		a.wsSmallButton {
			margin: 6px 6px 6px 0;
		}
	}
/* ================================= */
/* = Search Field (for Action Bar) = */
/* ================================= */
div.searchField {
	display: block;
	float: left;
	margin: 8px;
	background: #FFF;
	height: 36px;
	border: 1px solid #969696;
	@include box-shadow(0 1px 0 rgba(0,0,0,.10));
	@include border-radius(2px);
	span.searchIcon {
		display: block;
		float: left;
		padding: 11px 0 11px 12px;
		img {
			display: block;
			width: 14px;
			height: 14px;
			background: url(../img/ws_control_icons.png) -40px -18px no-repeat;
		}
	}
	input {
		display: block;
		float: left;
		height: 24px;
		font: normal 16px/24px $fontFamily;
		border: none;
		padding: 6px;
		color: #333;
	}
	a.wsSmallButton {
		border: none;
		border-left: 1px solid #969696;
		@include box-shadow(0 1px 0 rgba(255,255,255,.75) inset);
		@include border-radius(0 2px 2px 0);
		margin: 0;
		&:active {
			@include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset);
			@include background-gradient-ie(#DDD,#CCC);
		}
	}
}
div.wsSection div.wsTextSection div.wsSectionReport {
	a.wsSmallButton {
		color: #444;
	}
	a.wsHotButton {
		color: #FFF;
	}
/*	table {
		border-bottom: inheri;
		th, td {
			border: none;
		}
		th {
			background-color: transparent;
		}
	}*/
}
a.wsSmallButton {
	display: block;
	float: left;
	font: normal 16px/24px $fontFamily;
	padding: 6px 16px;
	margin: 12px 0 12px 12px;
	@include background-gradient-ie(#EEE,#DDD);
	@include border-radius(4px);
	border: 1px solid #969696;
	color: #444;
	font-weight: bold;
	text-shadow: 0 1px 0 $white75;
	text-decoration: none;
	@include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white75 inset);
	&:hover {
		@include background-gradient-ie(#FFF,#EEE);
	}
	&:active {
		@include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset);
		@include background-gradient-ie(#DDD,#CCC);
	}
}
a.wsSmallButton.wsHotButton {
	border: 1px solid #822024;
	@include background-gradient-ie(#EB0014,#C3000F);
	color: #FFF;
	@include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 0 $white50 inset);
	text-shadow: 0 -1px 0 rgba(0,0,0,.35);
	font-weight: bold;
	&:hover {
		@include background-gradient-ie(#FB2034,#D3202F);
	}
	&:active {
		@include box-shadow(0 1px 0 rgba(0,0,0,.10), 0 1px 2px $black50 inset);
		@include background-gradient-ie(#CE0014,#A2000D);
	}
}