/* bbHTML  - v1.0.2 */

/*
	This file is a starting point for custom CSS for a business site.  It is intended to be
	specified in the page template AFTER the reset/normalize file which brings all
	browsers to a common starting point.  These styles then return some "sanity" to elements
	as we expect them.  Customize and augment as necessary.

	<link href="javascript/yui/reset-fonts-grids/reset-fonts-grids.css"/>
	<link href="new1.css" type="text/css" rel="stylesheet"/>

	Colors:
		 -- See color-defaults for custom color names and the "generic" mappings (fgColor, bgColor, etc)

		  -- tables --
		set:tableBorder="#999999"				Border color between cells
		set:tableBGColor="#f1f4f6"			This is the color of the non-alt rows (and the header if header is transparent)
		set:tableHeaderFG="#111"			Foreground of top header cells
		set:tableHeaderBG="#A8B5C1"			Background of top header cells
		set:tableRowHeadFG="#A8B5C1"		Foreground of row header cells
		set:tableRowHeadBG="inherit"			Background of row header cells
		set:tableCaption="#A8B5C1"		Caption (rare) below table
		set:tableAltRowBG="#e2eff7"
		set:tableHoverRowBG="#dddddd"

		 -- headings --
		set:h1="#FFD21C"
		set:h2="#A8B5C1"
		set:h3="#C4A660"
		set:h4="#A8B5C1"
		set:h5="#C4A660"
		set:h6="#A8B5C1"

		 -- links, hr and focus --
		set:linkColor="#FFD21C"					standard link color - handles visited, active and normal
		set:hrColor="#dddddd"			Color of horizontal rule line
		set:linkHoverColor="#FFD21C"			Link color when hovering
		set:focusOutlineColor="#A8B5C1"		Color of "focus" (for tabbing, etc.)


*/

/* Standard HTML - extended from the YUI reset CSS */

html { background-color: #111; }

body { font-size: 16px; color: #eee; font-family: helvetica, arial, sans-serif; line-height: 1.3; }

body .yui-editor-panel { font-size: 0.75em; line-height: 1; } /* Reset font size/line height for YUI rich text editor */

h1,h2,h3,h4, h5, h6 {
	/* top & bottom margin based on font size */
	margin:0.5em 0 0.25em 0; text-rendering: optimizeLegibility;
}

/* Define some generic color "classes" as CSS classes - though in general, we recommend semantic classes */
.fgColor { color: #eee; }

body .bgColor { background-color: #111; }
body .bgColor2 { background-color: #f1f4f6; }
body .bgColor2Darker { background-color: #e2eff7;}
body .bgColor2HL { background-color: #dddddd;}
body .bgColorStrong { background-color: #475157;}

.fgColor2 { color: #A8B5C1; }
.fgColor3 { color: #C4A660; }
.accent { color: #FFD21C; }

.insetBox { margin: 2em; border: 1px solid #FFD21C; border-radius: 8px; background: #f1f4f6; padding: 1em; }

/* 				Define some CSS macros

set:radius(X)="border-radius: $Xpx"
set:radiusp(X)="border-radius: $X%"
set:bottomradius(X)="border-bottom-left-radius: $Xpx; border-bottom-right-radius: $Xpx"
set:topradius(X)="border-top-left-radius: $Xpx; border-top-right-radius: $Xpx"

set:noShadow="box-shadow: none; -ms-filter: none; filter: none"
set:superThinShadow="box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1)"
set:vthinShadow="box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5)"
set:vvthinShadow="box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)"
set:pShadow="box-shadow: 0 0 2px rgba(0, 0, 0, 0.3)"
set:thinShadow="box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)"
set:thickShadow="box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)"
set:softShadow="box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5)"
set:strongShadow="box-shadow: 0px 0px 20px black"
set:thinSoftShadow="box-shadow: 2px 2px 6px 0px rgba(0,0,0,.3)"
set:shadow(X,Y)="box-shadow: $Xpx $Xpx $Ypx 0px rgba(0,0,0,.3)"
set:opacity0="opacity: 0;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	filter: alpha(opacity=0); zoom: 1"
set:opacity30="opacity: .3;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
	filter: alpha(opacity=30); zoom: 1"
set:opacity50="opacity: .5;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
	filter: alpha(opacity=50); zoom: 1"
set:opacity60="opacity: .6;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
	filter: alpha(opacity=60); zoom: 1"
set:opacity70="opacity: .7;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
	filter: alpha(opacity=70); zoom: 1"
set:opacity80="opacity: .8;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
	filter: alpha(opacity=80); zoom: 1"
set:noOpacity="opacity: 1.0;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Enabled=false)';
	filter: alpha(enabled=false); zoom: 1"
set:rotate3="-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg)"
set:rotateN3="-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg)"
set:rotate(X)="-webkit-transform: rotate($Xdeg); -moz-transform: rotate($Xdeg)"
set:noselect="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none"

set:scale(X)="transform: scale($X); -webkit-transform: scale($X); -moz-transform: scale($X); -o-transform: scale($X); -ms-transform: scale($X);"
set:bbox="box-sizing:border-box; -moz-box-sizing:border-box; "

*/

/* apply a natural box layout model to all elements */
*, *:before, *:after
{ box-sizing: border-box; -moz-box-sizing: border-box;} /* for some reason, prefixfree doens't work when psuedoclasses are involved (?) */

h1 { font-size: 1.875em; color: #C4A660; line-height: 1; }
h2 { font-size: 1.375em; color: #A8B5C1; line-height: 1.2; }
h3 { font-size: 1.125em; color: #C4A660; font-weight:bold; }
h4 { font-size: 1em; color: #A8B5C1; font-weight:bold;}
h5 { font-size: 0.875em; color: #C4A660; text-rendering: auto;}
h6 { font-size: 0.75em; color: #A8B5C1; text-rendering: auto;}

strong { font-weight:bold; }

abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
}
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}

blockquote { margin:1em; }

ul,dl {
	padding: 0;
	margin: 1em 0 1em 1.25em;
}

ol { padding: 0; margin: 1em 0 1em 2.2em; }

ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

dl dd {
	margin-left:1em;
}

table
{
	border-collapse: collapse;
}

th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #999999;
	padding:.5em;
}

th {
	/* Distinguishing table headers from data cells. */
	font-weight: bold;
	text-align: center;
}


table.v2 { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border-radius: 6px; background-color: #f1f4f6; }
.v2 thead th { border-top: 0; }
.v2 tbody th { border-left: 0; }
.v2 tbody tr:last-child td,.v2 tbody tr:last-child th { border-bottom: 0; }
.v2 tbody td:last-child { border-right: 0; }
.v2.noColumnHeaders tbody td:first-child { border-left: 0; }
.v2 thead th:first-child { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px;  border-left: 0; }
.v2 thead th:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px;  border-right: 0; }
.v2 tbody tr:last-child th { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.v2 tbody tr:last-child td:last-child { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.v2 tbody tr:hover { outline: 1px dashed #FFD21C; }
.v2 tr:nth-child(2n+1) { background-color: #e2eff7; } /* alternativing row colors */

.v2 thead th {
	color: #111;
	background-color: #A8B5C1;
	/* background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#FFD21C));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#eee, endColorstr=#FFD21C, GradientType=0); */
}

.v2 tbody th {
	color: #A8B5C1;
	background-color: inherit;
	text-align:left;
}

.v2 caption {
	/*coordinated marking to match cell's padding*/
	margin:.5em 0;
	font-size: 1em;
	text-align:center;
	color: #A8B5C1;

}

p,fieldset,table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}

hr { border: 0; width: 80%; background-color: #C4A660; height: 1px;  margin: 1.5em auto;}

/* remove borders from links */
img { border: 0; }

a, a:link, a:visited, a:active
{
	text-decoration:none;
	color: #FFD21C;
	transition: color 300ms ease-in-out;
}

a:hover
{
	color: #FFD21C;
}

* { transition: color .5s ease, background-color .5s ease }

/*  Does this work?   from : http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/ #21*/
a image {border: 0}
a:hover image {border: 0}

/*:focus { outline: none; }  /* Gets rid of outline when clicking links */
:focus { outline-color: #A8B5C1; }  /* use "transparent" to get rid of outline when clicking links */

input[type=submit],input[type=reset],label,select,.pointer { cursor:pointer; }
input[type=file] { margin: 0.375em; }

/* A few little helper classes - don't use these much - use semantic classes! */
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }
.cb { clear: both;

}
/* clearfix - from http://css-tricks.com/snippets/css/clear-fix/*/
/*.group { clear: both; }  clear the group itself as well?  um.. maybe not. */
.group:after,.clearfix:after {
  content: "";
  display: table;
  clear: both;
}