/*
base. = #0075CE = rgb(0,117,206)
1 step down. = #27689B = rgb(39,104,155)
2 steps down = #004C86 = rgb(0,76,134)
1 step up = #3A9BE7 = rgb(58,155,231)
2 steps up = #68AFE7 = rgb(104,175,231)
3 steps up = #8FC7F3
4 steps up = #AAD3F3
*/

/* imports */
@import url('../fonts/iconic/font/iconic.css');

/* typography */
@font-face {
    font-family: "Myriad";
    src: url('../fonts/myriadpro-regular-webfont.eot');
    src: local('☺'), url('../fonts/myriadpro-regular-webfont.woff') format('woff'), url('../fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('../fonts/myriadpro-regular-webfont.svg#webfonteDPQd2RW') format('svg');
}
@font-face {
	font-family: 'Futura';
	src: url('../fonts/futurastd-medium-webfont.eot');
	src: local('☺'), url('../fonts/futurastd-medium-webfont.woff') format('woff'), url('../fonts/futurastd-medium-webfont.ttf') format('truetype'), url('../fonts/futurastd-medium-webfont.svg#webfonteDPQd2RW') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* mini-reset courtesy html5doctor.com v1.6.1 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-family:Myriad, sans-serif;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; } 
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } 
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0;   border-top:1px solid #cccccc; margin:1em 0; padding:0; } 
input, select { vertical-align:middle; }

/* now my personal reset */
body { color:#333333; background:#008a4f url(../img/bg-body.png) center top no-repeat; font-size:16px;}
nav h1 { display:none; }
p { padding-bottom:15px; }
h1, h2, h3, h4 { font-family:Futura, sans-serif; }
h1 { font-size:130%; }
h2 { padding-top:25px;font-size:120%; }
h3 { font-size:110%; }
h4 { font-weight:normal; }
a, a:link, a:visited, a:active { color:#333333;text-decoration: underline;outline:none; }
a:hover { text-decoration: none; }
.ie6-error { position:absolute;top:0;right:25px;width:400px;height:200px;color:red;  }

/* Structure */
#wrap { width:100%; padding:0;margin:0; }
#wrap .footnote{ width:961px;margin: 20px auto; text-align:center; font-size:0.8em; }

.site-header,
#navigation,
#content { width:961px; margin: auto; }/* why 961?  Cause it's NOT 960! :P */

/* header */
.site-header, 
.site-header .logo {
  height:190px;
  width:961px;
  text-indent:-9999px;
}
.site-header .logo, 
.site-header .logo a {
  position:absolute;
}
.site-header .logo a {
  display:block;
  width:351px;
  height:190px;
  background:url(../../assets/img/benkaplanlogo-reversed.png) 0 0 no-repeat;
  outline:none;
  z-index:100;
}
.site-header .logo { }

/* content */
#content { min-width:600px; min-height:400px; }
#content:after { content: "."; display: block; height: 0; font-size:0px; clear: both; visibility:hidden; }

/* general */
.column { float:left; }
.bi-column { width:49%; }
.tri-column { width:32%; }
.quad-column { width:24%; }


/*  
 *  DEFINED CLASSES 
 ****************************/

/* general */
.bold { font-weight : bolder; }
.error { color : #ff0000; font-size : 10px;  }
.small { font-size: 80%; }
.wide-text { font-size:75%; }
.clearfix:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}

/* specific defined classes */
header hgroup h2 {
  padding:0;
  font-size:100%;
  font-weight:normal;
}
.pageNav {
  padding: 10px 0 30px 0; 
  text-align:center;
}
.site-header{
  display:block;
  font-size:24px;
  font-weight:bolder;
  padding-top: 0px;
  margin-top: 0px;
}

/* 
 * rain 
 * Only allowing for Chrome and Safari for now
 * */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .rain {
    position:absolute;
    visibility:hidden;
    width:322px;
    height:5px;
    margin:70px 0 0 10px;
    background-image:url(../../assets/img/rain-row-1.png);
    opacity: 1;
    z-index:50;
  }
  .rain.row-12, 
  .rain.row-8, 
  .rain.row-4, 
  .rain.row-2 {
    background-image:url(../../assets/img/rain-row-2.png);
  }
  .rain.row-11, 
  .rain.row-9, 
  .rain.row-6, 
  .rain.row-3 {
    background-image:url(../../assets/img/rain-row-3.png);
  }
  .happy-sun {
    position:absolute;
    visibility:hidden;
    width:115px;
    height:105px;
    margin:60px 0 0 70px;
    background-image:url(../../assets/img/happy-sun.png);
    z-index:50;
    -webkit-transition: margin 8s linear 3s, visibility 8s linear 5s; 
    /*
    -webkit-transition: margin 10s linear;
    */
  }
  .puddle { 
    position:absolute;
    width:300px;
    height:200px;
    margin:500px 0 0 10px;
    z-index:55;
  }
    .puddle { 
        position:absolute;
        visibility:hidden;
        width:0px;
        height:0px;
        margin:500px auto 0 auto;
        background-color:#0075ce;
        border-top-left-radius: 0 0;
        border-bottom-left-radius:0 0;
        border-top-right-radius: 0 0; 
        border-bottom-right-radius: 0 0;
        -webkit-transform:rotate(5deg);
        -webkit-transition:
            width 15s linear,
            height 15s linear,
            border-top-left-radius 15s linear,
            border-bottom-left-radius 15s linear,
            border-top-right-radius 15s linear,
            border-bottom-right-radius 15s linear,
            visibility 20s linear;
    }
    .puddle .center-puddle { 
    }
    .puddle .right-puddle { 
    }
  #home .site-header:hover > .rain {
    margin:550px 0 0 10px;
    visibility:visible;
    opacity: 0;
    -webkit-transition: margin 5s linear, visibility 2s linear, opacity 5s linear; 
  }
  #home .site-header:hover > .puddle {
    visibility:visible;
    width:350px;
    height:100px;
    border-top-left-radius: 150px 50px;
    border-bottom-left-radius: 210px 50px;
    border-top-right-radius: 210px 50px; 
    border-bottom-right-radius: 150px 50px;
    -webkit-transition: 
        width 5s linear 2s, 
        height 5s linear 2s, 
        visibility 0s linear;
  }
  #home .site-header:hover > .rain.row-2 {
    -webkit-transition: margin 5s linear .25s, visibility 2s linear .25s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-3 {
    -webkit-transition: margin 5s linear .5s, visibility 2s linear .5s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-4 {
    -webkit-transition: margin 5s linear .75s, visibility 2s linear .75s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-5 {
    -webkit-transition: margin 5s linear 1s, visibility 2s linear 1s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-6 {
    -webkit-transition: margin 5s linear 1.25s, visibility 2s linear 1.25s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-7 {
    -webkit-transition: margin 5s linear 1.5s, visibility 2s linear 1.5s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-8 {
    -webkit-transition: margin 5s linear 1.75s, visibility 2s linear 1.75s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-9 {
    -webkit-transition: margin 5s linear 2s, visibility 2s linear 2s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-10 {
    -webkit-transition: margin 5s linear 2.25s, visibility 2s linear 2.25s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-11 {
    -webkit-transition: margin 5s linear 2.5s, visibility 2s linear 2.5s, opacity 5s linear; 
  }
  #home .site-header:hover > .rain.row-12 {
    -webkit-transition: margin 5s linear 2.75s, visibility 2s linear 2.75s, opacity 5s linear; 
  }
  #home .site-header:hover > .happy-sun {
    margin:0 0 0 275px;
    visibility:visible;
    -webkit-transition: margin 5s linear 2s, visibility 2s linear 2s; 
  }
}

/*
 * SECTIONS
 ****************************/

/* content */
#content { 
	padding:15px 15px 15px 15px;
	background-color:#D0E7F9;
    filter:alpha(opacity=85);
    opacity: 0.85;
	border: 2px solid #0075CE;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	-webkit-box-shadow: 1px 1px 5px #0075CE;
	-moz-box-shadow: 1px 1px 5px #0075CE;
	box-shadow: 1px 1px 5px #0075CE;
  z-index:0;
}
#content ul {
  list-style:none;
}
#content ul li { padding:5px 0px; }

#content .u-list { 
  width:100%;
  margin-left:20px;
  list-style: outside disc none; 
}
#content .u-list li { 
  float:none;
  width:100%;
}

/* Navigation */
#navigation { 
  height:38px;
  z-index:99;
}
  #navigation ul { 
    list-style:none;
  }
  #navigation > ul > li { 
    float:right;
    position:relative;
    margin:0 2px 0 0;
    padding:10px;
    background-color:#3A9BE7;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    z-index:101;
  }
  * html #navigation ul li { 
    float:right;
    margin:0 2px 0 0;
    padding:10px;
    background-color:#3A9BE7;
  }
  #navigation li:hover, 
  #navigation ul > li.current { 
    background-color:#68AFE7;
  }
  #navigation ul li a { 
    color:#FFFFFF;
    text-decoration:none;
  }
  #navigation ul ul li { 
    margin-bottom:6px;
  }
  #navigation ul ul li a:hover { 
    text-decoration:underline;
  }
  #navigation ul ul { 
    display:none; 
    list-style:none; 
    background:#3A9BE7;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
  }
  #navigation ul > li:hover ul { 
    display:block; 
    position:absolute; 
    top:38px; 
    left:0px; 
  }
  * html #navigation ul li:hover ul { 
    display:block; 
    position:absolute; 
    top:38px; 
    left:0px; 
  }
  #navigation ul ul li { padding:5px 10px 10px; }

/* home */
#home header h1, 
#home h2 {
  text-align:center;
  margin:5px 0 10px 0;
}

#home .column ul {
  width:80%
  list-style-type:none;  
}
#home .column ul li {
  margin:0  0 10px 30px;
}
#home .column ul li:before {  
  font-family:IconicStroke;
  content:"y";  
  color:#004C86;  
  margin-left:-20px;
  padding-right:10px;  
}  

/* resume */
#resume #content section {
  padding-top:25px;
}
  #resume #content section h1 {
    font-size:120%;
  }
  #resume article header { 
    margin:25px 0 0 0;
    padding:0;
    font-family:Futura;
    font-size:110%;
  }
  #resume article header .company { float:left; }
  #resume article header .position { width:auto;margin-left:400px; }
  #resume article header .period { float:right; }

#resume #work-experience ul {
  margin-left:15px;
}

/* portfolio */
/*#hc1 { height:3200px; }*/
.innerBox1, 
.innerBox2 { 
  border:1px solid #004C86;
  padding:20px;
  margin-top:20px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}
.innerBox1 { 
  background-color:#8FC7F3;
}
.innerBox2 { }
.hpanel header {
  width:95%;
  padding: 0 0 50px 20px;
}

.hpanel .overlay {
  position:relative;
  display:block;
  float:left;
  width:200px;
  height:180px;
  margin:20px 30px;
  padding:0px;
  text-align:center;
}
.hpanel .overlay, 
.hpanel .overlay a {
	border: 1px solid #0075CE;
	-webkit-border-radius:0 15px 0 15px;
	-moz-border-radius:0 15px 0 15px;
	border-radius:0px 15px 0px 15px;
}
.hpanel .overlay header {
  padding:8px 0;
}
.hpanel .overlay a {
  text-decoration:none;
}
.hpanel .overlay a {
  position:absolute;
  left:0px;
  top:0px;
  width:200px;
  height:180px;
  padding:0; 
  background:#000;
  text-indent:-999em;
    filter:alpha(opacity=20);
    opacity: 0.20;
}
.hpanel .overlay:hover {
  background-color:#FFFFFF;
}
.hpanel .overlay a:hover {
    filter:alpha(opacity=0);
    opacity: 0.0;
}

/*
 * Specific styles for dev fun 
 *************************************/

/* For the image based tabs */
.placeTabs {
    position:relative;
	padding:20px;
	height:100%;
}

/* For the Fred Wu's Slideshow Lite */
#slideshow {
    margin:15px 0 0 0;
}
#fadeshow1{
    z-index:0;
}
/* For the DynaCloud widget */
#dynacloud {
    width:350px;
    padding:20px;
    margin-top:20px;
    border:1px solid #004C86; 
}
.highlight { background-color: #eedfde; }

/* Fun with Fonts */
.fontFun {
    font-family: "Medio";
    font-size: 1.4em;
}
.fontFun .codeWrap { 
    font-size:.7em;
    background-color:#FEF6E4;
    border-left:3px double #ccc;
}
.fontFun h2 {font-size:1.8em;}
.fontFun h3 {font-size:1.6em;}
/* slide out tab */
.slide-out-div {
  padding: 20px;
  width: 150px;
  background:#fff;
  border: 1px solid #0075CE ;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
  display:none;
  width:160px;
  padding:25px;
  font-size:14px;
  line-height:20px;
  color:#fff; 
  border:3px solid #999;
  background:#000;
}