/* 
    Document   : main
    Created on : 12/09/2012, 8:21:34 PM
    Author     : berger
*/


@font-face {
  font-family: CourierPrime;
  src: url('fonts/CourierPrime.ttf') format('truetype');
}

@font-face {
  font-family: CourierPrime;
  font-weight: bold;
  src: url('fonts/CourierPrimeBold.ttf') format('truetype');
}

a{transition: color 0.3s;}
a:href{transition: color 0.5s;}

body{}

.main-content{ max-width: 790px; padding: 10px; margin-left: auto ; margin-right: auto ; position: relative;
               padding-right: 10px; }/**for ad-column,it used to be 160px;**/

::-moz-selection { background: #335; color: #CCF; }
::selection { background: #335; color: #CCF; }

/*\
-/- header
-\-
-/-
-\-
\*/
/*new header*/
.main-nav{position:fixed;background-color: white ;width: 100%;left:0;top:0;
          z-index: 1000;
          border-bottom: 3px solid #4588FF;
          font-size: 107%;}
.main-nav .main-content{padding: 0;}
.main-nav li a{             line-height:3.2rem;display: block;}
.main-nav li{list-style: none;padding-left:0.4rem; padding-right:0.4rem;
             border-right:solid 1px white;
             border-left:solid 1px white;
             display:block;  float: left;
}
.main-nav li.text-only{border-bottom: 3px solid white;}
.main-nav li a:hover{ text-decoration: none;}
.main-nav li.text-only:hover{border-color:#4588FF;background-color:#EEF;
                             transition-property: background-color, border-color;
                             transition-duration: 1.2s, 1s;
                             transition-delay: 0.1s, 0s;
                             border-bottom: 3px solid #4588FF;
}

#main-header,.main-footer{padding-top:2rem;font-size: 120%; width: 100%; }
#main-header,.main-footer{ background-color:#113/*#334*/; color : #AAC;}
#main-header a:hover, .main-footer a:hover{color: #EEF;}

/*header a{color : #AAC; }*/
/*header a:hover{color: #EEF;}*/

nav .logo{ height : 40px; width:22px; display: inline-block;
           background:url('/img/pinguin_super_small.png') no-repeat top left #AAAACC;
           background-size: auto 100% ;
           vertical-align:middle;
}
nav a:hover .logo{ background-color: #111133;
                   transition-property: background-color;
                   transition-duration: 1.5s;
                   transition-delay: 0;
}

#main-header .logo{
  display: none;
  /*TO KEEP : display:inline-block;*/
  width: 48px;height: 80px;
  position: absolute; right: 50px; top: 40px;
  background:url('/img/pinguin_small.png') no-repeat top right;}
#main-header .logo, header .search{background-color: #889;}
#main-header .logo:hover,header .search:hover{background-color: #AAB;transition: background-color 0.8s;}

/* @todo put the search input on the right, increase size when clicked in
position: absolute;
    right: 50px;
    top: 40px;
    width: 48px;
.nav-search-wrapper{}*/
/*END new header*/

/*header { background-color:#113#334; padding: 60px 0 5px 0;
         font-size: 120%; position: fixed; width: 100%; z-index: 100; height: 80px;
         z-index: 500;}*/
header #site-name { font-size: 1.6rem;line-height: 28px;margin-right:60px; color: #AAC; }
header #site-name {  padding-top: 3rem;padding-bottom: 1rem; }
/*header .logo { position: absolute;right:30px;top:-10px;background:url('/img/pinguin_small.png') no-repeat top right;width: 48px;height: 80px;}*/
/*header #contact { position: absolute;right:-12px;bottom:5px;}*/
/*header .contact:hover {background-color: #CCD;}*/

nav .search{width:10rem;color: #111133;font-weight: bold; height: 1.5rem;
            height:17px;}
.search-button{cursor:pointer;}
.nav-search-wrapper .input-append{ margin-bottom: 0; }
.nav-search-wrapper input,.nav-search-wrapper span{ margin-top: 10px; }
/*.nav-search-wrapper button{}*/
header .search:focus{background-color: #CCD;color: black;}

.nav-search-wrapper p{ max-width: 40rem; font-size: 0.8rem; color:lightgray;text-align: right;
                       transition: color 0.3s;}
.nav-search-wrapper:hover p{
  transition: color 0.3s;
  color:gray;}

/*header .logo:hover {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;}*/


/*@media (min-width: 800px) {
  .small-header .logo{ height : 40px; width:24px;
                       background-size: auto 100% ; }

  .small-header#main-header{padding-top:30px;height: 50px;}
  .small-header #see-list-of-commands{display: none;}

  header.small-header #share{top: -16px;}

  header .logo { top:0px; }
}*/

/*.search-button{background:url('/img/lens-search.png') center center no-repeat;*/
/*background-color: rgba(250,250,250,0.3);*/
/*border-radius:6px;height: 1.5rem;width: 1.5rem;*/
/*margin-left: -2.1rem; margin-bottom: 9px; background-size: 80% auto; border: solid 1px #DADAEF; }*/
/*.main-nav .search-button{height: 1.3rem;width: 1.3rem;margin-bottom: 10px;margin-left: -1.8rem; }*/
/*.search-button:hover{background-color: rgba(250,250,250,0.8);}*/

/*.index-page .search-button{background-color: rgba(150,150,200,0.4);}*/
/*.index-page .search-button:hover{background-color: rgba(150,150,200,0.8);}*/

/*@todo ? is this line just for the header or what ??*/
.list a{display: block;}


/*header #see-list-of-commands{ margin-top:5px; }*/
/*header #see-list-of-commands a{color: #FADDFF;}*/

#catchphrase{font-style:italic;color: #AAC;}
#catchphrase em{font-style: normal;}

/*#contactme-fixed{position: fixed;top:0px;right:0px;background-color: #CCD;display: none;}*/

/** index page**/
.main-content .search{border-color: #448;}
content .search{width: 80%; max-width: 40rem;}
.index-page .search-part{min-height: 10rem; padding-top:4rem;}
.search-page .search-part{min-height: 2rem; padding-top:3rem;}

.wildcards{display: none;}
.index-page .wildcards{float: right; text-align:right ;font-size: 0.8rem; display:block; color: #BBE;}
.index-page .wildcards:hover{ color: #446;}
.index-page .wildcards:first-line{font-size: 1rem;}
/** share **/
/*.fb-root, #fb-root, .twitter-share-button{display: inline;}*/
/*header #share { position: absolute;right:-10px;top:-46px; color: white; font-family: CourierPrime;}

header #share > a ,
header #share > span{    display: inline-block;
                         line-height: 1;
                         text-align: center;
                         vertical-align: top;
}
header #share .reddit{
  background-color: white;
  vertical-align: bottom;
  padding: 1px;
  border-radius: 4px;
}*/
/*\
-/-
-\- poll
-/-
\*/

.poll {background-color: #4588FF;}
.poll h3{ font-size: 20px; color: white; font-weight: normal;}
.poll h3 strong{font-size: 22px; font-weight: bold; text-decoration: underline;}
.poll textarea{width: 80%; min-width: 206px;}
.poll button { margin-bottom: 9px;}

/*\
-/- content
-\-
-/-
-\-
\*/


//let this line, and use a more specific 
/*content p span{font-size: 80%;font-style:italic;display: block;}*/

.pagination-links{font-size: 1.2rem;}
.pagination-links strong{font-size: 1.05rem;}

content h2{font-size: 25px;}

content h2:first-letter,content h3:first-letter,
content h4:first-letter {text-transform: uppercase;}

.short-description-content { margin-top:20px; margin-left  : 11%; font-size: 1.8em; line-height: 1.3em;}

content .github pre, content .user-examples pre{   margin-right: none; line-height: 13px;}
content .github , content .user-examples {  margin-bottom: 15px;  margin-right: 10%;}
content .github a {text-align: right;}
content .github em , content .user-examples em {font-weight: bold; font-style: normal;}

content .stackoverflow { /*box-shadow: 1px 1px 4px #F90;*/position: relative;}
content .github  , content .user-examples { /*box-shadow: 1px 1px 4px #678;*/position: relative;}


.example-wrapper{box-shadow: 1px 1px 4px #678; margin-top: 10px; padding:2px;
                 max-height: 28rem;
                 overflow: auto;
}
.example-rate{ float: left; width: 30px;}
.example { overflow: hidden; }

/*button to expand examples hidden by max-height*/
.expand-example{margin-left:3rem;margin-bottom:0;}
.expand-button-wrapper{ box-shadow: 1px 3px 3px #ABC; padding-bottom: 0; margin-top: 0;}

.up, .down{ background-repeat : no-repeat;
            height: 14px;width: 28px; cursor: pointer;}
.up{ height: 25px; background-position: bottom;
     background-image: url("/img/ArrowUp.png");}
.down{ background-image: url("/img/ArrowDown.png");}

.up:hover,.up-clicked{ background-image: url("/img/ArrowUp_Clicked.png");}
.down:hover,.down-clicked{ background-image: url("/img/ArrowDown_Clicked.png");}

.arrow-text{width: 28px; background-color: #9BF; text-align: center; font-weight: bold; color:white;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            /*#183c7d*/}

h4 {margin-bottom: 0;}

#see-also-top{ font-size: 120%;}

.no-example {font-size: 120%; margin-bottom: 2rem; margin-top: 0.2rem;}
.no-example p{margin-bottom: 2rem}
/*\
 \ 
 /  add example
 \ 
\*/

content #add-example #add-example-input{display:none;}

content #add-example button.close-button, content #add-example button.close span{ background-color: white; position: absolute;right:15px;}
content #add-example li{ list-style-type: decimal;}
content #add-example textarea {display:block;width : 90%;height:60px;
                               border-color: #DDD;
                               transition: height 0.8s;}
#add-example textarea:hover,
#add-example textarea:focus,textarea#add-example-text{background-color: white; border-color: #CCCCCC;}

#add-example textarea:focus,textarea#add-example-text{height: 180px;}

#add-example-second-step-wrapper{display:none;}

/*does not work atm  :(  */
#add-example textarea::-webkit-input-placeholder,
#add-example textarea::-moz-placeholder,
#add-example textarea:-moz-placeholder,
#add-example textarea:-ms-input-placeholder,
#add-example textarea::input-placeholder {font-size: 2rem;}

content #add-example  { padding: 12px 10px; margin-top: 10px; margin-bottom: 20px;
                        border: 1px #EEE solid; box-shadow: 1px 1px 4px #678;
                        /*background-color: #FFD595;#FAFAFA; */
                        background-color: #FFC975;/*#FAFAFA; */
                        font-family: tahoma; font-size: 13px;
                        position:relative; 
}

content #add-example-thanks-message span{display: none; }
content #add-example-thanks-message{ margin-top: 1rem; font-size: 105%; }

.add-user-example #add-example button[title="close"]{display:none;}

/*\
 /  END add example
\*/



.cmd-suggestion{ font-weight:bold; display:inline-block;padding:0.3rem;margin-right:0.1rem; margin-left:0.1rem; border-radius: 3px; border: 1px #CCE solid;}

.cmd-suggestion .yes, .cmd-suggestion .no{padding : 0.2rem;font-weight:normal;margin-left:0.5rem;border-radius: 3px; border: 1px #BBE solid;cursor: pointer; }
.cmd-suggestion .yes:hover, .cmd-suggestion .no:hover{background-color: white;transition: background-color 0.3s;}
.cmd-suggestion .yes{background-color: #2E2;}
.cmd-suggestion .no{background-color: red;}
.cmd-suggestion{transition: background-color 1s;}

.cmd-suggestion-yes span{display:none;}
.cmd-suggestion-yes{background-color: #2E2;}
.cmd-suggestion-no{display:none;}

.cmd-suggestion-list-wrapper input[type="text"]{margin:0; min-width: 20rem;}
.cmd-suggestion-list-wrapper {margin-top:0.2rem;margin-bottom:0.2rem;}
/**
 index page
**/
.list p,.nolist p, p.nolist{ font-size: 1.1rem; line-height: 1.5rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem;  border-bottom: 1px solid #DADAEF;}
.list p{column-width: 190px; -moz-column-width:190px; -webkit-column-width:190px; }

.command-list{ display: block; }

/*\
 \ 
 /  image hover
 \ 
\*/

.example-wrapper{position:relative; min-height: 3.5rem;}

.example-wrapper a.icon,.example-wrapper a.icon{
  width: 50px;height: 50px;
  position: absolute;
  right:1px;top:0;
  border: none;
  background-position: top right;
  background-image:none;
  color: #BBC;
  font-size: 0.85rem;
}

/*.icon-github.icon{background:url('/img/github_logo.png') no-repeat;  background-size: 100% auto; }
.icon-github:hover{background-image: url('/img/github_logo_hover.png') ;}

.icon-stackoverflow{background:url('/img/stack_logo.png') no-repeat;   background-size: auto 100% ; }
.icon-stackoverflow:hover{background-image: url('/img/stack_logo_hover.png') }

.icon-userexample{background:url('/img/lce_logo.png') no-repeat;   background-size: auto 100% ; }
.icon-userexample:hover{background-image: url('/img/lce_logo_hover.png') }*/

/**
 * landing page
 ****/
#intro{margin:30px 0px; font-size: 20px;}

/*\
-/- footer
-\-
-/-
-\-
\*/

footer #other-sites{ line-height: 30px; margin: 10px 0; padding: 10px 0; border-bottom: solid 1px darkblue; border-top: solid 1px darkblue;}

footer .footer-category-list{column-width: 100px; -moz-column-width:100px; -webkit-column-width:100px; }

footer.main-footer .lh1,footer.main-footer .lh1-1{font-size: 1rem;} 
footer.main-footer .lh1-1{text-decoration: underline;}
/*footer nav {font-size: 110%; padding-bottom: 1rem; }*/
/*footer nav a{padding:3px; border: solid 1px #DDF;}*/
/*footer nav a:hover{border-color: #338;}*/
/*\
-/- ad column
-\-
-/-
-\-
\*/

.hire-me {margin-top: 40px; margin-bottom: 50px;}
.hire-me .btn{  cursor: pointer; }
.hire-me p:nth-child(1){font-size: 1.5rem;}
.hire-me p:nth-child(2){font-size: 1.2rem;}


/** when you modify the width here,don't forget to modify .main-content's right padding !**/
#ad-column{position:absolute; right:5px; top:160px; width: 160px;z-index: 200;}
#ad-column > div {margin-bottom: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; }
#ad-column > div:nth-child(n+3) {margin-bottom: 350px;}
#ad-column > div:last-child {margin-bottom: 40px;}
#ad-column img {margin-top: 10px; }

#ad-banner{ z-index:1000; font-size: 120%; font-family: CourierPrime; display: none; background-color: white; /*#EACFCF  #FFA640*/; border: 1px dashed #FF8740;border-radius: 5px; width: 680px; padding: 2px;}
#ad-banner .rootprompt {color: red;}
#ad-banner #cursor { background-color: #CCD; }
/*#ad-banner a {font-weight: bold;}*/
.order, .order-1, .order-2, .order-3{display: none;}
.order strong{font-size:110%;font-weight: normal;}


/*\
-|- mini side bar
-|-
-|-
-|-
\*/

#mini-side-bar{
  /*styling and color*/
  background-color: #ECECEC; box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
  padding: 5px 5px 5px 5px ;
  border-radius: 0 10px 10px 0; border: solid 1px #AAA; border-left: none;
  /*font styling*/
  color: #333;
  font-size:1.1rem;
  /*position*/
  z-index: 400; position: fixed; left:0px; bottom: 8%; margin:0; width:23px;
}

#mini-side-bar a{padding-bottom: 5px;}

#mini-side-bar:hover{
  color:#223; border-color: #333; background-color: white;
}

#opinion{cursor: pointer; padding-top:7rem; border-top:  solid 1px #AAA; }
#opinion div{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
#opinion div:hover{text-decoration: underline; }


#submit-opinion{font-weight: bold; }

@media (max-width: 959px) {
  #mini-side-bar{
    /*styling and color*/
    border-radius: 10px 0 0 0 ;border: solid 1px #AAA; border-right: none; border-bottom: none;
    /*font styling*/
    font-size: 1rem;
    /*positionning*/
    left:auto; right:0px; bottom: 0;
  }

  #opinion{padding-top: 0.5rem;padding-bottom: 6rem;}
  #opinion div{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }

  #mini-side-bar a.mini-hide{display: none;}
}
.modal textarea{width:90%; height: 170px;}
.modal input[type=text]{width:44%;}

/*\
-|- 
-|-
-|- search/result
-|-
\*/
.keywords{color: #BBE;}
.search-page{min-height: 20rem;}
.search-result {line-height: 1.9rem;}

/*\
-|- 
-|-
-|- smaller screen adaptor
-|-
\*/

@media (min-width: 768px) and (max-width: 900px) {
  .main-content {
    margin-right: 37px;
  }
} 

@media (max-width: 767px) {
  .main-nav li a{ line-height:2rem;}
  .hide-when-small{display:none;}
  #main-header .logo{display:none;}
  /*.main-nav{height: 5rem;}*/
  #main-header{padding-top:1rem;}
  /*header{position:absolute;}*/
  header .logo{display: none;}
  /*body{background-image:  url('/img/pinguin_background_small.png');}*/
  /*header #see-list-of-commands{ display:none; }*/
  .main-content { margin-right: 37px; }
  /*#ad-column { width:80px; }*/
  /*#share-the-love{display:none !important; }*/
  /*header #share {z-index: 500;}*/

  #opinion-modal{width: 80%;left: auto;margin: -0;overflow: none;top: 40px; }
  .modal-body { max-height: 300px;}
  #opinion-text{height: 100px;}
  /*header{height: 100px;}*/

  nav.main-nav li.nav-search-wrapper{display:none;}

  .main-nav li{padding-left: 0;padding-right: 0.3rem}

  .index-page .search-part{
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  header #site-name {
    padding-bottom: 0;
    padding-top: 2rem;
  }
  
}

/*\
-|- 
-|-
-|- category
-|-
\*/


.help-us{background-color: #F2F2F2;padding:5px; margin-bottom: 1rem;}
.help-us p{font-size: 1.1rem;}

#tpl {margin-top:1rem;margin-bottom: 1rem;}
#tpl span{display: inline; font-size: 1rem; font-style: normal;}

.help-categorise .selected{background-color: #BBE;}

.help-categorise .list p {font-size: 1rem;line-height: 1.2rem;
                          column-width: 130px; -moz-column-width:130px; -webkit-column-width:130px  ; 
                          border-bottom: 0px;}


.categories-clickable a{color:#4588FF;}
a.tpl-selected{color:#AAA;}

#categories-checkbox{
  max-height:40vh;
  overflow: auto;
}

#category-results{opacity: 0; margin-top: 5px;}
#category-skipped{display: none;}
#category-count{display:none;}

.about-page #photo-me{
  background:url('/img/photo-me-7Feb2014.jpg') no-repeat;
  background-size: auto 100% ;
  /*width:100px;*/
  height:90px;
  width:80px;
  border-radius: 80px;
  border-bottom-left-radius: 0;
  float: right ;
  /*position:*/
  /*right:0;*/
}
.about-page #working-together{
  max-width: 31rem;
}

.about-page h1{margin-top: 3rem;}
/*\
/*\
/*\ main footer
\*/

.main-footer{font-size: 95%; margin-top: 0.5rem;padding-top: 2.2rem;}