/*YUI Reset,3.1.1.47*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,b,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

.hide,hr,.bracket{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;border:none;font-size:0}
html{background:#fafafa;color:#333}
body{background:#fff;font-family:'Nobile',Arial,serif;font-size:75%;margin:0 auto;width:720px}

#content a{color:#555;background-color:rgba(255,246,224,0.0);
    -o-transition-property: color;
    -webkit-transition-property: color;
    -moz-transition-property: color;
    transition-property: color;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s}
#content a:hover,#content a:focus{color:#333}
#content a:visited{background:none}

article,section,nav,header,footer{display:block}
#content{padding:40px 0;}
#content article{font-size:1.5em;margin:0 40px;position:relative}
article h1{font-size:2.667em;font-weight:bold;margin-bottom:.25em}
article p{font-size:.75em; margin-bottom:1em; line-height: 200%;}
article strong{font-weight:bold}
article ul{font-size:.75em; margin-bottom:1em; line-height: 200%;}


#gallery{height:700px;text-align:center}
#gallery div{background-color:#fff}
#gallery p{font-size:.75em;margin:0 70px 40px;text-align:left;line-height:200%}
#prev,#next{font-size:.75em;padding:5px;position:relative;top:0;z-index:10}
#prev{left:0}
#next{left:526px}

footer{background:#ffd144;margin-top:50px;padding:20px 40px}
footer p{margin-bottom:1em}
#logo{background:url('i/logo.gif') no-repeat;display:block;height:55px;text-indent:-3000px;width:240px}
#logo a{display:block;height:55px;width:240px}
footer nav{float:right;margin-top:-45px}
#nav_site li{margin-bottom:5px;width:150px}
#nav_site li a{background:#fff;color:#333;display:block;padding:5px;text-decoration:none}
#nav_site li a:hover{background:#333;color:#fff}
.characters #nav_site .n-characters a:hover,
.clients #nav_site .n-clients a:hover,
.work #nav_site .n-work a:hover,
.connect #nav_site .n-connect a:hover{background:#fff;color:#333;cursor:default}
#copyright{margin-top:2em;width:420px}
.adr{display:inline}

form ul{font-size:.75em;margin:0}
form li{clear:left;list-style:none;margin-bottom:10px;overflow:hidden}
legend{display:none}
label,input{display:block}
label em{color:#c00;padding:0 5px;font-weight:bold}
input,textarea{border:1px solid #aaa;padding:5px}
input:focus,textarea:focus{border:1px solid #333}
input#submit{background:#ffd144;border:0;color:#333;text-align:left;cursor:pointer;margin:10px 0;width:120px;}
.error{padding:4px;margin:5px 0 0 5px;border:2px solid #fbc2c4;background:#fbe3e4;color:#8a1f11}
.error a{color:#8a1f11}

/*layouts smaller than 550px, iPhone and mobiles*/
@media screen and (max-device-width: 480px), screen and (max-width: 600px) {
  body{width:100%;margin:0}
  #content{padding:10px 0}
  #content article{margin:0 10px}
  #gallery{min-height:auto}
  #gallery p{margin:0 10px 10px}
  #gallery img{width:100%}
  .prev,.next{top:0;left:0}
  
  footer{padding:10px;width:100%}
  footer nav{float:none;margin-top:0;overflow:hidden}
  footer #nav_site li{display:inline;float:left;margin:0 5px 0 0;width:45%}
  #copyright{margin-top:10px;width:100%}
}