/*
 * Title: main.css
 *  Main stylesheet for Creative Freak
 *
 * Author:
 *   *  Eli Griffith
 */

/* ----------------------------------------------------------- Element styles */
* { padding: 0; margin: 0; border:0; } /* global */

html{
	width:auto;
	background: url(images/bkgd.gif) repeat #4a2012;
}

body {
	height:100%;
	background: url(images/bkgd.gif) repeat #4a2012;
}

a {text-decoration:none;}
a:hover {text-decoration:underline;}

.clear{clear: both;}

/* --------------------------------------------------------- Container layout */

.shading {
	width:100%;
	background: url(images/shading.png) repeat-x;
}

* html .shading {background:none;}

#header {
	width:991px;
	height:50px;
	background:url(images/header2.png) no-repeat;
	margin:0 auto;
}

.left_cloud {
	position:relative;
	right:139px;
}

* html .left_cloud {display:none;}

.right_cloud {
	position:relative;
	bottom:543px;
	left:820px;
}

* html .right_cloud {display:none;}

.bottom_trail {
	position:relative;
	left:888px;
	bottom:46px;
}

* html .bottom_trail {display:none;}

#main {
	width:991px;
	background: url(images/main.png) repeat-y;
	margin:0 auto;
}

#bottom {
	width:991px;
	height:40px;
	background: url(images/btm.png) no-repeat;
	margin:0 auto;
}

.bump {
	width:991px;
	height:40px;
}

/* --------------------------------------------------------- Menu */

.topmid {
	width:959px;
	height:390px;
}

.menu {
	width:105px;
	/*width:408px;  */
	height:46px;
	/*background:url(images/menubar.png) no-repeat;*/
	position:relative;
	top:275px;
	left:190px;
	/*left:55px;  */
}

.menu ul {list-style-type:none;}

.menu ul li {
display:inline;
float:left;
margin:7px 0 0 25px;
}

/* --------------------------------------------------------- Content */

.mid {
	width:959px;
	background: url(images/mid2.gif) no-repeat top #7db033;
	margin:0 auto;
}


.gallery {
	width:931px;
	height:330px;
	margin:0 auto;
}

.gallery_btm {
	width:931px;
	height:25px;
	margin:0 auto;
}
/* ----------------------------------------------------------Ind galleries */
.photos {
margin-left:50px;
float:left;
}

.photos ul {
float:left;
list-style-type:none;
display:inline;
}

.photos ul li {
display:block;
padding:3px;
}

.photos button {
background:url(images/th_shadow.gif) no-repeat right;
cursor:pointer;
width:71px;
}

.photos span {
background:url(images/th_shadow.gif) no-repeat right;
cursor:pointer;
width:71px;
}

.photos img {border:3px solid #fff;}

.illustration {
margin-left:100px;
float:left;
}

.illustration ul {
float:left;
list-style-type:none;
display:inline;
}

.illustration ul li {
display:block;
padding:3px;
}

.illustration button {
background:url(images/th_shadow.gif) no-repeat right;
cursor:pointer;
width:71px;
}

.illustration img {
border:3px solid #fff;
}

/* --------------------------------------------------------- Footer */

.footer {
	width:959px;
	height:280px;
	background: url(images/footer.png) no-repeat top;
	margin:0 auto;
}

.flickr {
	float:left;
	width:550px;
	height:270px;
}

.flickr img {
	position:relative;
	left:140px;
	top:122px;
}

.flickr_pics {
	margin-top:12px;
}

.flickr_pics img{
	width:56px;
	height:56px;
	border:2px solid #a7cde3;
	-moz-border-radius: 3px;
	margin:3px;
}

.twitter {
	float:left;
	width:350px;
	height:270px;
}

.twitter ul {
	list-style-type:none;
	color:#ffffff;
	font:12px Trebuchet MS, Arial, sans-Serif;
	height:50px;
	position:relative;
	top:140px;
	left:40px;
}

.twitter ul a {color:#fad558;}

.twitter img{
position:relative;
top:140px;
}


/* ---------------------------------------------- Tooltips */

/* tooltip styling. uses a background image (a black box with an arrow) */ 

.arrow {
	padding: 10px;
	width: 54px;
	display: none;
	background: url(images/arrow.png) no-repeat 0px 0px;
	height: 47px;
}
.abouttip p {
padding:20px 25px 15px 15px;
font:bold 14px Lucinda, Trebuchet MS, Arial, sans-Serif;
line-height:18px;
color:#16255a;
}
.abouttip {
	padding: 5px;
	width: 569px;
	display: none;
	background: url(images/about_tooltip.png) no-repeat 0px 0px;
	height: 307px;
}

#abouttip {
	cursor: pointer;
	width:85px;
	height:40px;
	overflow:hidden;
	display: block;
}

#trigger {
	cursor: pointer;
}