/*
-----------------------------------------------
Opera Dog Studios - CSS Styles
Author:   Karol Golka
Company:  http://www.webstruments.com
Version:  June 27, 2005
----------------------------------------------- */

/* generics
-------------------- */
body {
	background: #EEEECC;
	margin: 2em auto 4em;
	padding: 0;
	text-align: center;
	font-family: "Trebuchet MS", Verdana;
	font-size: small;
	line-height: 1.4em;		
	}
div { margin: 0; padding: 0; }
span.more a { 
	text-decoration: underline;
	font-size: 90%;
	padding-right: 10px;
	font-weight: bold;
	}
span.more a:hover {
	color: #0353FC;
	}
span.more {
	background: url(../images/recording-studio-i-more.gif) no-repeat right 7px;		
	padding-left: 10px;
	}
h3 { 
	font-size: 1.1em; 
	font-weight: bold; 
	padding: 0;
	margin: 0 0 .5em;
	}
h4 {
	font-size: 160%;
	font-weight: normal;
	background: url(../images/recording-studio-btmbord.gif) repeat-x bottom;
	margin: 0;
	padding: 0;
	padding-bottom: 4px;
	margin-bottom: 1em;	
}
h4 strong {
	font-size: 60%;
	font-weight: normal;
	background: url(../images/icon-attention.gif) no-repeat 0% 0%;
	margin-left: 20px;
	padding-left: 20px;
	text-transform: none;
	color: #666;
	}
h4 strong.noicon {
	background: none;
	padding-left: 10px;
	margin-left: 0;
	}
h5 {
	font-size: 120%;
	font-weight: bold;
	margin: 0 0 -1em;
	padding: 0;			
}

p {
	margin: 0 0 1.4em;
	padding: 0;
	}	
img { border: none; }
	
#header a, a#pics, a#dsd { text-decoration: none; }

/* core drop shadow rules
-------------------- */	
.wrap1, .wrap2, .wrap3 {
	display:inline-table;
	/* \*/display:block;/**/} 
.wrap1 {
	float:left;
	background:url(../images/shadow.gif) right bottom no-repeat;}
.wrap2 {background:url(../images/corner_bl.gif) left bottom no-repeat;}
.wrap3 {
	padding:0 8px 8px 0;
	background:url(../images/corner_tr.gif) right top no-repeat;}
.wrap3 img {
	display:block;
	border:1px solid #ccc;
	border-color:#efefef #ccc #ccc #efefef;}
.wrap1 {background:url(../images/shadow.gif) right bottom no-repeat;}
.wrap2 {background:url(../images/corner_bl.gif) -12px 100% no-repeat;}
.wrap3 {
	padding:0 9px 9px 0;
	background:url(../images/corner_tr.gif) 100% -12px no-repeat;}
	
/* color schemes
-------------------- */	
body, #nav li a, #nav li#current a, dl dt, span.more a, dl.media dt a:hover, #openmedia span {
	color: #242D40; /* NAVY BLUE */
	}
h3, h5, dl.media dt a, dl.media dt a:visited, dl.media dt strong  {
	color: #747263;  /* DARK BEIGE */
	}

/* hyperlinks
-------------------- */	
a:link {
	color: #242D40;
	text-decoration: underline
	font-weight: bold;		
	}
a:visited {
	color: #4D5A75;
	text-decoration: underline
	font-weight: bold;	
	}
a:hover {
	color: #0353FC;
	text-decoration: underline
	font-weight: bold;	
	}
a:active {
	color: #0353FC;
	text-decoration: underline
	font-weight: bold;	
	}

/* layout
-------------------- */	
#container {
	width: 674px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background: url(../images/recording-studio-bkgnd.gif) repeat-y 0% 0%;
	}
#header {	
	background: url(../images/recording-studio-header.gif) no-repeat 0% 0%;
	width: 674px;
	height: 129px;
	position: relative;
	}
#header h1 a, #header h2 a {
	text-indent: -9000px;
	position: absolute;
	margin: 0;
	padding: 0;
	}
#header h1 a {		
	top: 20px;
	left: 42px;
	width: 169px;
	height: 86px;
	background: url(../images/recording-studio-logo.gif) no-repeat 0% 0%;		
	}
#header h1 a:hover {
	background-position: -169px 0%;
	}
#header h2 a {
	top: 20px;
	right: 58px;
	width: 238px;
	height: 23px;
	background: url(../images/recording-studio-motto.gif) no-repeat 0% 0%;
	}
#header h2 a:hover {
	cursor: help;
	}	
#c1 {
	text-align: left;
	padding: 2em 32px;
	}
#footer {
	width: 674px;
	height: 18px;
	background: url(../images/recording-studio-footer.gif) no-repeat 0% 0%;
	clear: both;
	margin-top: 1.5em;
	position: relative;
	}
	
/* navigation
-------------------- */	
#nav {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 32px;
	top: 107px;
	}
#nav li {
	float: left;
	height: 22px;
	margin: 0 5px 0 0;
	padding: 0;
	line-height: 1.5em;
	}
#nav li a { /* a --> LEFT */
	background: #BEBA9E url(../images/recording-studio-tab-lt.gif) no-repeat left;
	float: left;
	height: 22px;
	padding: 0;
	margin: 0;
	font-weight: bold;
	font-size: 78%;
	font-family: Verdana, Arial, sans-serif;
	}
#nav li a span { /* span --> RIGHT */
	float: left;
	height: 22px;
	margin: 0;
	padding: 0 10px;
	background: url(../images/recording-studio-tab-rt.gif) no-repeat right;	
	}	
#nav li a span:first-letter {
	text-decoration: underline;
	}	
#nav li#current a span {
	background-image: url(../images/recording-studio-tabc-rt.gif);
	}
#nav li#current a {
	background-image: url(../images/recording-studio-tabc-lt.gif);		
	background-color: #fff;
	}
#nav li a:hover {
	background-image: url(../images/recording-studio-tabh-lt.gif);
	cursor: hand;		
	background-color: #D2D0BF;
	text-decoration: none;
	}
#nav li a:hover span {
	background-image: url(../images/recording-studio-tabh-rt.gif);
	cursor: hand;
	}

/* definition list (generic)
-------------------- */	
dl {
	margin: 0;
	padding: 0;
	}
dl dt {
	font-size: 160%;
	font-weight: normal;
	background: url(../images/recording-studio-btmbord.gif) repeat-x bottom;
	padding-bottom: 4px;
	margin-bottom: .5em;
	}
dl dd {
	margin: 0;
	padding: 0;
	}
dl dd p {
	text-align: left;
	}

/* definition list (box)
-------------------- */	
dl#box {
	background: url(../images/recording-studio-bxbkg.gif) repeat-y 0% 0%;
	width: 245px;
	margin: 0;
	padding: 0;		
	}	
dl#box dt {		
	width: 245px;
	height: 45px;
	text-indent: -9000px;
	margin: 0;
	padding: 0;
	}
dl#box dd {
	background: url(../images/recording-studio-bxbot.gif) no-repeat bottom;
	margin: 0;
	padding: 0 0 1.5em;
	text-align: right;
	}
dl#box dd p {
	background: url(../images/recording-studio-bxtop.gif) no-repeat top;
	margin: 0;
	padding: 1.5em 31px 0;
	text-align: left;
	line-height: 1.7em;
	}
dl#box dd span.more {
	background-image: url(../images/recording-studio-i-moren.gif);		
	margin-right: 34px;
	margin-bottom: 2em;
	}
/* specific boxes */
dl#box.equip dt { background: url(../images/recording-studio-bx-equip.gif) no-repeat 0% 0%; }
dl#box.equip { 
	float: left; 
	border: 1px solid #fff; 
	border-left-width: 0; 
	border-top-width: 0;
	border-right-width: 30px;
	border-bottom-width: 30px;
	}

/* homepage (and DSD)
-------------------- */	
a#pics, a#dsd {
	float: right;
	text-indent: -9000px;
	border: 20px solid #fff;
	border-top-width: 30px;
	border-left-width: 30px;
	border-bottom-width: 0;	
	}
a#pics:hover { cursor: help; }
a#pics {
	background: url(../images/recording-studio-pics.jpg) no-repeat 0% 0%;
	width: 159px;
	height: 141px;
	}
a#carmen {
	float: right;
	text-indent: -9000px;
	border: 20px solid #fff;
	border-top-width: 30px;
	border-left-width: 30px;
	border-bottom-width: 0;	
	background: url(../images/Carmen-Productions.gif) no-repeat 0% 0%;
	width: 298px;
	height: 133px;
	display: block;
	text-decoration: none;
	}
a#dsd {
	background: url(../images/dsd.gif) no-repeat 0% 0%;
	width: 109px;
	height: 56px;
	border-bottom-width: 20px;
	}
#cleardiv {
	width: 100%;
	height: 20px;
	background: #fff;
	clear: both;
	overflow: hidden;
	}
/* equipment
-------------------- */	
dl.eq-full, dl.eq-td {
	clear: left;
	margin: 0;
	padding: 0;
	}
dl.eq-full {
	padding-top: 0; /* SPACING HERE */	
	}
div.crazybreak	{
	clear: both;
	height: 20px;
	background: #fff;
	}
dl.eq-td {
	padding-bottom: 1.6em; /* SPACING HERE */
	}
dl.eq-full dt {
	background: none;
	margin: 0;
	padding: 0;			
	float: left;
	}
dl.eq-full dd.eq-title, dl.eq-td dt {
	font-weight: bold;
	font-size: 115%;
	background: none;
	margin: 0;
	padding: 0;
	}
dl.eq-full dd.eq-title, dl.eq-full dd {
	margin-left: 130px;	
	}
dl#box.equipment {
	float: right;
	border-top: 20px solid #fff;
	border-left-width: 20px;
	border-right-width: 0;
	}
	
/* projects
-------------------- */	
dl.projects {
	clear: left;	
	}
dl.projects dt {
	float: left;
	}
dl.projects dt a img {
	margin: 0;
	border: none;
	}
dl.projects dd h5 {
	border: none;
	margin: 0;
	padding: 0 0 .5em;		
	}
dl.projects dd { padding-left: 180px; }
dl.projects dt { background: none; margin: 0; padding: 0;}
dl.projects dd p { margin: 0; padding: 0;}
dl.projects dd span.more {
	font-size: 13px;	
	padding: 0;
	}	
br.tiny {line-height: .3em; }
div.prj { height: 30px; }

/* view projects
---------------------------------- */
#viewproject {
	margin: 30px auto 20px;
	padding: 0;	
	text-align: center;
	width: 100%;
	background: #fff;
	}
#viewproject img {
	border:7px solid #f1f1f1;
	text-align: center;
	}	

#viewproject span {
	display: block;	
	margin: 10px 40px;
	color: #333;
	font-weight: bold;
	}

/* media (audio video)
---------------------------------- */
dl.media {
	margin: 0;
	padding: 0;
	}
dl.media dt {
	background: none;
	padding: 0 0 .3em;
	margin: 0;
	}
dl.media dt a {
	text-decoration: underline;
	border-bottom: none;	
	font-size: .8em;	
	margin-bottom: 0;
	}
dl.media dt strong {
	font-size: 50%;
	padding-left: 10px;
	font-family: Verdana;	
	font-weight: normal;
	}
dl.media dd {
	margin: 0 0 1.5em 25px;
	padding: 0;		
	}

/* music+video (open media)
---------------------------------- */
#openmedia {
	margin: 20px auto 10px;
	text-align: center;
	width: 100%;
	background: #fff;	
	}
#openmedia span {
	display: block;	
	margin: 0 auto;
	padding-top: 10px;
	text-align: center;	
	font-weight: bold;
	}


/* links
-------------------- */	
ul.links { 
	list-style: none; 
	margin: 0 0 0 2em;
	padding: 0;
	}
ul.links li {
	margin: 0;
	padding: 0 0 .5em 14px;	
	background: url(../images/icon-arrows.gif) no-repeat 0% 8px;
	}


/* about pics
-------------------- */	
.madison {
	margin-right: 1em;
	margin-bottom: 1em;
	margin-top: 1em;
	}
.operadoglogo {
	margin: 2em 1em 1em 0;
	}
br.clear {
	clear: left;	
	}


/* footer
-------------------- */	
#copyright {
	top: 20px;
	position: absolute;
	left: 180px;	
	font-size: 90%;
	color: #BEBA9E;
	}
#madebywebstruments, #mGINE {	
	border: none;
	display: block;
	background-repeat: no-repeat;
	text-indent: -9000px;
	margin: 0;
	padding: 0;
	overflow: hidden;	
	position: absolute;
	text-decoration: none;
	}
#madebywebstruments {
	background-image: url(../images/madebywebstruments.gif);
	width: 97px;
	height: 17px;		
	background-position: 0% -17px;	
	top: 30px;
	right: 35px;		
	}	
#mGINE {
	background-image: url(../images/mGINE.gif);
	width: 12px;
	height: 47px;		
	background-position: -12px 0%;
	top: -45px;
	right: -25px;
	}	
#mGINE:hover, #madebywebstruments:hover {
	background-position: 0% 0%;
	cursor: help;
	}