/*Padding adds to width! If you have an element that is 200px wide, then add padding of 10px to each side, that element is now 220px.  Not so with margins!
padding is inside the border, margin outside them

#############################    COLORS    ##############################################

COLORS
Use http://colorschemedesigner.com/ to change the values below then do a find/replace

MONO (green)
Primary 	6A8E41	
Greyish		55693F	
Darker		395A14	
Lighter		9ABF6E	
Lightest	A2BF80

COMPLEMENT (brown)
Primary 	CC9900	
Greyish		997C26	
Darker		856300	
Lighter		E6BA39	
Lightest	E6C667

/*#############################    GLOBALS    #########################################*/

a {
	color: #9ABF6E;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #CC9900;
}
h1, h2, h3, h4 {
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	color: #CC9900;
	font-weight: bold;
}
h1 {
	margin: 10px 0px 2px 0px;
	color: #E6C667;
	text-transform: uppercase;
}
h2{
	margin: 10px 0px 2px 0px;
	color: #E6C667;
	text-transform: uppercase;
}
h3{
	margin: 10px 0px 2px 0px;
	color: #E6C667;
	text-transform: uppercase;
}

/*#############################    PAGE STRUCTURE    ##################################*/

html{
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif; 
	font-size: 12px;
	color: #A2BF80;
}
body{
	background:#9ABF6E; /*url(../images/bg.gif) repeat-x center -84px;*/
	margin: 0px 5px 0px 5px; 
	padding: 0; 
}
#page{
	width: 1000px;
	margin : 10px auto;
}
#header {
	height: 40px;
	background: #395A14 url(images/header.png) no-repeat left; /*put logo in here*/
	padding: 5px 0px 5px 0px;
	margin: 10px 5px 10px 0px;
	/* opacity:0.75; */
	width: 995px;
	border-radius:8px;
}
.cola {
	float: left;
	width: 240px;
	margin: 0px 0px 10px 0px;
}
.colb-recipes {
	float: right;
	width: 740px;
	margin: 0px 5px 10px 0px;
	color:#ffffff;
	background: #6A8E41;
	border-radius:8px;
}
.colb-pictures {
	float: right;
	width: 740px;
	margin: 0px 5px 10px 0px;
	color:#ffffff;
	background: #395A14;
	border-radius:8px;
}
.sectioncontainer {
	color: #A2BF80;
	background: #395A14;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 10px 0px;
	/* opacity:0.75; */
	border-radius:8px;
}
.sectioncontainercentered {
	color: #A2BF80;
	background: #395A14;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 10px 0px;
	text-align: center;
	/* opacity:0.75; */
	border-radius:8px;
}
.sectionheader {
	background: #E6BA39;
	height:20px;
	color: #395A14;
	font-weight: bold;
	padding-top:2px;
	padding-left:18px;
	margin: 0px 0px 16px 0px;
	/* border-radius:8px; */
	text-align: left;
}
#footer {
	color: #395A14;
	clear:both;
	margin: 10px 0px 0px 0px;
	padding-top: 5px;
	border-top: 2px solid #6A8E41;
	text-decoration: none;
	text-align:right;
}
#footer a {
	color: #395A14;
}

/*#############################    COLORS    ##########################################*/

.whiteonblack {
	background: #191919;
	color: #ffffff;
}
.blackonwhite {
	background: #ffffff;
	color: #000000;
}
.white {
	color:#ffffff;
}
.secondary {
	color:#CC9900;
}
.red {
	color:#990000;
}
.green {
	color:#006600;
}
.clear {
	clear: both;
	margin: 0px;
	padding: 0px;
}

/*#############################    FORMS    ###########################################*/

input {
	border:none;
	height:25px;
	padding: 0px 0px 0px 4px;
	margin: 0px 0px 5px 0px;
	border-radius:6px;
}
fieldset {
	margin:0px 10px 0px 10px;
	padding:0px 0px 0px 0px;
}
label {
	margin:0px 0px 5px 0px;
	padding:0px 0px 5px 0px;
}
textarea {
	border: 0px solid #856300; 
	margin:0px 0px 0px 0px; 
	padding:4px;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif; 
	font-size: 12px;
	text-align:left;
	border-radius:6px;
	width:100%;
}
.radio {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.button {
    margin: 5px 0px 5px 0px;
    text-decoration: none;
	height:25px;
	font-weight:bold;
	cursor:pointer;
    display: inline-block;
    text-align: center;
    color: #ffffff;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
input:focus, textarea:focus{
border: 0px solid #856300;
}
.button:active {
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}
.button-blue {
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
}
.button-blue:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
}

/*#############################    RECIPE    ##########################################*/

#recipecola {
	WIDTH: 270px;
	margin: 0px 15px 0px 10px; 
	FONT-SIZE: 12px;
	display:inline-block;
	vertical-align:top;
}
#recipecolb {
	WIDTH: 410px; 
	margin: 0px 10px 0px 20px;
	FONT-SIZE: 12px; 
	display:inline-block;
	vertical-align:top;
}
#cookbook {
	FONT-SIZE: 10px; 
	FONT-WEIGHT: normal; 
	TEXT-TRANSFORM: uppercase; 
	color: #cccccc; 
	LINE-HEIGHT: 20px; 
	LETTER-SPACING: 0.5em; 
	PADDING-BOTTOM: 2px;
}
.recipesectioncontainer {
	margin: 0px 10px 0px 10px;
	display:inline-block;
	clear:none;
}
.recipesectioncontainer select{
	margin: 0px 0px 5px 0px;
	width: 100px;
	height: 25px;
	clear:none;
}
.recipeheader {
	FONT-SIZE: 22px; 
	color: #395A14; 
	TEXT-TRANSFORM: lowercase; 
	margin: 10px 0px 10px 0px; 
	border-bottom: #395A14 2px dotted;
	clear:left;
}
.message {
	font-size:18px;
	font-weight:bolder;
	margin: 20px;
}
.uploadheader {
	font-size: 18px;
	font-style: bolder;
	text-transform:capitalize;
	margin: 5px 0px 5px 0px;
}
/*#############################    DELETE?    ###########################################*/

#albumdescription {/*###delete?###*/
	float: left;
	width: 245px;
	margin: 0px 10px 0px 0px;
}

/*#############################    LISTS    ###########################################*/

ul.arw {
	list-style-position: outside;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-weight: normal;
	list-style-position:inside;
}
ul.arw li {
	margin: -1px;
	padding: 0px 0px 0px 10px;
	background-repeat: no-repeat;
	background-position: 0px 8px;
	text-transform: capitalize;
} 
	ul.arw li.favorite {
		color: red;
	}
	ul.arw li.good {
		color:yellow;
	} 
	ul.arw li.new {
		color:blue;
	}
	ul.arw li.meh {
		color:black;
	}
	ul.arw li.selected a{
		color: #ffffff;
		font-weight: bold;
	}
ul.arw li a:hover{
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

/*#############################    MENU    ###########################################*/

#wd-navbar {
  float: right;
  margin: 6px 15px 0px 0px;
  background:#55693F;
  border-radius:8px;
}
#wd-navbar ul {
  list-style: none;
  margin: 0;
  padding: 0px;
}
/* Stack LI elements horizontally instead of the default vertical orientation */
#wd-navbar li {
  float: left;
  border-right: 1px solid #395A14;
}
/* Turns the links into larger clickable boxes */
#wd-navbar li a {
  display: block;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
}
#wd-navbar li.first{
  cursor: default;
  padding: 5px 10px 5px 10px;
}
#wd-navbar li.last{
  cursor: default;
  padding: 5px 10px 5px 10px;
  border-right: 0px;
}
/* Turns the links into larger clickable boxes */
#wd-navbar li a.selected {
  background-color: #CC9900;
  color: #ffffff;
}
/* Pseudo selector used for a usability aid, so you know when you can click */
#wd-navbar li a:hover {
  background-color: #CC9900;
  color: #fff;
  text-decoration: none;
}
/* Hides nested hierarchy links by default */
#wd-navbar li ul {
  display: none;
  position: absolute;
  padding: 0;
}
/* Shows nested hierarchy links when we mouseover the parent */
#wd-navbar li:hover ul {
  display: block; 
}
/* Overrides the style on line 23 for nested link collections */
#wd-navbar li li {
  float: none;
  border-bottom: 1px solid #395A14; /* border-top causes IE bug */
  background-color: #E6C667;
  
}
/* Different styling for nested hierarchy links. */
#wd-navbar li li a {
  border: 0;
  border-left: 1px solid #395A14;
  border-right: 1px solid #395A14;
  color:#395A14;
}


.ssp-mobile-poster-title {
/* Album and gallery title */
color:#ffcc00 !important;
background: #6A8E41 !important;
font-size:24px !important;
}