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

READ ME:

+++++keep this +++

 ========================================================
Created by Mario Noble								
http://marionobledesign.com
Created Day 07.20.2009
css released under Creative Commons License 
 ========================================================


+++++ delete the commments below if you want +++++

Intro -

Welcome to General Layout template theme a.k.a the Zen of Concrete 5 (our tribute to CSS Zen garden) - version 1.0

This is a development tool and not an actual theme. Thus the awful contrasting colors and horrible picture gradients. They're that way so you can easily tell what section is what and if there's some overlap. It's wise to comment out any background colors or images you don't wind up using when you finally launch your site.

I made this because I wanted something I could use to quickly mock up a theme in Concrete 5. I'm not claiming it's perfect and it probably has more than a bit of cruft from past projects; although i tried to get rid of most extraneous code and assets. Please add improvements as you see fit and share them with the community.

I hope this graphic ready template will spur more Concrete 5 theme development from graphics designers who are just looking to just mock up a photoshop or illustrator template.

Guidelines and advice:
http://www.concrete5.org/help/building_with_concrete5/developers/themes/

Although I designed this template for designers who just want to photoshop some images, slice them, load them into the site theme image folder (not the concrete theme folder!) and maybe make a few tweaks to the typography, it can also serve as a useful starting point for those with a deeper background in CSS or PHP. 

This template is free and I ask that designers who find it useful contribute a free theme to the Concrete 5 site for others to use or modify.

Directions-

Here is where you can make some basic edits to change the font family, size and overall color of your website's font.

You can also change the background colors or image paths here. Hex colors are used in either long or shorthand format. Don't want to use a background color? Just delete the line! Although we recommend actually commenting it out.

The actual images that you can change are located in the images directory of this theme.
You can add other images but you'll need to add them to the directory and then link them to the appropriate DIV id below. DIV's are recognizable by their pound(#) sign. Classes are prefaced by a dot (.). Section images can be overridden in the internal css of a layout as well.

I've included Wrapper DIVS's to make it easier to tile backgrounds or drop in effects like shadows to go for a full screen header/footer effect or keep it central. You can also float the header, nav, content and footer to the left for a left-aligned effect although the tiling might break down.

I may include my Sliced psd file but since the template went through some changes it's not entirely accurate anymore but it may give you an idea of how to proceed.

Once you're done and you've installed and activated the theme, add a page, enter Edit Mode and choose Design. Choose a page layout (full, left sidebar, etc.) to change the arrangement and what blocks are shown. I recommend creating a fake page and choose 2 column layout first, then switch to a 3 column (see bug list below) and fill in some info. Then change the design and see how it look in various layouts. Note: some info will "disappear" but return depending on the layout. This is in the database, but if a block doesn't appear on a layout it won't be shown. 

Notes on Overall site structure-

-reset.css is a scoped reset stylesheet to try to even things out across various browsers.

-main.css contains other css that you may or may not be want to edit. I've put the "easy customizable" CSS here because custom styles must be put here according to Concrete5's theme rules and TinyMCE draws it's styles from here. I recogize this is awkard and you may want to combine pertinent styles back into main.css.

-internal css can be found in each of the page layout's HEAD. This is where we fine tune the column's positions. We've positioned things in main.css and the internal css so that your primary content just below the header in the html. This may help with the Search Engines.

-home.css is for specific home styles. has extra areas you may or may not want to use. Feel free to use another layout for home.

-printFriendly.css strips out all info except for the primaryContent and normalizes fonts. Modify it or not and use if you wish.

-elements Folder - this is where the header, headerItems and Footer includes are kept. (header items allows you to insert things into the header sitewide)

-images Folder - keep to the naming scheme and just swap out if you want.

-thumbnail.png and description.txt - you may want to change according to your specific site.

Layouts:
org_detail - auto generates a breadcrumb and sidenav scoped to the page, which can save some time.
default- should be using the left sidebar layout
view- use the right side bar i believe

Bug list:
-Chrome, Opera and some browsers give a flash of non-image background content and show the background color beforehand.
-The h1 background image  in the home layout doesn't show up under IE 6.
-when you create a new page based on the 3 column layout it doesn't add in the header nav. Create a 2 column layout and switch it to to a 3 column.

Resources:

good primer on changing CSS background colors and images:
http://www.w3schools.com/css/css_background.asp

Bug lists, fixes, suggestions and additions are welcome...!



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

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 */ background-color:#DCB98D; /* customize_body */
	
	/* overall font color */
	/* customize_body */ color: #333; /* customize_body */
	
	/*overall background image */
	/* customize_background background-image:url(http://www.neelymfg.com/themes/Neely/images/containerBG.jpg);*//* customize_background */
	/*background-repeat: repeat;
	/*background-position: left top;
}

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

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

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


#containerWrap p{ 
	font-size:1.2em; /* 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*/
}

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

#containerWrap h1 {
	font-size:1.75em; /* experiment and see what works best */
	background-image:url(http://www.neelymfg.com/themes/Neely/images/titleBG.jpg); 
	/*change this image or delete this and others like it below - or just swap out the image for another with the same name 
	you can also comment them out like this sentence
	*/
	background-repeat: repeat-x; 
	/* possible variations are : no-repeat, repeat-y, repeat (is default)*/
	
	
	background-position: left top;
	/* possible variations are : right bottom, or specific pixel positions positive or negative ( 5px 10px or -5px -10px) */
	
	padding:3px 0px 3px 6px; /* adds a bit of space and can also give some breathing room for background images */
	margin-bottom:5px;
}

#containerWrap h2 {  
	font-size:1.65em; 
	background-image:url(http://www.neelymfg.com/themes/Neely/images/titleBG.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	padding:5px 0px 5px 5px;
	margin:0px 0px;
	position:relative;
	left:0px;
}

#containerWrap h3 {  
	font-size:1.4em; 
	padding:3px 0px 0px 3px;
	background-image:url(http://www.neelymfg.com/themes/Neely/images/sidebarTitleBG.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}

#containerWrap h4 {  
	font-size:1.3em; 
	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 */
}

/* 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*/
	
}

#headerNav ul {
	
}

#headerNav ul li {
	padding: 8px 10px 5px 10px;
}

#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: #333;
	text-decoration:none;
}

#headerNav a:hover, #headerNav a:active, #headerNav a:focus {
	color: #666;
	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: #999;
}
#footerEnd{
	text-align:center;
	vertical-align:middle;
}

/* DIV Background Changes and Hooks */

#headerWrap {
	background-color: ##DCB98D;
	/*background-image:url(http://www.neelymfg.com/themes/Neely/images/headerWrapBG.jpg);*/
	background-repeat: repeat-x;
	background-position: left top;
	height:207px; /* 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 {
	height: 176px; /* change this to change the header height */
	background-color:##DCB98D;
	background-image:url(http://www.neelymfg.com/themes/Neely/images/headerBG.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	/* to align the site to the left send this elment to the left - float:left */
}

#headerNav {
	background-image:url(http://www.neelymfg.com/themes/Neely/images/headerNavBG.jpg);
	background-repeat: repeat-x;
	background-position: left top;
 
	/* to align the site to the left send this elment to the left - float:left */
}


#contentWrap {

}

#myContent {
	background-color: #E0D9BD;
	-webkit-box-shadow: 10px 10px 22px  #000000;
-moz-box-shadow: 10px 10px 22px #000000;
box-shadow: 10px 10px 22px #000000;
elevation:higher;

	/*background-image:url(http://www.neelymfg.com/themes/Neely/images/myContentBG.jpg);
	background-repeat: repeat;
	background-position: left top;
	 to align the site to the left send this elment to the left - float:left */
}

#primaryContentWrap {
	
}

#primaryContent {
	/*background-color:#FFFFFF;
	background-image:url(http://www.neelymfg.com/themes/Neely/images/primaryContentBG.jpg);
	background-repeat: repeat;
	background-position: left top;*/
	background:none;
	border:groove;
}

#secondaryContent1Wrap {
	
}

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


#secondaryContent1 {
	background-color:#FFF;
	/*background-image:url(http://www.neelymfg.com/themes/Neely/images/secondaryContent1BG.jpg);
	background-repeat: repeat-y;
	background-position: left top;*/
}

#secondaryContent2Wrap {
	
}

#secondaryContent2 {
	background-color:#FFF;
	/*background-image:url(http://www.neelymfg.com/themes/Neely/images/secondaryContent2BG.jpg);
	background-repeat: repeat-y;
	background-position: left top;*/
}

#footerWrap {
	background-color: #DCB98D6;
	/*background-image:url(http://www.neelymfg.com/themes/Neely/images/footerWrapBG.jpg);*/
	background-repeat: repeat-x;
	background-position: left top;
}

#footer {
	/* to align the site to the left send this elment to the left - float:left */
	background-color: #DCB98D;
	/*padding:10px 0px 150px 0px;
	/*background-image:url(http://www.neelymfg.com/themes/Neely/images/footerBG.jpg);*/
	background-repeat: repeat-y;
	background-position: left bottom;
	-webkit-box-shadow: 10px 10px 22px  #000000;
-moz-box-shadow: 10px 10px 22px #000000;
box-shadow: 10px 10px 22px #000000;
vertical-align:middle;
}

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

/* 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;
}

/* 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;
}

/* 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;
}
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(http://www.neelymfg.com/themes/Neely/data:/concrete/themes/Neely/image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.neelymfg.com/themes/Neely//concrete/themes/Neely/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.neelymfg.com/themes/Neely//concrete/themes/Neely/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }