/*
Theme Name: 50Weeks
Theme URI: http://marcinretecki.com/50weeks/
Description: Portfolio
Author: Marcin Retecki
*/

/* GLOBAL */
* {margin:0;padding:0}
body,html{-moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding}
html,body,#vis{height:100%;width:100%;overflow:hidden}
body{font:16px Helvetica,Arial,sans-serif;color:#ccc;background:#000 url('/loading.gif') no-repeat scroll 50% 25%}

.scaler{position:absolute;width:200%;height:200%;top:-50%;left:-50%;display:table}
.scaler div{position:absolute;left:0;top:50%;width:100%;zoom:1}
.scaler > div{display:table-cell;vertical-align:middle;height:100%;position:static;top:0}
.scaler img{margin:0 auto;display:block;min-height:50%;min-width:50%;-ms-interpolation-mode:bicubic}
.scaler img.tall{height:50%;min-height:inherit;min-width:inherit;width:auto}
*:first-child+html .scaler img{position:relative;top:-50%} /*Fix IE7*/
*:first-child+html .scaler div{position:absolute;top:50%;height:auto} /*Fix IE7*/
* html .scaler img{height:50%;position:relative;top:-50%} /*Fix IE6*/

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

p{margin:0 0 16px;line-height:22px}
h1 a,h2 a{margin:0;font-size:24px;font-weight:bold;color:#fff;text-decoration:none}
h1 a:visited,h2 a:visited{text-decoration:none}
h1,h2,h3{font-size:24px;margin:0 0 12px}
#tagline h1,#tagline h2{margin:0}
a{color:#ccc}
a:link{}
a:visited{}
a:hover{color:#fff}
a:active{outline:none}
a:focus{}
img{border:0}
img.alignright{padding:4px;margin:0 0 2px 7px;display:inline}
img.alignleft{padding:4px;margin:0 7px 2px 0;display:inline}
img.centered {display:block;margin-left:auto;margin-right:auto}

/* HOME MENU & Taglines*/
#logo,#menu,#tagline,#comm,#home,#menuabout,#submenu{position:absolute;z-index:71}

#logo{left:20px;top:20px;background:transparent url('images/back.png') repeat;height:60px;width:320px}
#logo h3{background:transparent url('images/logo2.png') no-repeat;text-indent:-9999px;margin:1px 0 0}
#logo a{font-style:normal;text-decoration:none;color:#ddd;display:block}
#logo h3 a{font-size:16px;font-weight:bold;margin:auto;color:#ddd;height:57px;width:320px}
#logo:hover{background:#000}
#tagline{right:20px;top:20px;background:transparent url('images/back.png') repeat;padding:10px 20px}
#tagline:hover{background:#000}

#menu{right:20px;top:120px}
#menu a,#nav a,a#comm,a#home,#weeks li a,#menuabout a,#submenu a{background:transparent url('images/back.png') repeat;padding:10px 12px;font-weight:bold;line-height:16px;font-style:normal;text-decoration:none;display:block}
#menu a{font-size:20px;color:#fff}
#menu a:hover,#menu a:active,#menu a:focus,#nav a:hover,#nav a:active,#nav a:focus,#weeks li a:hover{color:#000;background:#fff;outline:none}
#infoclick{margin-bottom:20px}
#comm{right:20px;bottom:15%}
#home{left:20px;bottom:13%}
a#comm:hover,a#comm:active,a#comm:focus,a#home:hover,a#home:active,a#home:focus{color:#000;background:#fff;outline:none}

#nav{position:fixed;z-index:71;bottom:20px;left:20px;right:20px}
.afix{width:100px}
#nav a,a#comm{color:#ddd}
#prev{float:left}
#next{float:right}

#menuabout{left:20px;bottom:20px;clear:both}
#menuabout a,#submenu a{background:transparent url('images/back.png') repeat;float:left;margin-right:5px;padding:10px 12px;font-weight:normal}
#menuabout a:hover,#menuabout a:active,#menuabout a:focus,#submenu a:hover,#submenu a:active,#submenu a:focus{color:#fff;background:#000;outline:none}
#slide{float:left}
#submenu{clear:both;left:20px;bottom:59px}
#submenu a{display:block;clear:both;margin:0 0 6px}
a#currentmenu{color:#000;background:url('images/whiteback2.png')}


/* CONTENT */
#vis{position:absolute;top:0;left:0;z-index:70;overflow:auto;color:#eee}
#canvas{max-width:1280px;margin:0 auto;width:expression(document.body.clientWidth > 1280? "1280px": "auto" );}
#content{width:70%;margin:120px auto 40px}

#info,#tech,#info2,#tech2{background:transparent url('images/back2.png') repeat;padding:2% 4%;width:40%}
#info,#tech{opacity:0.0;filter:alpha(opacity=0)}
#info,#info2{float:right}
#tech,#tech2{float:left}
.hide{opacity:0.0;filter:alpha(opacity=0)}
.reveal{opacity:1.0;filter:alpha(opacity=100)}

p.cross{padding:0;margin:0;margin-top:2px;float:right}
#info h1,#tech h3 {float:left}
a#crossinfo,a#crosstech{width:16px;height:16px;background:transparent url('images/cross.png') no-repeat top left;text-indent:-9999px;float:right}
a#crossinfo:hover,a#crossinfo:active,a#crossinfo:focus,a#crosstech:hover,a#crosstech:active,a#crosstech:focus{background-position:bottom left;outline:none}

.share{margin:0 auto;position:absolute;z-index:71;bottom:10px;width:100%;text-align:center}
.share,.share a{font-size:10px;font-weight:bold;color:#777;text-decoration:none;}
.share span{padding:2px 5px;background:transparent url('images/back2.png') repeat}
.share a:hover{color:#fff;text-decoration:underline}

.like50{height:24px;margin-left:4px}

#weeks{margin:0 auto;padding:0 3%;width:55%}
#weeks li{display:block;float:left;margin:0 5px 5px 0}
#weeks li a,#iphonemsg{background:transparent url('images/back2.png') repeat}

@media handheld, only screen and (max-device-width: 480px) {
body{font:16px Helvetica,Arial,sans-serif;color:#eee;line-height:auto;background:transparent url('images/back.png') repeat}
html,body,#vis,#canvas,#logo,#tagline,#content,#info,#tech,#info2,#tech2,#weeks,#menu,#nav,#comm,#home,.share,#iphonemsg{width:auto;height:auto;overflow:visible;display:block;float:none;margin:0;padding:0;clear:both;position:static}
img{max-width:100%;height:auto}
p{margin:0}
#canvas p{margin:0 0 16px}
#vis,#weeks{width:100%}

.scaler,.scaler div,.scaler img,.scaler img.tall,.scaler > div{width:auto;max-width:100%;height:auto;position:static}

#info,#tech,#info2,#tech2,#iphonemsg{padding:10px;margin:0 0 1px}
#info,#tech{opacity:1.0;filter:alpha(opacity=1)}
#logo,#tagline,#comm,#prev,#next{text-align:center;padding:10px 0;margin:0 0 1px}
#comm,#home,#prev,#next{font-size:20px}
#prev,#next{width:auto}
#logo h3,#logo h3 a{background:none;text-indent:0;text-align:center;width:auto;height:auto;font-size:20px;font-weight:bold;color:#fff}
h1 a,h2 a{font-size:16px}
#logo:hover,#tagline:hover,a#acti{background:#000;color:#fff}
#nav,#menu,#menu2{clear:both}
#menu a,#nav a{padding:10px 8px;margin:0 1px 1px 0;color:#fff;font-style:normal;text-decoration:none;display:block;float:left;font-weight:normal;font-size:16px}
#nav a{font-weight:bold;}
#menu a:hover,#menu a:active,#menu a:focus,#menu2 a:hover,#menu2 a:active,#menu2 a:focus,#nav a:hover,#nav a:active,#nav a:focus{color:#000;background:#fff}

#weeks li{margin:0 1px 1px 0}
#weeks li a{padding:10px 8px}

.share{background:transparent url('images/back2.png') repeat;padding:8px 3px;margin:0 0 1px}
.share span{background:none}
#marginfix{display:none}

}