/*
	template_002.css

	CSS file for the v2 blog template

	A NOTE ABOUT EMS:
	As far as it was possible, this document uses ems for units.  This is a
	good accessibility practice because since the size of an em is based on the
	font size, it grows in relation to the font when the user changes the text size
	of their browser.  As the text size increases, so does the size of margins and
	padding, column widths, etc, thus maintaining the page layout as much as
	possible.  The only times that ems are not used are when the CSS spec doesn't
	allow them to be used, such as in the case of setting an element's absolute
	position, or when a border needs to be only one pixel thick.

	Likewise, all font sizes are set as a percentage of the base font size.  As the
	base font size is changed in the user's browser, the rest of the fonts on the
	page are resized accordingly.

 */

/*   BODY SETTINGS   */
body, html {
	background-color : #FFFFFF;
	/*background-image : url('http://cdn.content.compendiumblog.com/uploads/user/48abe1a3-0e5b-450c-8503-1c32d508bb08/736243c9-46fe-420e-b8a6-6d0faaba1a66/background-image.jpg');*/
	background-repeat: repeat-x;
}

th, td {
border:0px solid #000000;
padding:0
}


.mc {
	background-color : #FFFFFF;
	background-image : none;
	position: relative;
	border-left:none; 
	border-right:none;
	padding: 0;
}

#leftfade {
	background-image:none;
	position: absolute;
	width: 32px;
	height: 100%;
	padding: 0 !important;
	margin: 0;
	margin-left: -32px;
	top: 0;
	left: 0;
	overflow: visible;
}

#rightfade {
	background-image:none;
	position: absolute;
	width: 32px;
	height: 100%;
	padding: 0 !important;
	margin: 0;
	margin-right: -32px;
	top: 0;
	right: 0;
	overflow: visible;
}

#main-column {border-left: 1px solid #7E1029; padding-left:20px;}


/*   HEADER SETTINGS  */
#header {
	color: #fff;
	background-color: #FFFFFF;
	height: 60px;
	width:900px;
	position: relative;
	padding-top: 0px;
	background-image: url('http://www.versionone.com/images/tag_v1_2.gif');
	background-repeat: no-repeat;
	margin:0px auto 0px auto;
}

#header h1 { 
	
	font-family : Verdana;
	font-size : large;
	text-decoration:none;
	text-align : right;
	/*position: absolute;
	bottom: 30px;  used pixels because you can't position using ems */
	margin: 0px 20px 0px auto;
	padding: 0px 0px 10px 0px;
	font-weight: bold;
	/*width: 100%;  making the width 100% allows horiz alignment from the UI */
}


#headerLinkText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:large;
	margin: 0px auto;
	padding: 20px 20px 0px 0px;
	text-align: right;
}

#header a:link, #header a:visited, #a:hover, #header a:active {
	color : #78082D;
	margin: 0 30px;
}

#headerlinks a {
/* this should set no underline on any links within the div called headerlinks */
text-decoration: none;
}


















/*   MENU SETTINGS   */
#menu {
	text-align:center;
	background-color:#ffffff;
	/*background-image: url(http://images.content.compendiumblog.com/images/menubggradient.png) !important;*/
	overflow: hidden;
	height:90px;
}

#menu-1
{
	text-align:center;
	background-color: #FFFFFF;
	/*background-image : url('http://cdn.content.compendiumblog.com/uploads/user/48abe1a3-0e5b-450c-8503-1c32d508bb08/736243c9-46fe-420e-b8a6-6d0faaba1a66/versionone-menu1.jpg');
	background-repeat : no-repeat;*/
}



#menu-1 ul {
	padding:0;
	text-align:center;
	margin: 0;
}


#menu-1 li {
	text-align:center;
	display: inline;	
	margin-left: 30px; /* used pixels to keep it aligned with the absolutely positioned blog title */
	font-weight: bold;
	font-size: 100%;
}


#menu-1 li a:link, #menu-1 a:visited, #menu-1 a:active {
	text-align:center;
	font-family : Verdana;
	font-size : small;
	color : #444444;
}


#menu-1 li a:hover {
	text-align:center;
	color : #000000;
	text-decoration:none;
}


/*   MAIN COLUMN SETTINGS   */
#content {
	width:650px;
	margin: 0 1em;
	overflow: hidden;
}

/*   POST SETTINGS   */

#posts
{
	background-color : #FFFFFF
}


.post-header h2, .post-header h2 a:link, .post-header h2 a:visited, .post-header h2 a:hover, .post-header h2 a:active
{
	font-weight:bold!important;
	font-size:28px!important;
	color:#78082d!important;
	text-align : inherit;
	margin-bottom: 13px;
	text-decoration: none!important;
}


.post-header-meta {
	/*font-size: 85% !important;*/
	font-style: italic;
}



.post-header-meta a:link, .post-header-meta a:visited, .post-header-meta a:hover, .post-header-meta a:active
{
	color : #2C2724
}





.post-header-date{
margin-top: 8px!important;	
background: url(http://www.versionone.com/blog/calendar.png) left no-repeat;
padding-left: 22px;
}









.post-body {
	margin: 1em 0;
	font-family : Verdana;
	font-size : small;
	font-weight : normal;
	color : #2C2724;
	text-align : inherit;
	line-height: 1.5em;
}

.post-body a:link, .post-body a:hover, .post-body a:active
{
	color : #2C2724
}

.post-body a:visited
{
	color : #78082D
}





.post-body img {
	margin: 0.25em;
}

.post-footer {
	padding: 0.2em 1em;
	background-color: #e9e9e9;
	font-size: 85%;
	position: relative;
	clear: both;
	margin-top: 0.2em;
	margin-bottom: 1em;
}

.post-footer a {
	color: #404040;
}

.post-social-bookmarking {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0.2em 1em;
}


/*   POSTS NAVIGATION   */



#posts-navigation {
	margin: 1em 0 0 0;
	width:100%;
	clear: left;
}

#posts-navigation #prev {
	float: left;
}

#posts-navigation #next {
	float: right;
}

#posts-navigation a {
	padding: 0.2em;
	color : #90272C;
	font-weight: bold;
}



/*   COMMENTS SETTINGS   */
#comments {
	clear: both;
}

#comments h3 {
	margin-top: 4em;
	color : #2C2724;
}

.comments-blog-title {
	font-style: italic;
}

#comment-list dt {
	margin: 1em 0 0.20em 0;
	color: #404040;
	font-weight: bold;
}

#comment-list dd {
	margin-bottom: 1em;
}

#comment-form {
	width: 100%;
	background-color: #e9e9e9;
}

#comment-form div {
}

#comment-form h3 {
	color: #e39312;
	margin: 0;
	padding: 0.5em;
}

/* Labels appear before the corresponding form field in the HTML.  Both
   are floated left, so
 */
#comment-form label {
	float: left;
	clear: left;
	width: 35%;
	text-align: right;
	margin: 0.3em 0.3em 0 0;
}

#comment-form input[type="text"], #comment-form textarea {
	float: left;
	margin-top: 0.3em;
	border: 1px solid #404040;
}

#comment-form textarea {
	width: 60%;
}

#comment-form #captcha, #comment-form img {
	clear: left;
	margin-left: 35%;
	margin-top: 0.3em;
	padding-left: 0.3em;
	border: 0;
	width: auto;
}

#comment-form-submit {
	margin-left: 35%;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

/*   MESSAGE SETTINGS  */
/*   Used to display a message to the user to indicate the result of their
 *   action.  Possible message types include success, warning, and 
 *   failure.
 */

/* Styles common to all message types */
.message {
	margin: 1em;
	width: 95%;
	background-color: #C5D1EB;
	border-width: 2px;
	border-style: solid;
	font-weight: bold;
	padding: 7px;
}

.message.success {
	background-color: #C5D1EB;
	border-color: #88f;
}

.message.error, .message.warning {
	background-color: #fbb;
	border-color: #f00;
}

/*   SEARCH SETTINGS   */
#search-results-header {
	border-bottom: 1px solid black;
}

/*   SIDEBAR SETTINGS   */
.sidebar {
	overflow: hidden;
	min-height: 400px;
}



.sidebar h3 {
	margin: 0;
	padding: 0.5em;
	font-weight: bold;
	font-family : Verdana;
	font-size : small;
	color : #78082D;
	text-align : inherit;
	background-color : #FFFFFF;
}

.sidebar .widget {
	padding: 0;
	margin-bottom: 1em;
	background-color : #FFFFFF;
}

.sidebar a:link, .sidebar a:visited, .sidebar a:hover, .sidebar a:active, .sidebar ul, .sidebar li {
	color : #2C2724;
}



.sidebar .widget div, .sidebar .widget ul, .sidebar .widget p {
	margin: 0;
	padding: 0.5em; /* pad the entire *content* of the widget */
}

.sidebar .widget ul,  .sidebar .widget ul li {
	list-style-position: outside;
	margin: 0 0 0.25em 0.5em;
}

/* prevent the double-padding of paragraphs and divs within widget content */
.sidebar .widget div div, .sidebar .widget div p {
	padding: 0;
}





#sidebar {
	width:200px;
	font-family : Arial;
	font-size : x-small;
	color : #2C2724;
	text-align : inherit;
	background-color : #ffffff;
}

#sidebar a:link, #sidebar a:visited, #sidebar a:active
{
	color : #2C2724
}

#sidebar a:hover
{
	color : #78082D
}



.InlineImage, .Text, .HTML, sidebarDivider {
	padding: 0;
	background-color: transparent !important;
}


#search-1 {
	background-image:url(http://www.versionone.com/blog/search_bkg.jpg);
	background-repeat:no-repeat;
	background-position:-5px 0px;
	height:100px;
}


#search form, .Search form {
	position: relative;
}

.search-button {
	position: relative;
	bottom: -6px;
}

/*   FOOTER SETTINGS   */
#footer {
	margin-top: 1em;
	background-color: #6889a7;
	background-image: url('http://cdn.content.compendiumblog.com/uploads/user/48abe1a3-0e5b-450c-8503-1c32d508bb08/736243c9-46fe-420e-b8a6-6d0faaba1a66/versionone-footer.jpg');
	min-height: 36px; /* Ensure that it will envelop the Compendium badge */
	width: 100%;
	clear: both;
	font-family : Arial;
	font-size : x-small;
	color : #2C2724;
	text-align : center
}

#footer p {
	padding: 0.5em;
	font-size: 77%;
}

#footer-text {
	padding:1em;
}

#compendium-footer {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.5em;
}

/*   GENERAL SETTINGS   */

/* Rounded corners are accomplished though displaying one quarter of an
   absolutely positioned transparent PNG image.  The correct section of the
   image is displayed at each corner of the rounded element using as CSS Sprite
   technique.  The image has a white radius with a transparent inside to let the
   background color of the rounded element come through.

   PNG images look much better than GIF images for this purpose because PNGs
   support alpha transparency.  That means that a given pixel in a PNG image
   can be set to be totally opaque (showing true white, in this case), totally
   transparent (showing the background color of the rounded element), or one of
   254 levels of transparency in between.  Alpha transparency permits us to create
   a smoother antialiased corner than a corresponding GIF image, in which there
   are only fully white or fully transparent pixels.  IE6 and below do not support
   PNG transparency, so a browser-specific CSS file for IE6 specifies a GIF
   version of the corner-rounding mask.  It doesn't look as nice as the PNG in a
   more modern browser, but it is acceptable.
 */
.rounded {
	position: relative;
	margin: 0;
}

.tl, .tr, .bl, .br {
	background: transparent url(http://images.content.compendiumblog.com/images/roundcornersprite-white.png) no-repeat scroll !important;
	position: absolute;
	width: 4px;
	height: 4px;
	padding: 0 !important;
	margin: 0;
}

.tl {
	top:0;
	left:0;
	background-position: 0 0 !important;
}

.tr {
	top:0;
	right:0;
	background-position: -4px 0 !important;
}

.bl {
	bottom:0;
	left:0;
	background-position: 0 -4px !important;
}

.br {
	bottom:0;
	right:0;
	background-position: -4px -4px !important;
}

a:link, a:visited, a:active {
	text-decoration: none;
}

/*
a:hover {
	text-decoration: underline !important; /* always underline a clickable link during hover 
}
*/

#compendium-analytics {
	display: none;
}




.notext {
/* this class hides the text within the span tags by taking it totally off screen */
visibility: hidden;
margin-left: -2500px;
}


/*this is the ‘hotspot’ for the homelink div*/
#homelink {
float: left;  /* this aligns the div to the left and allows other divs to follow */
position: relative; /* this allows us to move the location down or over */
width : 240px; /* this is the width of the hotspot */
height: 60px; /* this is the height of the hotspot */
margin-left: 0px;  /* this is the offset of the hotspot from the left */
margin-top: 0px; /* this is the offset of the hotspot from the top */
}












/*   TOP NAVIGATION BAR   */

#nav, #nav ul {float:left; width:752px; list-style:none; line-height:1; padding:0; margin:0px; height:31px;}
/*#nav a {display:block; padding:7px 0px 8px 0px; text-decoration: none; text-align:center; color:#fff; font:11px verdana;}*/

#nav a {
-x-system-font:none;
color:#FFFFFF;
display:block;
font-family:verdana;
font-size:11px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
padding:7px 0 8px;
text-align:center;
text-decoration:none;
}


#nav a.primary, #nav a:link.primary, #nav a:visited.primary {background: url(http://www.versionone.com/images/tnavbutton.gif) 0px 0px no-repeat; display:block; width:94px; color:#333; font:13px verdana;}

#nav a:hover.primary, #nav a:hover.primary active {background: url(http://www.versionone.com/images/tnavbutton.gif) 0px -31px no-repeat; display:block; width:94px; color:#FFFFFF; text-decoration:none;}

/*#nav a.primary:hover, #nav a.primary:hover active {text-decoration:none; background: url(http://www.versionone.com/images/tnavbutton.gif) 0px -31px no-repeat; display:block; width:94px; color:#FFFFFF;}*/



#nav a.navon:link, #nav a.navon:visited, #nav a.navon:hover, #nav a.navon:active {background-position: 0px -31px; color:#fff; text-decoration:none;}

#nav a.parent {background: url(http://www.versionone.com/images/navparentarrow.gif) center right no-repeat;}


#nav a.firstnav, #nav a:link.firstnav, #nav a:visited.firstnav  {margin-left:0px;}
#nav li {float:left; padding:0; width:94px; margin-left:1px;}
#nav li.firstnav {margin-left: 0px; text-decoration:none;}

#nav a:hover{text-decoration: none !important;} 

.firstnav {text-decoration:none;}



#nav li ul {position:absolute; left:-999em; height: auto; width:150px; margin-top:-2px; border:solid #333; border-width:0px 1px 1px 0px; margin:0; background-color:#9C9DAE;}
#nav li li {width:150px; margin-left:0px;}
#nav li ul a {width:150px; width:140px;  text-align:left; padding:5px 10px;}
#nav li ul ul {margin: -1.9em 0 0 150px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; text-decoration:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left:auto; text-decoration:none;}
#nav li:hover, #nav li.sfhover {background: #90272C; color:#000; text-decoration:none;}





.contactus {
	-x-system-font:none;
	color:#505050;
	font-family:verdana,arial,sans-serif;
	font-size:11px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	padding:0 5px 20px 0;
	text-align:right;
	width:800px; 
	margin:0px auto;
}