/* SwissBloom basic screen & projection stylesheet. 
*
* Special thanks to Trent Foley for sharing his Galleriffic jQuery slideshow
* http://www.twospy.com/galleriffic/index.html
*
* Several of  Eric Meyer's reset tools were incorparated, see 
* http://meyerweb.com/eric/tools/css/reset/ v1.0 | 20080212.  
*

* Sandra Mello 2011-12-31 */

/* To quickly find styled sections use ' =NAV'  in find. Elements are styled in the following order:
RESET
HEADINGS
LINKS
LISTS
GENERAL
PAGE
BRANDING
NAV igation
CONTENT
FAQ
FOOTER
404
*/

/* =RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, address, cite,
del, dfn, em, font, img, ins, kbd, q, s,
strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li, label, legend, caption  {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
 /* the following 2 rules needed to prevent a horizontal shift between short and long pages (scrollbar or no scrollbar */
html { 
	min-height: 100%;       
	margin-bottom: 1px; 
	}	

body {
	background: #FFFFFF;
	color: #1C0A06;   /* #606054 gray #444 */
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;   /* set to Arial in IE8 and earlier */
	font-size: 100%;      /* most browsers are set at 16px. Allows most flexible resizing in IE7 and earlier when the rest is set in em  */
	font-weight: normal;
	line-height: 1;
	position: relative;
	width: 100%;
	}
	


/* =HEADINGS  */
h1 {
	font-family: "Cinio Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; /* set to Arial in IE8 and earlier */
}
h2, h3, h4, h5, h6 {
	color: #2D2D2D;			/* #606054 gray  */
	letter-spacing: 1px;
	font-family: "Cinio Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; /* set to Arial in IE8 and earlier */
	font-variant: small-caps;
	font-weight: 200;
	margin: 0;

	padding: 0 0 0.875em 0;
	}

h2 {
	font-size: 1.125em;		/* 20px */
	}

h3, h4 { 
	font-size: 0.875em; 	/* 16px */
	}                     
	
h5, h6 { 
	font-size: 0.750em;		/* 14px */
	}                    


/* =LINKS */


a:link {
	color: #FF0000;			/* swiss flag red corresponding to pantone PMS 485  #27D */
	font-family: Helvetica, Arial, sans-serif;   /* set to Arial in IE8 and earlier */
	text-decoration: none;
	}

a:visited {
	color: #CC0000;    /* darker red */
	text-decoration: none;
	}

a:focus {
	color: #CC0000;
	outline: thin dotted red;
	}
	
a:hover, a:active {
	color: #CC0000;
	text-decoration: underline;
	}

/* =LISTS  see main nav styling below, and in gallery.css */
ul, ol {
	line-height: 1.7em;
	list-style-type: none;
	margin: 0;
	padding: 0 0 2em 0;
	}

li {
	font-size: 0.875em;
	font-family: Helvetica, Arial, sans-serif;   /* set to Arial in IE8 and earlier */
	}

li li, li h4, li h5, li li h5, li li p, li li li {
	font-size: 1em;      /* prevents nested links fonts from shrinking */
	}
	
li p {
	font-size: 0.875em;
	padding-left: 1.5em;
	}
	
	

	

/* =GENERAL */

p {
	line-height: 1.7em;
	font-family:  Helvetica, Arial, sans-serif;   /* set to Arial in IE8 and earlier */
	font-size: 0.875em;
	font-weight: 200;
	padding: 0 0 0.875em 0;
}


/* =PAGE See #content below */

.clear {
	clear: both;
    }


div#page {
	background: #FFFFFF url(../images/bg-60.jpg) repeat-x top center;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}


div#container {
	margin: 0 auto;
	padding: 0;
	width: 900px;		/*  width is used for the gallery's positioned images */
}

/* =BRANDING contains the logo and global NAVigation */

#branding {
	background-color: transparent; 
	height: 60px;
	margin: 0 auto 32px auto;
	overflow: hidden;			/* needed to avoid unwanted scrollbars in IE7 and Safari */
	padding: 0;
	width: 100%;			/* floats need this to trigger hasLayout in IE */
}

div#logo {
	float: left;
	margin: 0;
	padding: 20px 0 0 0;
	width: 220px;
}

/* this should only appear if the gif of the logo does not appear */
#branding h1 a {
	color:  #FFFFE3;				
	font-size: 32px;
	font-variant: small-caps;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1;
	text-shadow: #710E06 5px 5px 3px;  /* dark red/black shadow */
}

#branding img {
	border-bottom: 2px solid #FFF;   /* border added to prevent image from moving on hover */
	margin: 0;
	padding: 0;
	}
	
#branding img:focus {
	outline: thin dotted #FFF;
	}

#branding img:hover, #branding img:active {
	border-bottom: 2px solid #FFF;
	}


/* =NAV igation. This is the Global navigation a the top of each page
_____   see 'navigation' below used on the gallery pages    */

div#nav {
	height: 100%;  /* giving the containing div a dimension to trigger hasLayout in IE */
	}

#nav ol { 				/* using an ordered list to force the correct order */
	float: right;   
	line-height: 1.7em;
	margin: 0; 
	padding: 24px 0 0 0;
	width: 538px;			/* was 548 width to align with large image in gallery */
	}
	
#nav ol li {
	list-style-type: none;
	}
	
	
#nav li {
	display: inline;
	float: left;      /* each list item is floated left within the right floated div */
	font-size: 0.750em;
	font-weight: 400;
	margin: 0 0 0 30px;
	padding: 0;
	text-transform: uppercase;
	}
	
#nav li:first-child {		/* first item in list needs no margin  */
	margin-left: 0;
	}
	
	
		
li.current { 
	color:  #FFFFE3;               /* white */
	letter-spacing: 1px;
	text-shadow: #710E06 5px 3px 3px;  /* dark red/black shadow */
	}
	
#nav a {
	color: #000;
	letter-spacing: 1px;
	}
	
#nav a:link, #nav a:visited {
	text-decoration: none;
	}
	
#nav a:focus {
	outline: thin dotted #FFF;
	text-decoration: underline;
	text-shadow: #710E06 5px 3px 3px;  /* dark red/black shadow */
	}
	
#nav a:hover, #nav a:active {
	color: #FFF;
	text-decoration: underline;
	text-shadow: #710E06 5px 3px 3px;  /* dark red/black shadow */
	}

/* =CONTENT contains two floated divs: main content and aside */

div#content {    /* this is styled differently than class .content in gallery */
	background-color: #FFFFFF;
	overflow: hidden;  /* clears floated divs  */
	margin: 0 auto;
	padding: 0;
	width: 900px;
	}

	
/* The following divs are used to place content on the home, bio, and contact pages in the same place where the large image is floated on the gallery pages.( When javascript is turned off on the gallery, the content does not appear). */

div#home, div#bio, div#faq {
	float: right;
	margin: 20px 0 0 0;
	padding: 0 2em 1em 0;
	width: 510px;
	}

/*	
div#home {
	background-image: url() bottom right;
	}
*/

#home h2 {
	margin-left: 0;  /* was 9px */
	}
#home p {
	margin-left: 0; /* was 10px */
	width: 480px;
	}
	
#mainText h3 { /* Adds margin to keep orbit slider buttons from overlapping */
	position: relative;
	margin-top: 60px;
	}
	
#columns {
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	column-count: 2;
	column-gap: 30px;
	}
	
#signed {
	text-align: right;
	}
	
div#faq {
	min-height: 500px;
	}
	
#faq p {
	font-size: 0.875em;
	}
	
h5.faq {
	padding-left: 1.5em;
	}

	
/* floated testimonial box */

#photographers {
	color: #DDD;
	font-size: 0.5em;
	margin-top: 1em;
	width: 200px;
	}
	
div.aside {
	border: 1px solid #DDDDDD;
	float: left;
	font-size: 0.875em;
	margin: 20px 30px 4px 0;
	padding: 0;
	width: 200px;
	}
	
.aside h2 {
	color: #646666;    /*  */
	font-size: 0.875em;
	font-weight: 600;
	margin: 0;
	padding: 1em;
	}
	
.aside p {	
	color: #5D5D5D; /* 6F6661 */
	margin: 0;
	padding: 0 1em 1em 1em;
	}
	
.asidepix {
	border: none;
	margin: 0;
	padding: 0;
}

/* Bio and contact pages */	
.org, address {
	font-variant: small-caps;
	letter-spacing: 1px;
	}
	
#signature {
	font-family: 'Monotype Corsiva ', 'Apple Chancery', 'URW Chancery L', cursive;
	}
	


	
/* =FOOTER */


#footer {
	background: #DF2E1C url(../images/bg_footer.jpg) no-repeat top;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	color: #FFF;
	clear: both;						/* only needed for gallery pages */
	font-size: 0.875em;
	margin: 10px 0 0 0;
	padding-top: 24px;
	position: relative;
	overflow: hidden;
	width: 100%;
	}
	
#footer a:link, #footer a:visited {
	color: #FFF;
	text-decoration: underline;
	}

#footer a:hover, a:focus, a:active {
	color: #FFF;
	font-weight: bold;
	text-decoration: underline;
	}
	
#siteinfo {
	margin: 0 auto;
	width: 900px;
	}
	
#visiten {
	float: left;
	margin: 0 30px 0 0;
	padding: 0 1em 0 1em;
	width: 200px;
	}
	
address, .extras h3 {
	color: #FFF;
	font-variant: normal;
	text-shadow: #000 5px 5px 3px;
	}
	
address a:link {
	color: #FFF;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	}
	
.extras {
	float: right;
	margin: 0;
	padding: 0 16px;
	width: 270px;
}

.extras li, .extras p {
	text-shadow: #000 5px 3px 3px;
	}	
	
div#hcard {
	margin: 0;
	padding: 0;
	}

#hcard h3 a {
	color: #FFF;
	font-weight: normal;
	}
	
#hcard h4 {
	color: #FFF;
	}
	
	
#hcard p {
	color: #FFF;
	padding: 0; 
	}
	
#hcard a {
	color: #FFF;
	}
	
#download {
	font-size: 0.750em;
	margin: 0;
	padding: 0;
	}
	
#download a {
	color: #FFF;
	text-decoration: underline;
	}