/*
	compendium.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   */

html
{
	background: url(http://www.realitydigital.com/images-blog/bkg-site.gif) left top repeat-x;
}

body
{
	background: #135EC3 url(http://www.realitydigital.com/images-blog/bkg-fade.gif) left top repeat-x;
	color:#666666;
font-size:12px;
}

.mc {
	padding: 1em 0 0;
	background-color: #fff;
	position: relative;
	background-image:none;
       border:none;
}
#doc2 {
margin-top:10px;
}
.yui-ge div.first {
float:right;
}
#leftfade {
	background-image: url(http://www.realitydigital.com/images-blog/sidefade-left.png);
	position: absolute;
	width: 32px;
	height: 100%;
	padding: 0 !important;
	margin: 0;
	margin-left: -24px;
	top: 0;
	left: 0;
	overflow: visible;
}

#rightfade {
	background-image: url(http://www.realitydigital.com/images-blog/sidefade-right.png);
	position: absolute;
	width: 32px;
	height: 100%;
	padding: 0 !important;
	margin: 0;
	margin-right: -24px;
	top: 0;
	right: 0;
	overflow: visible;
}

/*   HEADER SETTINGS  */
#header {
	color: #fff;
	background-color: #a0a0a0;
	height: 70px;
	position: relative;
	margin: 0 1em 1em;
	background: url(http://www.realitydigital.com/images-blog/Reality-Digital-Header.jpg) left top no-repeat;
}

#header h1 { 
	position: absolute;
	bottom: 30px; /* used pixels because you can't position using ems */
	margin: 0;
	font-weight: normal;
	font-size: 120%;
	width: 100%; /* making the width 100% allows horiz alignment from the UI */
	text-align : right;
}


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

/*   MENU SETTINGS   */
#menu {
	border-bottom: 1px solid #e5e5e5;
	overflow: hidden;
	margin:0 1em;
}
#menu-1 {
background-color:#fff;
}
#menu-1 ul {
	margin: 0;
	padding: 0.5em 0 0.5em 0;
}

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


#menu-1, #menu-1 a:link, #menu-1 a:visited, #menu-1 a:active
{
	font-family : Arial;
	font-size : 100%;
	text-align : left;
}


#menu-1 a:hover {
	color: #e39312;
}

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

/*   POST SETTINGS   */
.post-header h2 {
	font-size: 138.5%;
	font-weight: bold;
	margin-bottom: 0;
/*	color: #e39312;*/
}

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

.post-body
{
	font-family : Arial;
	font-size : small;
	font-weight : normal;
	color : #666;
	text-align : inherit;
		margin: 1em 0;
}
.post-body p, .widget p {
font-size:12px;
}
#posts
{
	background-color : #FFFFFF
}

.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;
	font-weight: bold;
}

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

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

.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: #f2f2f2;
}

#comment-form div {
}

#comment-form h3 {
	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 #ccc;
}

#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;
	background:#e1e1e1 none repeat scroll 0 0;
border:1px solid #999999;
}
.search-terms {
border:1px solid #999999;
}

/*   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:  #EDF3F8;
	border-width: 2px;
	border-style: solid;
	font-weight: bold;
	padding: 7px;
}

.message.success {
	background-color: #EDF3F8;
	border:2px solid #3184d2;
}

.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;
	font-family : Arial;
	font-size : small;
	color : #808080;
	text-align : inherit
}

.sidebar h3 {
	margin: 0;
	padding: 1.5em 0.8em 0.8em;
	color : #808080;
	font-weight: bold;
	font-size: 115%;
	text-transform:capitalize;
	background: url(http://www.realitydigital.com/images-blog/bkg-sidebar-header.png) 10px 0 no-repeat;
}

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

.sidebar .widget div, .sidebar .widget ul {
	margin: 0;
	padding: 0.5em; /* pad the entire *content* of the widget */
}
.sidebar .widget p {
       margin:0;
       padding: 0.5em 0.5em 0.5em 1.1em;
}
.sidebar .widget ul {
	list-style-position: outside;
	list-style-type:none;
	margin: 0 0 0.25em 0.5em;
}
.sidebar .widget ul li, .post-body ul li {
	list-style-position: outside;
	list-style-type:none;
	padding-left:10px;
	background: url(http://www.realitydigital.com/images-blog/bkg-orange-bullet.gif) no-repeat 0 5px;
	margin: 0 0 .5em 0;
	}
.sidebar .widget ul li {
font-weight:bold;
}

.widget #search {
padding-top:0;
}
.sidebar .Search h3 {
padding-bottom:0;
}

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

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

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

.search-button {
	position: relative;
	bottom: -6px;
}
#search {
padding-left: 1.1em;
}
/*   FOOTER SETTINGS   */
#footer {
	margin-top: 1em;
	min-height: 36px; /* Ensure that it will envelop the Compendium badge */
	width: 100%;
	clear: both;
	font-family : Arial;
	font-size : x-small;
	color : #444444;
	text-align : center;
	background: url(http://www.realitydigital.com/images-blog/bkg-footer.jpg) no-repeat -60px 0;
	height:200px;
}

#footer .tl, #footer .tr, #footer .bl, #footer .br { 
display:none;
}
#footer-text {
padding: 20px 0;
}
#footer #compendium-footer {
margin:10px 140px 0 0;
}
#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 !important;
	color:#29ABE2 !important;
}
#menu-1 a, #header a:link, #header a:visited, #header a:active
{
color : #808080 !important;
}

#menu-1 a:hover, a:hover{
	text-decoration: none!important; /* always underline a clickable link during hover */
	color : #F58848 !important;
}

#compendium-analytics {
	display: none;
}
#header h1 a:hover {
	color : #F58848 !important;
}
#header a:link, #header a:visited, #header a:active, #header h1 a:hover {
text-decoration:underline !important;
}
p {
font-family: arial, sans-seri !important;
font-size:inherit !important;
}