@charset "utf-8";

body {
	font: 12px Arial, Helvetica, sans-serif;
	background: #FFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #787878;
}
a,
a:visited,
a:link,
a:active{ color:#0c8ce5; text-decoration:none; }
a:hover{ color:#017c9e; text-decoration:underline; }

a img{ border:none; }

#container { 
	width: 962px;
	margin: 20px auto;
	text-align: left;
	background:url(../images/container_sidebar_bkg.gif) top left repeat-y #f5f5f5;
}

#nav_main{ background-color:#f5f5f5; }
#nav_main table,
#nav_sub table{ width:100%; }

#nav_main a:hover{ color:#017c9e; text-decoration:none; }
#nav_main a{
	display:block;
	float:left;
	padding:8px 14px;
	color:#555;
	font-size:16px;
}

#nav_sub{ background:#FFF; }
#nav_sub a{
	display:block;
	float:left;
	padding:8px 14px;
	color:#787878;
	font-size:12px;
}

#main{
	padding:8px;
	margin-right:244px; /* room for sidebar_right */
}

#sidebar_toc{
	width:160px;
	float:left;
	color:#838383;
	/*border-right:#cdcdcd solid 1px;*/
}
#sidebar_toc a{
	color:#838383;
	text-decoration:none;
	display:block;
}
#sidebar_toc a,
#sidebar_toc h3{ margin-left:10px; margin-right:10px; }

#sidebar_toc div{
	margin:0 10px;
	padding:10px 0;
	border-top:#cdcdcd solid 1px;
	background-color:transparent;
}
#sidebar_toc div:hover{ background-color:#FFF; }

#sidebar_right{
	width:236px;
	float:right;
	margin:0 8px 0 0;
	/* hide container's faux bkg image with bkg color & top padding instead of margin */
	padding-top:8px;
	background-color:#f5f5f5;
}

#latest_issue{
	background:url(../images/sidebar_issue_bkg.jpg) repeat-x top left #c0ccb3;
}
#current_issue_button{
	background:url(../images/en/current_issue.jpg) repeat-x top left;
	text-align:center;
}
#latest_product{
	border-top:#464646 solid 1px;
	background:url(../images/sidebar_product_bkg.jpg) repeat-x top left #98a75e;
}
#latest_news{
	border-top:#464646 solid 1px;
	background:url(../images/sidebar_news_bkg.jpg) repeat-x top left #979797;
	color:#FFF;
}
#latest_news h2{
	width:185px;
	margin:8px auto;
	padding:0;
}
#latest_news p{
	width:185px;
	margin:10px auto;
	padding:10px 0 0 0;
	border-top:#898989 solid 1px;
}
#latest_news a{
	color:#FFF;
}


#cols{ width:700px; }
#cols .col{
	width:210px; /* total width - combined col padding - border width / 3 */
	float:left;
	margin:8px 0;
	height:380px;
	padding:10px;
}
#cols p{
	margin:10px auto;
	padding:0;
}
#cols p.more_link{ text-align:right; }

.col_image{
	margin:10px auto;
	border:#666 solid 1px;
}

#col1, 
#col2{ border-right:#d7d7d7 solid 1px; }

#col1 h3,
#col2 h3,
#col3 h3{
	font-size:12px;
	margin:0;
	padding:0;
	text-transform:uppercase;
}

#col1 h3{ color:#0a326b; }
#col2 h3{ color:#7d9351; }
#col3 h3{ color:#a89973; }

/* inner_content is a generic container for content in the main div. Replace with more specific id if needed (eg #magazine) */
#inner_content{
	color:#434343;
	background-color:#FFF;
	padding:10px 20px;
}
#magazine_content{
	margin-left:170px; /* room for sidebar_toc */
	background-color:#FFF; 
	padding:10px 20px;
	color:#434343;
}
#inner_content h1,
#magazine_content h1{ font-family:Georgia, "Times New Roman", Times, serif; }
.article_subhead,
.article_subhead a{
	color:#838383;
	font-size:16px;
	line-height:21px;
}
.article_subhead a{ text-decoration:underline; }

ul#magazine_actions li{ margin:8px auto; }


div.ok, 
div.notok,
div.warning{
	margin:10px;
	padding:6px;
	text-align:left;
	font-weight:normal;
}
div.ok{
	background-color:#DFFFDF;
	border:#060 dashed 1px;
}
div.notok{
	background-color:#FFEAEA;
	border:#900 dashed 1px;
}
div.warning{
	background-color:#FFC;
	border:#C90 dashed 1px;
}

/* Pagination */
.pagination{
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
}
.pagination a,
.pagination span{
	padding:0 4px;
}
.pagination .currentpage{ font-weight:bold; }

/* Tables */
.table_head{
	background:url(../images/table_head_bkg.gif) top left repeat-x #9A9A9A;
	color:#464646;
	margin:20px 0 0 0;
	padding:8px;
	font-size:18px;
	font-family:Georgia, "Times New Roman", Times, serif;
	border:#81a0b3 1px solid;
	border-bottom-color:#5f7b8c;
}
.table_head a{ color:#DEDEDE; }
.table_head a:hover{ color:#FFFFFF; text-decoration:none; }

table.data{
	border:#81a0b3 1px solid;
	border-top-width:0; /* set to 1px when there's no table_head div above */
	width:100%;
	margin-bottom:20px;
}
table.data th,
table.data td{
	text-align:left;
	vertical-align:top;
	padding:4px 8px;
}
table.data th{
	background:#a6c1d2;
	font-weight:bold;
	font-size:10px;
	vertical-align:bottom;
}
table.data td{
	border:#81a0b3 solid;
	border-width:1px 0 0 0;
}

table.data tr.alt{ background-color:#f1f1f1; }
table.data tr.hilite{ background-color:#DDF8FF; }
table.data tr.hilite_alt{ background-color:#C6F3FF; }
table.data tr.hilite_alt:hover,
table.data tr.hilite:hover,
table.data tr.alt:hover,
table.data tr:hover{ background-color:#E8FAFF; }

table.data tr.empty td{ padding:16px; }


/* LightboxGallery Elements */

.lightbox_gallery{ margin:20px auto; }
.lightbox_gallery table{ margin:0 auto; }
.lightbox_gallery a.thumb{
	display:block;
	background:#FFF;
	padding:4px;
	margin:8px;
	border:#999 solid 1px;
}
.lightbox_gallery a.thumb:hover{ background-color:#DDF8FF; }


/* Products */
.product,
.product_featured{
	margin:10px;
	padding:6px;
	text-align:left;
	background-color:#F4F4F4;
	border:#CCC solid 1px;
	overflow:auto; /* This helps us clear the float without clearing the float ;-) */
}
.product_featured{ background-color:#E1F4FF; border-color:#53B5FD; }
.product_image{
	float:left;
	background-color:#FFF;
	border:#999 solid 1px;
	margin:0 12px 0 0;
	padding:6px;
	text-align:center;
}


/* Fun Facts */
.fact{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	color:#999;
	padding-right:4px;
}
#facts p{
	margin:18px auto 0;
	padding:0 0 18px;
	border-bottom:#CCC dashed 1px;
}
.puzzle{
	text-align:center; 
	margin:20px auto;
	border-bottom:#CCC dashed 1px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}