/* ------------ HTML ------------ */

body{
	font-family: sans-serif;
	font-size: 12pt;
}
a{
	outline: none;
	color: #006990;
}
a img{
	border: 0;
}

a.external{
	padding-right: 14px;
	background: url(../images/base/external.png) right no-repeat;
}

img{display: block;}

hr{
	border: 0px solid #696a6d;
	border-width: 1px 0 0 0;
}

@font-face {
	font-family: "Myriad Pro Bold";
	src: url("../fonts/MyriadPro-Bold.otf");
}

h1,h2{
	font-family: "Myriad Pro Bold",sans-serif;
	text-transform: uppercase;
	color: #696a6d;
}

/* ------------ Structure ------------ */

#masthead, #container, #footer{
	width: 950px;
	margin: 0 auto;
}
#masthead{
	height: 125px;
	background: #b4b4b6;
	border-bottom: 2px solid white;
}
#sidenav{
	float: left;
	width: 200px;
}
#main{
	width: 750px;
	margin-left: 200px; /* sidebar width */
}
#main_content{
	float: left;
	width: 506px; /* -4px for borders, -40 for padding */
	margin: 0 2px;
	padding: 0 20px;
}
.sideinfo{
	float: right;
	width: 200px;
	height: 451px;
}
#sidenav,#main{
	min-height: 451px;
}
#footer{
	clear: both;
	font-size: 60%;
	color: #696a6d;
	height: 20px;
	padding: 4px;
	overflow: hidden;
	margin-top: 2px;
	border-top: 1px solid #696a6d;
}

/* ------------ Sitewide Styles ------------ */

.alignleft{float:left;}
.alignright{float:right;}

.button{
	background: #696a6d;
	font-size: 85%;
	text-transform: uppercase;
	text-decoration: none;
	font-family: "Myriad Pro Bold",sans-serif;
	color: white;
	padding: .5em .5em .25em .5em;
}
.button:hover{
	background: #8f8f92;
}

.button.creators{background:#679146;}
.button.creators:hover{background:#8dad74;}

/* ------------ Editor ------------ */

.e{position:relative;}
.e_on{position:relative;background:#ffd;cursor:pointer;}

#editor_buttons{
	text-align: center;
	padding: 4px;
}

#blackout{
	display: none;
	background: black;
	/*filter: alpha(opacity=50);
	opacity: 0.5;*/
    z-index: 101;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#xml_div{
	//display: none;
	background: red;
}
#xml_div div{
	width: 10px;
	height: 200px;	
}


/* ------------ Masthead ------------ */

#masthead{
	position: relative;
	top:0;
	background-position: 0 125px;
}
#masthead #masthead_link{
	position: absolute;
	top: 0;
	display: block;
	height: 125px;
	width: 950px;
	z-index: 99;
}
#masthead #masthead_link span{display: none;}
#info_button{
	position: absolute;
	top: 0;
	left: 926px;
	z-index: 399;
}
#info_button:hover{cursor:pointer;}
#info_div{
	display: none;
	position: relative;
	top: 0;
	float: right;
	clear: both;
	z-index: 299;
	height: 125px;
	width: 200px;
	background: url('../images/base/75w.png');
}
#info_div div{
	width: 180px;
	height: 125px;
	padding: 10px;
	font-size: 75%;
}
#info_div div:first-line{
	font-weight: bold;
}

/* ------------ Nav ------------ */

/*
Blue 7546
	100% #006990
	75% #408fac
	50% #76a5c3
Green 7490
	100% #679146
	75% #8dad74
	50% #b3c8a2
Orange 7414
	100% #df8c19
	75% #e7a451
	50% #efbe83
Grey 7540
	100% #696a6d
	75% #8f8f92
	50% #b4b4b6
*/

#sidenav{
	background: #b4b4b6;
}

#sidenav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#sidenav ul.subnav{
	display: none;
}
#sidenav ul.open{display: block;}

#sidenav a{
	display: block;
	border-top: 2px solid white;
}
#sidenav a span{display: none;}

#sidenav ul li.navbutton_mainnav a{height: 57px;}
#sidenav ul li.navbutton_subnav a{height: 25px;}

#sidenav ul li.navbutton_mainnav a{
	background-position: 0 -20px;
}

#sidenav ul li.navbutton_subnav{
	background-position: 0 2px;
	background-repeat: no-repeat;
}
#sidenav ul li.navbutton_subnav:hover{
	background-position: 0 2px;
	cursor: pointer;
}

#navbutton_creations>a{
	border-top:0;
	background: url(../images/navbuttons/navbutton_creations.png) #006990;
}
#navbutton_creations>a:hover{
	background-color:#408fac;
}
#navbutton_creations li.navbutton_subnav{
	background: #76a5c3;
}
#navbutton_creations li.navbutton_subnav:hover{
	background: #408fac;
}
#navbutton_creations li.on,
#navbutton_creations li.on:hover{
	background: #006990;
}
#navbutton_creations #navbutton_identities{
	background-image: url(../images/navbuttons/navbutton_identities.png);
}
#navbutton_creations #navbutton_print{
	background-image: url(../images/navbuttons/navbutton_print.png);
}
#navbutton_creations #navbutton_websites{
	background-image: url(../images/navbuttons/navbutton_websites.png);
}
#navbutton_creations #navbutton_images{
	background-image: url(../images/navbuttons/navbutton_images.png);
}
#navbutton_creations #navbutton_extras{
	background-image: url(../images/navbuttons/navbutton_extras.png);
}

#navbutton_creators>a{
	background: url(../images/navbuttons/navbutton_creators.png) #679146;
}
#navbutton_creators>a:hover{
	background-color:#8dad74;
}
#navbutton_creators li.navbutton_subnav{
	background: #b3c8a2;
}
#navbutton_creators li.navbutton_subnav:hover{
	background: #8dad74;
}
#navbutton_creators li.on,
#navbutton_creators li.on:hover{
	background: #679146;
}
#navbutton_creators #navbutton_april{
	background-image: url(../images/navbuttons/navbutton_april.png);
}
#navbutton_creators #navbutton_jeremy{
	background-image: url(../images/navbuttons/navbutton_jeremy.png);
}
#navbutton_creators #navbutton_kevin{
	background-image: url(../images/navbuttons/navbutton_kevin.png);
}

#navbutton_clients>a{
	background: url(../images/navbuttons/navbutton_clients.png) 0 2px no-repeat #df8c19;
}
#navbutton_clients>a:hover{
	background-color:#e7a451;
}

#navbutton_contact>a{
	background: url(../images/navbuttons/navbutton_contact.png) 0 2px no-repeat #696a6d;
	border-bottom: 2px solid white;
}
#navbutton_contact>a:hover{
	background-color:#8f8f92;
}

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

#login_form span{
	float: right;
}
.login_button{
	color: #696a6d;
	text-decoration: none;
}
.login_button:hover{color:#b4b4b6;}
#login_input{
	display: none;
	width: 100%;
	text-align: right;
}
#login_input .login_button{
	float: none;
}

/* ------------ SideInfo ------------ */

#sideinfo_welcome{
	background: #b4b4b6;
}

#sideinfo_creations,
#sideinfo_identities,
#sideinfo_print,
#sideinfo_websites,
#sideinfo_images,
#sideinfo_extras{
	background: #76a5c3;
}

#sideinfo_creators,
#sideinfo_april,
#sideinfo_kevin,
#sideinfo_jeremy{
	background: #b3c8a2;
}

#sideinfo_clients{
	background: #efbe83;
}

#sideinfo_fan,
#sideinfo_contact,
#sideinfo_sotm{
	background: #b4b4b6;
}

#sideinfo_content{
	padding: 10px;
	font-size: 10pt;
}
#sideinfo_content p{margin-top:0;}
#sideinfo_content p.client>span,
#sideinfo_content p.desc>span,
#sideinfo_content p.link>span{
	font-weight: bold;
	font-size: 10pt;
	text-transform: uppercase;
	color: white;
}

#sideinfo_content h4{
	font-weight: bold;
	font-size: 10pt;
	text-transform: uppercase;
	color: white;
	margin: 0;
}

.sidebar_feature{
	width: 200px;
	border-bottom: 2px solid white;
}

/* ------------ Welcome ------------ */

.front_feature{
	margin: 0;
	margin-top: 20px;
}

#sideinfo_welcome #sideinfo_content{
	padding: 0;
}

.sidebar_feature#sotm{position:relative;top:0;}
.sidebar_feature#sotm .sidebar_header{
	position: absolute;
	top:0;
	z-index: 1;
}

.sidebar_feature#sotm{
	display: block;
	overflow: hidden;
}
.sidebar_feature#sotm img{
	width: 200px;
}

/* ------------ Creations ------------ */


/* ------------ Creators ------------ */

#sideinfo_contact #sideinfo_content{
	padding: 0;
}

#creator_content{
	margin-top:20px;
	padding: 0 10px;
	height:411px;
	background:url(../images/creators/TheLaborShip.jpg) no-repeat;
}

#creator_content h1{
	margin:0;
}

.mug{
	float: left;
	margin-right: 1em;
}

/* ------------ Contact ------------ */

fieldset{
	border-width:0;
}

legend{
	text-transform: uppercase;
	color: #4675B8;
}

label{
	display: block;
	float: left;
	text-align: right;
	width: 4.5em;
}

input{
	margin-bottom: 1.5em;
	clear: both;
}

.form_indent{margin-left: 4.5em;}

.radio_label{
	display: inline;
	float: none;
}

.req{color: #D25B86;}

.labeless{
	display: block;
	padding-left: 4.5em;
}


/* ------------ Clients ------------ */

.client_name{
	font-size: 90%;
	padding-top: .5em;
}
.client_co{
	font-size: 75%;
}


/* ------------ SOTM ------------ */

#map{
	margin-top: 20px;
}

.sotm_caption{
	margin: 0;
	margin-bottom: .5em;
	width: 330px;
	font-size: 80%;
}

.sotm_photog{
	margin: 0;
	font-size: 80%;
	font-style: italic;
	text-align: right;
}

.sotm_img{
	height: 250px;
	overflow: hidden;
}
.sotm_img img{
	height: 250px;
}

/* ------------ Photography ------------ */

#sideinfo_extras img{
	width: 180px;
}

/* ------------ SlidingPanels ------------ */

.SlidingPanelsWidget {
	margin: auto;
	width: 500px;
	height: 420px;
	position: relative;
	text-align: center;
}
.SlidingPanelsContainer {
	width:8000em;
	position: absolute;
}
.SlidingPanelsContent {
	width: 500px;
	float: left;
}
.SlidingPanelsNav {
	height: 25px;
	text-align: center
}

.slide_button, .slide_button_on{
	display: inline-block;
	margin: 0 .25em;
	width: 15px;
	height: 15px;
	background: #b4b4b6;
}
.slide_button_on{
	background: #696a6d;
}
.slide_button:hover, .slide_button_on:hover{
	background: #8f8f92
}
.slide_button_triangle,
.slide_button_triangle_off{
	display: inline-block;
	margin: 0 .25em;
	width: 8px;
	height: 15px;
}
.slide_button_triangle_off#slide_button_triangle_l,
.slide_button_triangle_off#slide_button_triangle_r{height:0;}
#slide_button_triangle_l{
	background: url(../images/base/slide_button_triangle_l.gif) no-repeat;
}
#slide_button_triangle_r{
	background: url(../images/base/slide_button_triangle_r.gif) no-repeat;
}
#slide_button_triangle_l:hover,
#slide_button_triangle_r:hover{
	background-position: -8px;
}

/* ------------ Slideshow ------------ */

#slideshow_popup{
	position: absolute;
	float: left;
	z-index: 200;
	top: 0;
	right: 0;
	width: 546px;
	height: 451px;
	background: #696a6d white;
	display: none;
}
#slideshow_popup #picture{
	width: 502px;
	background: white;
	margin: 20px 20px 0;
	text-align: center;
}
#slideshow_popup #picture #mainImage{
	max-height: 360px;
	margin: auto;
}
#slideshow_popup #caption{
	font-size: 75%;
	font-weight: bold;
	text-transform: uppercase;
	color: #696a6d;
}
#slideshow_popup #thumbnails{
	margin: 10px 20px;
	height: 30px;
	overflow: hidden;
}
#slideshow_popup #thumbnails a{
	height: 15px;
	margin-top: 7px;
	float: left;
}
#slideshow_popup #thumbnails img{
	float: left;
	cursor: pointer;
	margin: 0 5px;
	border: 2px solid white;
}
#slideshow_popup #thumbnails img.inFocus{
	border: 2px solid #696a6d;
}
#slideshow_popup #thumbnails img.selectedThumbnail{
	border: 2px solid #006990;
}