@charset "utf-8";
/* CSS Document 

READ ME:

-creator : Mario Noble


THIS CSS SHEET
-General tags (body,html,H's,a's, etc.)
-General DIVS and styles applied by section beginning at top of site page
	examples: wrappers,containers, header, main nav, content,indiv cols,footer,etc.
-Specific classes based on function and rarity of occurance or specificity
	examples: forms, front landing page, miscellanous classes and DIVS
-Misc styles, Turn offs and storage

Code comments below explain different CSS functions throughout this document. Please read carefully.


*/

/* general changes to background color, font-type and size and overall links */

/* TAGS */

html, body {
	/* change font family */
	font-family: Arial, Helvetica, sans-serif;
	
	/* overall background color - won't show up if you're using an image - may not work depending on the design */
	/* customize_body */ /* customize_body */
	
	/* overall font color */
	/* customize_body */  /* customize_body */
	
	/*overall background image */
	
	background-repeat: repeat;
	background-position: left top;
}

#containerWrap a:link, #containerWrap a:visited {
	/* customize_link */ color: #FFF; /* customize_link */
	text-decoration:underline;
}

#containerWrap a:hover, #containerWrap a:active, #containerWrap a:focus {
	/* customize_link_hover */ color: #900; /* customize_link_hover */
	text-decoration:underline;
}

#containerWrap h1, #containerWrap h2, #containerWrap h3, #containerWrap h4, #containerWrap h5{ 
	margin:0;
	font-weight:700;
	/* customize_misc */ color: #FFF; /* customize_misc */
	/* customize_misc */  /* customize_misc */
}


#containerWrap p, #containerWrap td p { 
	font-size:1em; /* used in conjuction with body size in main.css - best overall fix for most browsers. please stick with em's instead of pixels since it's more accessible*/
        font-weight:100;  
}

#containerWrap strong {
	font-weight:700; /* equivalent to bold, but better */
}

#containerWrap h1 {
	font-size:1.65em; /* experiment and see what works best */
	padding:3px 0px 3px 0px; /* adds a bit of space and can also give some breathing room for background images */
	margin-bottom:10px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #900;
}

#containerWrap h2 {  
	font-size:1.4em; 
	padding:5px 0px 5px 0px;
	margin:0px 0px 5px 0px;
	position:relative;
	left:0px;
}

#containerWrap h3 {  
	font-size:1.3em; 
	padding:3px 0px 0px 3px;
}

#containerWrap h4 {  
	font-size:1.1em; 
	padding:5px 0px 5px 10px;
}

#container ul.nav li {
	/* this can be removed if you don't want separators between nav list elements */
	border-bottom-width: 1px;
	border-bottom-style: none;
	border-bottom-color: #630;
}

#container input, #container select, #container textarea {
	background-color:#FFF !important; /* overrides google toolbar's auto background coloring of common form elements - change to a custom color*/
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #333;
}

#containerWrap img {
	border: 0px; /* IE fix - since it sometimes draws border around linked images where you don't want them */
}

/*containter Elements */

#container, #containerWrap  { /* added to wrap as well because Blog page inserts whitespace on bottom of page*/
	background-color:#333;
	color:#FFF;
}

/* Header Elements */


#headerNavWrap {
	width:100%;
	position:relative;
	top:0px; /* change this to change the nav position */
	left:0px;
	
}

#headerNav { /* if you want to change the height remember to scale the background image or turn the image off and just color the background*/
	position:relative;
    left:0px;
}

#headerNav ul {
	
}

#headerNav ul li {
	padding: 2px 20px 0px 20px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666;	
}

#headerNav ul li.first {
	border-left-style: none;
}

#headerNav a {
	text-decoration:none;
	font-weight:700;
	background-position: left top;
	font-size:1.3em;
}

#headerNav a:link, #headerNav a:visited {
	color:#FFF;
	text-decoration:none;
}

#headerNav a:hover, #headerNav a:active, #headerNav a:focus {
	color:#900;
	text-decoration:none;
}


/* footer */
#footer a:link, #footer a:visited {
	text-decoration:underline;
}

#footer a:hover, #footer a:active {
	text-decoration:none;
}


#footerNav ul li {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}


/* DIV Background Changes and Hooks */

#headerWrap {
	background-color:#000;
	 /* change this to change the headerWrap height - make sure to do the math on all elements heights inside or you might have a conflict*/
	
}


#header {
	background-image: url(http://beautytv.me/themes/general_layout/images/headerBGv4.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;	 /* change this to change the header height */
	/* to align the site to the left send this elment to the left - float:left */
	height:300px;
}


#headerLogo {
 float:left;
 left:420px;
 top:55px;	
}

#headerBannerSpace .advertisement {
   text-align:center;
   position:relative;
   top:-20px;
}

/* subscribe form */

#subscribeForm {
       float:right;
       position:relative;
       top:10px;
       right:40px;

}
#subscribeForm div {
      padding-top:5px;
}

#customHeaderInfo {
 clear:both;	
}

#headerBannerSpace {
 clear:both;
 position:relative;
 top:100px;	
}

#headerNavWrap {
	 clear:both;
	 background-image: url(http://beautytv.me/themes/general_layout/images/navBG.jpg);
	 background-repeat: repeat-x;
	 background-position: left -11px;
}


#contentWrap {
	background-color:#333;
	background-image: url(http://beautytv.me/themes/general_layout/images/contentBG.jpg);
	background-repeat: repeat-x;
	background-position: left -5px;
}

#myContent {
	/* to align the site to the left send this elment to the left - float:left */
	text-align:left; 
	color:#FFF; /* fixes center text alignment and color issue on Blog addon */
}

#primaryContentWrap {
	
}

#primaryContent {

}

#secondaryContent1Wrap {
	
}

#secondaryContent1 h3, #secondaryContent2 h3 {
	font-size:1em;
    padding:5px 0px 5px 5px;
}


#secondaryContent1 {

}

#secondaryContent2Wrap {
	
}

#secondaryContent2 {

}


#footerWrap {
	padding:0px 0px 0px 0px;
	background-color:#1c1b1f;
	background-image: url(http://beautytv.me/themes/general_layout/images/footerBGrepeat.jpg);
	background-repeat: repeat-x;
	background-position: right top;
	height:250px;
}

#footer {
	/* to align the site to the left send this elment to the left - float:left */
	padding:10px 0px 0px 0px;
	background-color:#1c1b1f;
	background-image: url(http://beautytv.me/themes/general_layout/images/footerBG.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	height:240px;
	text-align:right;
	color:#FFF;
}

#footerNav ul li.first {
	border-left-style: none;	
}

#footerEnd {
	margin-top:20px;
}

#footerAd .advertisement {
   text-align:left;
}

/* home page - most of these are modified throught the actual home.css */

#welcomeArea, #newsArea, #adArea {
	background-color: #EBEBEB;
}

#choiceOne, #choiceTwo, #choiceThree {
   background-color: #EBEBEB;
}

#mediaOne, #mediaTwo {
	background-color: #EBEBEB;
}

/* RSS styling */

#container .rssSummaryListTitle {
   font-size:1.4em;
   padding:10px 0px 5px 10px;
}

/* handy styles for Tiny MCE content editor */

#container .padImageLeft {
	/* gives a image some breathing room - doesn't actually show up in the text editor however but it does in the Concrete5 editor */
	padding:0px 0px 0px 10px;
}

#container .padImageRight {
	/* gives a image some breathing room - doesn't actually show up in the text editor however but it does in the Concrete5 editor */
	padding:0px 10px 0px 0px;
}

#container .brclear {
	/* helps resolve floated element conflicts */
	clear:both;
	height:0;
	font-size:1px;
	line-height:0;
	margin:0;
}

/* auto nav styling */

#container .grid_nav {
       background-color:#333;
       min-height:400px;
       height:auto !important;
       height:400px;
}

#container .grid_nav a:link, #container .grid_nav a:visited {
       color:#FFF;
}

#container .grid_nav a:hover, #container .grid_nav a:active,  #container .grid_nav a:focus {
       color:#F30;
}

/* Blog add on overrides and styling */

#myContent ul.ccm-blog-archive-list li {
	margin-top:15px;
}

#myContent ul.ccm-blog-archive-list ul {
	margin-bottom:15px;
}

#myContent .guestBook-formBlock label {
        padding:10px 0px;
}

#myContent .ccm-blog-post-suffix {
        padding:20px 0px;
}

#myContent .ccm-blog-archive-rss {
		padding:10px 0px;	
}

/* #myContent .ccm-blog-list-content h1 {
          display:none;
          visibility:hidden;
} */


/* turn offs */

/*use these to "turn off/hide" via css different website elements that you don't want displayed, like perhaps the logo or logo text. 
  it doesn't actually get rid of them (you'd have to go into the actual php to do so) but it does hide them from view in almost all browsers.
*/


#logoText /*, #headerLogo, #headerLogo img */{
   display:none;
   visibility:hidden;
}