@charset "UTF-8";
/* CSS Document */
/*   Following Technique was originally thought for header logo:

	FOR NON-LINKS: Rundle "Phark" technique
        text-indent: -9000px;

    FOR LINKS: Leahy/Langridge technique (on the "a" element)
Read more        display: block;
        top-padding: [height]px;
        height: 0;
        overflow: hidden;
*/


/* BASE (Initital Setup)
=====================================
	#RESET
	#HTML5
	#CLEARFIX
	#BASE TYPOGRAPHY
===================================== */

/* #RESET
================================================== */
* {
	margin: 0;
	padding: 0;
}

/* #HTML5
================================================== */
header, section, footer, aside, nav, article, figure {
	    display: block;
}

/* #CLEARFIX
================================================== */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* #BASE TYPOGRAPHY
================================================== */

/*
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px

*/


/* #BASE TYPOGRAPHY
================================================== */

/*
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px

*/

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%; /* 16px */
	line-height: 1.5em;
			/*background: #060; testing */
}

/*
Using a Traditional scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
	if base is 16:
	h1 = 48 pixels → 48 ÷ 16 = 3 em
	h2 = 36 pixels → 36 ÷ 16 = 2.25 em
	h3 = 24 pixels → 24 ÷ 16 = 1.5 em
	h4 = 21 pixels → 21 ÷ 16 = 1.3125 em
	h5 = 18 pixels → 18 ÷ 16 = 1.125 em
	h6 = 16 pixels → 16 ÷ 16 = 1 em
*/
h1, h2, h3, h4, h5, h6 { margin-bottom: .5em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 3em; line-height: 1.15em; }
h2 { font-size: 2.25em; line-height: 1.2em; }
h3 { font-size: 1.5em; line-height: 1.25em; }
h4 { font-size: 1.3125em; line-height: 1.3em; }
h5 { font-size: 1.125em; line-height: 1.35em; }
h6 { font-size: 1em; line-height: 1.4em; }


/* #Paragraphs 
================================================== */
p { 
	margin-bottom: 1.25em; 
}


/* #Links
================================================== 
a { color: #000; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #39c; }
p a, p a:visited { line-height: inherit; }
*/

/* #Lists
================================================== 
ul, ol { 
	margin: 0 0 1.25em 0; 
	/* clear: both;
	
}

ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
}

li {
	margin: 0 0 0 1.875em;
	/* clear: both; 
	
}
*/

/* #Block Quotes
================================================== 
blockquote {
  margin: 1em 0;
  padding: 1em;
  border-top: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
  background: #eee;
  color: #444;
}
*/

/* #Images
================================================== */
img.scale-with-grid { /* Chris likes this */
	max-width: 100%;
	height: auto; 
}

a img { 
	border: none;
}

/* LAYOUT/GRID
===================================== */
.container {
	position:relative;
	width: 960px;
	margin: 0 auto;
		/* border:3px solid blue; */
}

header {
	position: relative;
	/* background: #3F3;*/

}

header nav#utilitynav {
	margin-top: 20px;
	float: right;
	background: #fff;
		/*border:1px solid black;*/
}

header #logo_box {
	width:100%;	
		/*border:1px solid blue;*/
}

header #logo_img img {
	/*width:15%;*/
	/*height: auto;*/
	margin-top:87px;
	height: auto;
	width:130px;
	float:left;
		/*border:1px solid red;*/
}

header #logo {
	float: left;
	width: 65%;
	margin-top:0;
	margin-bottom:0;
	margin-left:0;
	padding-top:0;
	padding-bottom:0;
		/*border:1px solid black;*/
}


/*header #logo h1 {
	margin-top:80px;
}*/


header #logo h1 {
	font-family:Helvetica, Arial, sans-serif;
	font-size:225%;	
	color: black;
	/*margin-top:30px;*/
	margin-right:0;
	margin-bottom:0;
	padding-bottom:0;
	display:block;
		/*border:1px solid blue;*/
}

header #logo h1 a {
	color: #000;
	text-decoration: none;
	outline: 0;
}

header #tagline {
	font-size:100%;
	font-family:Helvetica, sans-serif;
	margin-bottom:25px;	
	/*border:1px solid red;*/
		/* border:1px solid red;*/
}

nav {
	background:#A10707;
}

#mainnav {
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	background:#A10707;/* #C03; */
		/*border:1px solid yellow; testing */
}

#mainnav ul {
	margin:0;
	padding:7px 0;
	list-style:none;
	text-decoration:none;
}

#mainnav ul li {
	margin:0;
	padding:0;
	float:left;
}

#mainnav ul li a {
	margin:0;
	padding:0;
	display:block;
	padding: 7px 17px;
	color:#FFF;
	text-decoration:none;
	background-color:#A10707;
}

#mainnav ul li a:hover {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px; 
	background-color:#Ce5766; /*#6F9;*/
	color:#fff;
}

#mainnav ul li.active a, #mainnav ul li.active a:hover {
    border-top-left-radius: 15px;
	border-top-right-radius: 15px; 
	background: none repeat scroll 0 0 #fff;
	margin: 0;
	color: #A10707;
	line-height: inherit;
}

/*== Some pages has Sub Menu  here ==*/


#section1 #headline img {
	padding-top:20px;
}

#section1 p {
	display:block;
	width:20%;
	margin:40px 0 0 0;
		color:#aaa;
	/*border-bottom:double #000;*/
}

#section1 {
		/*border:1px solid green;*/
}

#section1 #headline {
	width: 100%;
	/*left:330px;
	top:60px;
	color: #000;
	height:auto;
	text-align:right;*/
		/*border:1px solid red;/**/
}

#section1 #headline h2 {
	display:block;
	width:80%;
	margin:0;
	padding:0;
	float:left;
			/*border:1px solid red;/**/
}

#section1 #headline_button {
	margin:0;
	padding:0;
	width:15%;
	float: right;
		/*border:1px solid red;*/
}

#section1 #headline_button a {
	-webkit-border-radius: 1.875em;  
	-moz-border-radius: 1.8em;  
	border-radius:1.875em; 
	padding:5px 10px;
	display:block;
	font-size:125%;
	line-height: 150%;
	text-align:center;
	text-decoration:none;
	color:#FFF;
	background-color:#C03;
}

#section1 #headline_button a:hover {
	background-color:#766abf;
}


/*== Some pages has BredCrums here ==*/

#columns {
	width:48%;
	margin: 20px 0 0 0;
	float:left;
		/*border:1px solid black;*/
}

#columns img {
	width:100%;
	height:auto;
	margin:0;
		/*border:1px solid black;	*/
}

#editorchoice{
	width:48%;
/*	margin: 10px 0 0 0;
	padding-top:10px;
	background:#eee;*/	
	float:right;
	margin: 20px 0 0 0;
		/*border:1px solid black;	*/
}

#editorchoice img {
	width:100%;
	height:auto;
	margin:0;
	/*border:1px solid black;	*/
}

#columns h2, #editorchoice h2 {
	margin:10px 0 0 0;
	padding:10px 0 0 0;
	color:#aaa;
}

article {
	clear:both;
	width:100%;
	background:#fff;
	margin-bottom:15px;
}

article h3 {
	margin:30px 0 0 0;
	padding:10px 0 0 0;
	font-size: 24px;
	width:100%;
	background:#fff;	
}

article p {
	margin:0;
	padding:0;
	width:100%;
	background:#fff;	
}

#green_button {	
	/*margin-top:10px;*/
	float: left;
}

#green_button a {
	-webkit-border-radius: 30px;  
    -moz-border-radius: 30px;  
    border-radius: 30px;  
	background-color:#51574e;
	display: block;
	line-height: 24px;
	color: #fff;
	text-align:center;
	font-size:16px;
	margin:0 0 20px 0;
	padding:1px 20px;
	font-style: italic;
	text-decoration:none;
	color:#FFF;
}

#green_button a:hover {
	background-color:#766abf;
}

#mainnav ul a {
	background:#C09;		
}

#mainnav ul a:hover{
	background:#C09;	
}

footer{
	margin-top: 30px;
	padding-top:15px;
	background: #ddd;
	height: 500px;
	border-top: 2px solid #bbb;
		clear:both;
}

footer .container{
	/*border-top: 2px solid black;*/
}


/* ===================  HeadLine Page START==========================*/
#sub_menu ul {
	list-style:none;
	margin:0;
	padding:0;
} 

#sub_menu li {
	/*list-style:none;*/
	float:left;
}  

#sub_menu ul li a {
	font-style:italic;
	font-size: .75em;
/*	list-style:none; */
	text-decoration:none;
	padding: 0 20px 0 0;
	color:#aaa;
} 
/* No need to change color for breadcrums
#sub_menu ul li.active a {
	color:#A10707;
} 

#sub_menu ul li a:hover {
	color:#F60;
} 
*/
#columns h4, #editorchoice h4{
	font-size:70%;
	padding-bottom:5%;	
}

#columns p, #editorchoice p {
	font-size:100%;
	padding-bottom:2%;
}

#headline #sub_menu ul li a {
	font-style:italic;
	margin:0;
	padding:0;
	color:#aaa;
} 



#headline #columns h4, #editorchoice h4{
	font-size:70%;
	padding-bottom:5%;
	
}



/*#breadcrum li {
	list-style:none;
	float:left;
}  

#breadcrum ul li a {
	font-size: 100%;
	list-style:none;
	text-decoration:none;
	padding: 0 20px 0 0;
	color:#000;
} 

#breadcrum ul li.active a {
	color:#A10707;
} 


#breadcrum ul li a:hover {
	color:#F60;
} */

.hdln #section2 #editorchoice h2 {
	color:#fff;
}







/* ===================  HeadLine Page END==========================*/


/* ===================  Message ==========================*/


header #logo h1 {
	margin-top:80px;
}

.msg #section1.container img {
	margin:30px 0 0 0;
		/*border:1px solid red;*/
}

.msg #section1 {
	margin-bottom:30px; /*distance between breadcrums and title of the page*/
	clear:both;
}

.msg #section1 .container #sub_menu {
	padding:0;
	margin:0 0 30px;
	font-size:.75em;
	font-style:italic;
		/*border:1px solid blue;*/
}
.msg #section1.container #sub_menu ul {
	padding:0;
	margin:0;
	list-style:none;
		/*border:1px solid green;*/
}
.msg #section1.container #sub_menu ul li {
	padding:0;
	margin:0;
	line-height:.75em;
		/*border:1px solid red;*/
}
.msg #section1.container #sub_menu ul li a {
	padding:0;
	margin:0;
	color: #777;
	font-size:.75em;
	font-style:italic;
	text-decoration:none;
	line-height:0;
		/*border:1px solid green;*/
}

.msg #section1.container #sub_menu ul li a:hover {
		color: #000;
}

.msg #section2 {
	clear:both;
		/*border:1px solid blue;*/
}

.msg #section2 #col_L {
	margin:0;
	padding:0;
	float:left;
	width: 60%;
		/*border:1px solid black;*/
}

.msg #col_R {
	margin:0;
	padding:0;
	float:right;
	width: 36%;
		/*border:1px solid red;*/
}

#col_L h2,  #col_R h2 {
	margin:10px 0 0 0;
	padding:10px 0 0 0;
	color: #aaa;
}


.msg #col_R p {
		/*border:1px solid red;*/
}

#col_R address {
	margin:10px 0 0 0;
	padding:10px 0 0 0;
	color: #444;
}

.msg  #col_L form {
	margin: 1.75em 0;
}

.msg  #col_L form label {
	display: block;
}

.msg address {
	font-style: normal;
	margin-bottom: 1.25em;
}

.msg  #col_L form input, .msg  #col_L form textarea {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.15em;
	display: block;
	margin-bottom: 1.25em;
	width: 90%;
	color: #666;
	padding: .25em;
}

.msg #col_L form textarea {
	border: 1px solid #b7b7b7;
}

.msg  #col_L form input#contact_submit {
	width: auto;
}

/* ===================  Message.html end =====================*/


/* =============  Vidos.html Specific starts ========











==========*/



.vid #section1.container img {
	margin:30px 0 0 0;
		/*border:1px solid red;*/
}

.vid #section1 {
	margin-bottom:30px; /*distance between breadcrums and title of the page*/
	clear:both;
}

.vid #section1 .container #sub_menu {
	padding:0;
	margin:0 0 30px;
	font-size:.75em;
	font-style:italic;
		/*border:1px solid blue;*/
}

.vid #section1.container #sub_menu ul {
	padding:0;
	margin:0;
	list-style:none;
		/*border:1px solid green;*/
}
.vid #section1.container #sub_menu ul li {
	padding:0;
	margin:0;
	line-height:.75em;
		/*border:1px solid red;*/
}

.vid #section1.container #sub_menu ul li a {
	padding:0;
	margin:0;
	color: #777;
	font-size:.75em;
	font-style:italic;
	text-decoration:none;
	line-height:0;
		/*border:1px solid green;*/
}

.vid #section2 h2 {
	margin-bottom:2em;
	color:#aaa;
}

.vid #section2 #row_1 #vid_TL h3, .vid #section2 #row_1 #vid_TR h3, .vid #section2 #row_2 #vid_DL h3, .vid #section2 #row_2 #vid_DR h3 {
	margin:0;
	padding:0;
}

.vid #section2 #row_1 #vid_TL p small, .vid #section2 #row_1 #vid_TR p small, .vid #section2 #row_2 #vid_DL p small, .vid #section2 #row_2 #vid_DR p small {
	margin:0;
	padding:0;
	font-style:italic;
}
		
	
.vid #section2 #row_1 {
	margin:50px 0 0 0; /*should be consistent with columnists and contact us pages.*/
	position: relative;
}

.vid #section2 #row_1 #vid_TL {
	float:left;
	display:block;
	width:48%;
		/*border:1px solid red;*/
}

.vid #section2 #row_1 #vid_TR {
	display:block;
	width:48%;
	float:right;
		/*border:1px solid blue;*/
}

.vid #section2 #row_2 {
	margin:60px 0 0 0; /*should be consistent with columnists and contact us pages.*/
	position: relative;
}

.vid #section2 #row_2 #vid_DL {
	float:left;
	display:block;
	width:48%;
		/*border:1px solid red;	*/
		
}

.vid #section2 #row_2 #vid_DR {
	float:right;
	display:block;
	width:48%;
		/*border:1px solid red;	*/
		
}

.vid #section2 h2 {
	color:#aaa;
}
.vid footer img {
	width:15%;
	height:auto;
	margin:0;
	/*border:1px solid black;	*/
}

/* ===========  Vidos.html Specific end =============*/



/* ===========  Columnists.html starts ===============*/

.colum #section1.container img {
	margin:30px 0 0 0;
		/*border:1px solid red;*/
}

/*
.colm #sub_menu ul {
	list-style:none;
	margin:0;
	padding:0;
} 

.colm #sub_menu li {
	float:left;
}

.colm #sub_menu ul li a {
	font-style:italic;
	font-size: .75em;
/*	list-style:none; 
	text-decoration:none;
	padding: 0 20px 0 0;
	color:#aaa;
} */

.colum #section2 #col_L h2 {
	margin:1em 0 0 0;
		/*border:1px solid red; */
}

.colum #section2 {
		/*border:1px solid red;*/
}

.colum #section2 #col_L article {
	margin-top:4em;
	width:100%;
		/*border:1px solid red;*/
}

.colum #section2 #col_L article .photo {
	margin:0 0 1em 0;
	padding:0;
	float:left;
	width:11.625em;
	height:13.06em;
		/*border:1px solid red;*/
}

.colum #section2 #col_L article .personal_info {
	margin-left:1.5em;
	padding:0;
	color:#000;
	float:left;
	width:50%;
		/*border:1px solid red;*/
}

.colum #section2 #col_L article .personal_info small{
	font-style:italic;
}

.colum #section2 #col_L article .personal_info h3 {
	margin:0;
	padding:0;
	line-height:.75em;
		/*border:1px solid black;*/
}

.colum #section2 #col_L article .personal_info h4 {
	margin-top:.75em;
	padding:0;
		/*border:1px solid black;*/
}


/* ===================  Columnists end ==========================*/

@media screen and (max-width: 959px) {  
.container {
	position:relative;
	width: 90%;
	margin: 0 auto;
	padding: 0 5%;  
	/* border:3px solid blue; */
}

#section1 #headline {
	
}

#section1 #headline h2 {

}

#section1 #headline_button {

}

#section1 #headline_button a {
	/*font-size: .75em;
	line-height: 1em; differnt font size behavior from the blow % */
	font-size:125%;
	line-height: 100%;

}

#section1 #headline img {
	width:100%;
}

#columns, #editorchoice {
	width:100%;
}

.vid #section2 #row_1, .vid #section2 #row_2 {
	height: auto;
		/*border:1px solid blue;*/
}

.vid #section2 #row_1 #vid_TL, .vid #section2 #row_1 #vid_TR, .vid #section2 #row_2 #vid_DL, .vid #section2 #row_2 #vid_DR {
	width:100%;
	float:auto;
		/*border:1px solid red;*/
}


.colum #section2 #col_L article .personal_info {
	margin-left:0;
	width:100%;
		/*border:1px solid red;*/
}

.msg section2 #col_L, .msg section2 #col_R{
	width:100%;
}

}