/*
  optimiced.com - CSS for the index page (2006/Oct, 2010/May)
  v.3.0 - minimalistic
  HTML and CSS by Michel Bozgounov, www.optimiced.com
  Design & code powered by Adobe Dreamweaver, Adobe Fireworks, Web Standards, ThinkPad, and Jacobs Monarch coffee ;-)
*/

html {
/* overflow-y: scroll; */
}

body {
margin: 0;
padding: 0;
color: #666;
background: #EAEAEA url(/img/2010/body.png) 0 0 repeat;
font-family: Tahoma, Nina, Verdana, Helvetica, "HelveticaNeueLT Std Lt", sans-serif;
font-size: 62.5%;
line-height: 1.5;
}

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
.clearfix {display: block;}

a {color: #95B2D0; font-weight: bold;}
a:hover, a:focus, a:active {color: #5E8AB8;}

h1 {
font-family: Consolas, "Courier New", Courier, monotype;
margin: 5px 0;
}

h1 em {
font-style: normal;
color: #FF00FF;
}

p {
font-size: 1em;
font-family: Verdana, Tahoma, Nina, Helvetica, "HelveticaNeueLT Std Lt", sans-serif;
}

#container {
background: #FFF;
width: 318px; /* 480, 320 */
min-height: 220px; /* 320, 240 */
position: absolute;
top: 50%;
left: 50%;
margin-top: -110px;
margin-left: -160px;
padding: 10px 11px;
 -webkit-box-shadow: 0 0 10px #AAA;
    -moz-box-shadow: 0 0 10px #AAA;
         box-shadow: 0 0 10px #AAA;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
}

#nav {
list-style: none;
display: block;
margin: 30px auto 0 auto;
padding: 0;
width: 275px;
}
#nav:hover {
width: auto;
}

#nav li {
display: block;
float: left;
margin: 0;
padding: 0;
}

#nav a {
display: block;
float: left;
width: 24px;
height: 24px;
border: 5px solid #FFF;
background: #EEE;
line-height: 24px;
text-align: center;
text-decoration: none;
font-size: 1em;

 -webkit-box-shadow: 0 0 3px rgba(33,33,33,.2);
    -moz-box-shadow: 0 0 3px rgba(33,33,33,.2);
         box-shadow: 0 0 3px rgba(33,33,33,.2);

}



#nav #en a {
/* 	width: 70px;  */
}


#nav a span {
color: #EEE;
display: none;
}

#nav a:hover span, #nav a:focus span {
display: inline;
font-size: 1em;
}





#nav a:hover, #nav a:focus {
 -webkit-box-shadow: 0 0 3px rgba(33,33,33,.8);
    -moz-box-shadow: 0 0 3px rgba(33,33,33,.8);
         box-shadow: 0 0 3px rgba(33,33,33,.8);
/* background: #DDD; */
color: #FFF;
background: #BBB;
-webkit-transition: background 0.3s ease;
   -moz-transition: background 0.3s ease;
     -o-transition: background 0.3s ease;
       -transition: background 0.3s ease;
/*

-webkit-transition: width 0.1s ease;
   -moz-transition: width 0.1s ease;
     -o-transition: width 0.1s ease;
        transition: width 0.1s ease;
*/

width: 68px;
}

#nav #en, #nav #bg, #nav #portfolio, #nav #about, #nav #contact,
#nav #en a, #nav #bg a, #nav #portfolio a, #nav #about a, #nav #contact a
{
/*width: 57px; */
}
#nav #contact, #nav #contact a {
/*margin: 0 0 4px 0;*/
}

#nav #smashingmag {
margin: 0 0 0 0;
}
















nav {
background: #444;
overflow: hidden;
position: relative;
width: 100%;
border-bottom: 8px solid #E6E2DF;
}

nav:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: white;
content: "";
}

nav ul {
list-style: none;
padding: 0 0 0 20px;
width: 810px;
overflow: hidden;
background: -moz-linear-gradient(left, #444 0%, #444 50%, #41d05f 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#444), color-stop(50%,#444), color-stop(50%,#41d05f), color-stop(100%,#41d05f));
}

nav li {
display: inline;
}

nav a {
-webkit-transition: width 0.22s ease;
-moz-transition: width 0.22s ease;
-o-transition: width 0.22s ease;
transition: width 0.22s ease;
width: 19%;
text-align: center;
font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
display: block;
float: left;
padding: 12px 0;
color: white;
font-size: 22px;
}
nav a:hover, nav a:focus {
color: white;
}
nav a:hover span, nav a:focus span {
border-bottom: 2px solid white;
}
nav .a-articles { background: #ff8400; }    
nav .a-forums { background: #e42b2b; }    
nav .a-videos { background: #a800ff; }    
nav .a-downloads { background: #49a7f3; }   
nav .a-snippets { background: #41d05f; }

body .a-articles, .single .a-articles, .home .a-articles, 
.page-template-video-single-php .a-videos, .page-template-video-archive-php .a-videos,
.page-template-page-snippet-php .a-snippets, .page-template-page-snippet-cat-php .a-snippets,
.page-template-page-downloads-php .a-downloads,
.Vanilla .a-forums, .Dashboard .a-forums {
width: 24%;
position: relative;
z-index: 100;
}

.single nav, .home nav, .page-template-sitemap-php nav, .page-id-1843 nav { border-bottom-color: #ff8400; }
.page-template-video-single-php nav, .page-template-video-archive-php nav { border-bottom-color: #a800ff; }
.page-template-page-downloads-php nav { border-bottom-color: #49a7f3; }
.page-template-page-snippet-php nav, .page-template-page-snippet-cat-php nav { border-bottom-color: #41d05f; }
.Vanilla nav, .Dashboard nav { border-bottom-color: #e42b2b; }

nav li:hover a, nav li:focus a { width: 24%; }
nav ul:hover .active, nav ul:focus .active { width: 19%; }
nav ul:hover .active:hover, nav ul:focus .active:focus { width: 24%; }

/* focus does not work? why?... */
/* but they work in the other nav below? investigate!!!! */






#dh {
width: 298px;
height: 13px;
margin: 24px auto 0 auto;
text-align: center;
background: url(/img/2010/dreamhost.png) 50% 0 no-repeat;
}

#performance {
display: none;
}




/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {

/* #nav {
  list-style: disc;
  border: 1px solid red;
}

#nav li, #nav a {
  display: block;
  float: none;
} */



}


/*
optimiced.com redesign (2010/2011):
> http://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries
> http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes
> to read further http://briancray.com/page/9/
> MAKE an EFFECTIVE website: http://briancray.com/2009/03/05/guidelines-for-highly-effective-websites/
> use http://userfly.com/ - free - for better stats and user patterns!
> useful: http://speckyboy.com/2010/08/04/top-10-country-flag-icon-sets/ - FLAGS
> http://wordpress.org/extend/plugins/math-comment-spam-protection/
> http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php
> http://mingle2.com/blog/view/how-i-built-mingle2
> http://365psd.com/day/165/ > plus FW IDEAS! 365 PNGs???
*/