/* style sheet for studio page */

div.content { background: #f96; padding: 5px 10px }

h2, h3 { margin: 0; padding: 0;}

/* relocatable panel */
div.panel
{
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  padding: 5px;
  border-radius: 7px;
  background: #fec;
}

div.panel h2
{
  margin: 0 0 10px;
}

div.subnavmenu
{
  margin: 5px;
  width: 290px;
  background: white;
  border-radius: 5px;
}

a.subnav
{
  display: inline-block;
  border-radius: 5px;
  background: #fec;
  color: black;
  text-decoration: none;
  padding: 2px 10px;
  margin: 2px 5px;
}

a.subnav.self, a.subnav.self:hover
{
  color: #fec;
  background: black;
}

a.subnav:hover
{
  background: #f96;
}

img.bofpic { width: 100%}
div.bofpic 
{ 
  display: inline-block; 
  width: 300px; 
  text-align: center; 
  background: white;
}

@media screen and (max-width: 400px)
{
  img.bofpic { display: block; width: 100% }
  div.bofpic { width: 100% }
}

img.panelimg
{
  display: block;
  width: 100%;
}

@media screen and ( max-width: 400px )
{
  div.content { padding: 2px }
}

h2, h3 { margin: 0; padding: 0}

div.about_studio { display: inline-block; max-width: 400px }
ul.equipment { max-width: 290px }
div.comments 
{
  display: inline-block; 
  width: 90%; 
  max-width: 330px; 
  margin: auto; 
  padding-top: 10px;
  text-align: left; 
  border-radius: 10px
}
div.clearfloats { clear: both; height: 0 }
div.captioned_image
{
  display: inline-block; text-align: center;
  margin: auto;
  background: white;
}

/* Mustafa page */
div.text
{
  display: inline-block;
  max-width: 400px;
}

@media screen and ( max-width: 970px )
{
  div.text { max-width: 100%; }
}

video { width: 100%; max-width: 480px }

/* projects */
div.projlist_item
{
  background: #fed;
  color: black;
  margin: 5px 0;
  padding: 5px;
}

div.projlist
{
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 0;
  padding: 1px;
}
div.projdesc
{
  border-top: 1px solid #c96;
  margin-top: 5px;
  padding-top: 5px;
}
@media screen and (max-width: 800px)
{
  div.projlist.projdesc { width: 100%; }
}

div.projlist.cat { width: 30%; min-width: 120px }
div.projlist.name { width: 60%; min-width: 200px }

@media screen and (max-width: 400px)
{
  div.projlist.cat, div.projlist.name { width: 100%; }
}