style.css

@import url(//fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
/*@import url('//api.mobilis.co.kr/webfonts/v2/css/NanumGothicWeb');*/
@import url(/css/auticons/auticons.css);

/*https://raw.githubusercontent.com/mrmrs/colors/master/css/colors.css*/
.bg-navy{background-color:#001F3F}.bg-blue{background-color:#0074D9}.bg-aqua{background-color:#7FDBFF}.bg-teal{background-color:#39CCCC}.bg-olive{background-color:#3D9970}.bg-green{background-color:#2ECC40}.bg-lime{background-color:#01FF70}.bg-yellow{background-color:#FFDC00}.bg-orange{background-color:#FF851B}.bg-red{background-color:#FF4136}.bg-fuchsia{background-color:#F012BE}.bg-purple{background-color:#B10DC9}.bg-maroon{background-color:#85144B}.bg-white{background-color:#fff}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-black{background-color:#111}.navy{color:#001F3F}.blue{color:#0074D9}.aqua{color:#7FDBFF}.teal{color:#39CCCC}.olive{color:#3D9970}.green{color:#2ECC40}.lime{color:#01FF70}.yellow{color:#FFDC00}.orange{color:#FF851B}.red{color:#FF4136}.fuchsia{color:#F012BE}.purple{color:#B10DC9}.maroon{color:#85144B}.white{color:#fff}.silver{color:#ddd}.gray{color:#aaa}.black{color:#111}.border--navy{border-color:#001F3F}.border--blue{border-color:#0074D9}.border--aqua{border-color:#7FDBFF}.border--teal{border-color:#39CCCC}.border--olive{border-color:#3D9970}.border--green{border-color:#2ECC40}.border--lime{border-color:#01FF70}.border--yellow{border-color:#FFDC00}.border--orange{border-color:#FF851B}.border--red{border-color:#FF4136}.border--fuchsia{border-color:#F012BE}.border--purple{border-color:#B10DC9}.border--maroon{border-color:#85144B}.border--white{border-color:#fff}.border--gray{border-color:#aaa}.border--silver{border-color:#ddd}.border--black{border-color:#111}.fill-navy{fill:#001F3F}.fill-blue{fill:#0074D9}.fill-aqua{fill:#7FDBFF}.fill-teal{fill:#39CCCC}.fill-olive{fill:#3D9970}.fill-green{fill:#2ECC40}.fill-lime{fill:#01FF70}.fill-yellow{fill:#FFDC00}.fill-orange{fill:#FF851B}.fill-red{fill:#FF4136}.fill-fuchsia{fill:#F012BE}.fill-purple{fill:#B10DC9}.fill-maroon{fill:#85144B}.fill-white{fill:#fff}.fill-gray{fill:#aaa}.fill-silver{fill:#ddd}.fill-black{fill:#111}.stroke-navy{stroke:#001F3F}.stroke-blue{stroke:#0074D9}.stroke-aqua{stroke:#7FDBFF}.stroke-teal{stroke:#39CCCC}.stroke-olive{stroke:#3D9970}.stroke-green{stroke:#2ECC40}.stroke-lime{stroke:#01FF70}.stroke-yellow{stroke:#FFDC00}.stroke-orange{stroke:#FF851B}.stroke-red{stroke:#FF4136}.stroke-fuchsia{stroke:#F012BE}.stroke-purple{stroke:#B10DC9}.stroke-maroon{stroke:#85144B}.stroke-white{stroke:#fff}.stroke-gray{stroke:#aaa}.stroke-silver{stroke:#ddd}.stroke-black{stroke:#111}


body {
  padding: 50px;
  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #777;
  font-weight: 300;
}

html {
  overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6 {
  color:#222;
/*  margin:0 0 20px;*/
}

p, ul, ol, table, pre, dl {
/*  margin:0 0 20px;*/
}

h1, h2, h3 {
  line-height:1.1;
}

h1 {
  font-size:28px;
}

h2 {
  color:#393939;
  font-size: 24px;
}

h3, h4, h5, h6 {
  color:#494949;
}

a {
  color: #39c;
  font-weight:400;
  text-decoration:none;
}

a:hover {
  color:#069;
}

a small {
  font-size:11px;
  color:#777;
  margin-top:-0.6em;
  display:block;
}

a:hover small {
  color:#777;
}

.wrapper {
  width:860px;
  margin:0 auto;
}

blockquote {
/*  border-left:1px solid #e5e5e5;
  margin:0;
  padding:0 0 0 20px;*/
    font-size: 1.1em;
  font-style:italic;
}

code, pre {
  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  color:#333;
  font-size:12px;
}

pre {
  padding:8px 15px;
  background: #f8f8f8;  
  border-radius:5px;
  border:1px solid #e5e5e5;
  overflow-x: auto;
}

table {
  width:100%;
  border-collapse:collapse;
}

th, td {
  text-align:left;
  padding:5px 10px;
  border-bottom:1px solid #e5e5e5;
}

dt {
  color:#444;
  font-weight:700;
}

th {
  color:#444;
}

img {
  max-width:100%;
}


header.main {
  width:270px;
  float:left;
  position:fixed;
}

/*
header.main ul.buttons {
  list-style:none;
  height:40px;
  
  padding:0;
  
  background: #eee;
  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  
  border-radius:5px;
  border:1px solid #d2d2d2;
  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
  width:270px;
}

header.main ul.buttons li {
  width:89px;
  float:left;
  border-right:1px solid #d2d2d2;
  height:40px;
}

header.main ul.buttons li:first-child a {
  border-radius:5px 0 0 5px;
}

header.main li:last-child a {
  border-radius:0 5px 5px 0;
}

header.main ul.buttons a {
  line-height:1;
  font-size:11px;
  color:#999;
  display:block;
  text-align:center;
  padding-top:6px;
  height:34px;
}

header.main ul.buttons a:hover {
  color:#999;
  background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd));
  background: -webkit-linear-gradient(top, #fff 0%,#ddd 100%);
  background: -o-linear-gradient(top, #fff 0%,#ddd 100%);
  background: -ms-linear-gradient(top, #fff 0%,#ddd 100%);
  background: linear-gradient(top, #fff 0%,#ddd 100%);
}

header.main ul.buttons a:active {
  -webkit-box-shadow: inset 0px 2px 2px 0px #ddd;
  -moz-box-shadow: inset 0px 2px 2px 0px #ddd;
  box-shadow: inset 0px 2px 2px 0px #ddd;
}
*/

header.main ul.buttons {
  list-style:none;
  height:40px;
  padding:0;
  width:270px;
}

header.main ul.buttons li {
  width:90px;
  float:left;
  height:40px;
}

header.main ul.buttons a {
  line-height:1;
  font-size:11px;
  color:#999;
  display:block;
  text-align:center;
}

header.main ul.buttons li.twitter a {
    background: url(/img/ico_twitter.png) no-repeat left center;
	margin-left: 13px; padding-left: 15px;
	width: 70px;
}
header.main ul.buttons li.facebook a {
    background: url(/img/ico_facebook.png) no-repeat left center;
	padding-left: 18px; width: 82px;
}
header.main ul.buttons li.google a {
    background: url(/img/ico_google.png) no-repeat left center;
    padding-left: 5px;
}


strong {
  color:#222;
  font-weight:700;
}

header.main ul.buttons li + li {
  width:88px;
  border-left:1px solid #fff;
}

header.main ul.buttons li + li + li {
  border-right:none;
  width:89px;
}

header.main ul.buttons a strong {
  font-size:14px;
  display:block;
  color:#222;
}

header.main h1 a {
  color: inherit;
  font-weight: bold;
}

header.main h1 a:link {
  color: inherit;
}

section.main {
  width: 500px;
  float:right;
  padding-bottom:50px;
}

section.main .jumbotron {
    color: #fff;
/*    background-color: #0074D9; */
    background: #2ECC40 url(http://www.wallpaperhi.com/thumbnails/detail/20120402/green%20nature%20plants%20macro%20depth%20of%20field%201920x1200%20wallpaper_www.wallpaperhi.com_42.jpg) no-repeat left -50px;
}
section.main .jumbotron h2 { color: #fff; }
/*section.main .jumbotron p { font-size: 1.1em; }*/

section.main #accordion .panel { 
    border: 0; 
    -webkit-box-shadow: none;
    box-shadow: none;
}
section.main #accordion .panel-heading {
    background-color: #fff;
}
.panel-group .panel-heading+.panel-collapse .panel-body { border-top: none; }
/*section.main #accordion .panel-body { border: none; }*/

/*section.main .page-header { margin-top: 0; }*/
section.main .page-header:first-child { margin-top: -12px; }

section.main .panel-title .glyphicon { color: #699C30; }

section.main .thumbnail {
    border: none;
    border-radius: 0;
    padding: 0;
}

.thumbnail.with-caption {
    display: inline-block;
    position:relative;
    overflow:hidden;
}

/*.thumbnail.with-caption img { padding: 5px; }*/

section.main .thumbnail.with-caption .caption {
    bottom: 0;
    position:absolute;
    background: rgba(0,0,0,0.6);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
    padding-top: 10px;
}

.nav-pills>li>a.active {
    color: #fff;
    background-color: #428bca;   
}

/*.thumbnail.with-caption small:before {
  content: '\2014 \00A0';
}
.thumbnail.with-caption small {
  width: 100%;
  text-align: right;
  display: inline-block;
  color: #999;
}*/


section.main ul.services {
    font-size: 1.1em;
}

section.main .solutions {
  border-top: 1px dashed #ededed;
  margin-top: 2em;
}


small {
  font-size:11px;
}

hr {
  border:0;
  background:#e5e5e5;
  height:1px;
  margin:0 0 20px;
}

footer.main {
  width:270px;
  float:left;
  position:fixed;
  bottom:50px;
  text-align: right;
}


aside {
  width:270px;
  float:left;
  position:fixed;
  bottom:115px;
  text-align: right;
}

aside ul {
  list-style:none;
  padding:0;
  margin-bottom: 12px;
}

aside ul a {
  line-height:1.6em;
  font-size:12px;
  display:block;
}

aside ul a:hover{
  color:#999;
}


header.main h2 {
  color: inherit;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
}


article header h1 {
  margin-bottom: 5px;
}

article header p {
  font-size: 12px;
  font-style: italic;
  text-align: right;
}


article footer {
  font-size: 12px;
  font-style: italic;
  text-align: right;
}

article.post footer h1 {
  font-weight: normal;
  display: inline;
  font-size: inherit;
  padding-right: 5px;
}

article.post footer ul {
  display: inline;
  list-style:none;
  padding:0;
}

article.post footer li {
  display: inline;
  margin-right: 5px;
}

article.post footer li span {
  display: none;
}

article footer p.gotop {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-style: normal;
  text-align: left;
}

@media print, screen and (max-width: 320px)  {
    section.main .nav { display: none; }
    section.main .emblem { display: none; }
    section.main .services small { display: none; }
    section.main .posts .media > a { display: none; }
/*    section.main .posts .media .media-body > p { display: none; }*/
}    


@media print, screen and (max-width: 960px), (max-height: 500px)  {
  
  div.wrapper {
    width:auto;
    margin:0;
  }
  
  header.main, section.main, footer.main, aside {
    float:none;
    position:static;
    width:auto;
  }
  
  header.main {
/*    padding-right:320px;*/
  }
  
  section.main {
    border:1px solid #e5e5e5;
/*    border-width:1px 0;*/
    border-width:0 0 1px;
    padding:20px 0;
    margin:0 0 20px;
  }
  
  header.main a small {
    display:inline;
  }
  
  header.main ul.buttons {
    position:absolute;
    right:50px;
    top:52px;
  }
  aside {
      text-align: left;
  }
}

@media print, screen and (max-width: 720px) {
  body {
    word-wrap:break-word;
  }
  
  header.main {
    padding:0;
  }
  
  header.main ul.buttons {
    position:static;
  }
  
  pre, code {
    word-wrap:normal;
  }
}

@media print, screen and (max-width: 480px) {
  body {
    padding:15px;
  }
  
  header.main ul.buttons {
    display:none;
  }
}

@media print {
  body {
    padding:0.4in;
    font-size:12pt;
    color:#444;
  }
}

/* custom layouts */


.clearfix:after {
	clear:both;
	display:block;
	visibility:hidden;
	overflow:hidden;
	height:0 !important;
	line-height:0;
	font-size:xx-large;
	content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.clearfix { zoom: 1; } /* IE6-7 */

.right { float: right; }
.left { float: left; }
img.right { padding: 0 0 8px 8px; }
.justify { text-align: justify; }
.center { text-align: center; }

/* Layout */

h1, .post h2, /*h3, h4, h5, h6*/ .title, .about { font-family: 'NanumGothicWeb', 'Nanum Gothic', sans-serif; }

pre.prettyprint {
  background-color: #f5f5f5;
  display: block;
  padding: 8.5px;
  margin: 0 0 18px;
  line-height: 18px;
  font-size: 12px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}


/*a, a:visited { color: #679a01; }
a:hover { color: green; }
*/

#header {
	position: relative;
	height: 80px;
	margin-top: 10px;
}
#header em { display: none; }

#logo {
	background: url(/img/logo-medium.png) no-repeat;
	text-indent: -9999px;
	height: 54px;
	padding: 0;
	margin: 0;
}
#logo a {
  display: block;
  height: 100%;
  overflow: hidden;
  width: 271px;
}

#tagline { text-align: left; margin-left: 1.5em; margin-bottom: 2em; }

/*section.main { text-align: justify; }*/

.about {
/*    border-radius: 3px;*/
	padding: 10px;
    /*text-align: justify;*/
	background-color: #ededed;
}

/* Aligning Share buttons */
ul.share_links { margin: 0; padding: 0; overflow: auto; }
ul.share_links li { 
    list-style: none; float: left; margin-right: 5px; 
}

/* Button 
https://github.com/ubuwaits/css3-buttons/blob/gh-pages/stylesheets/buttons.css
*/

.button.minimal {
  background: #e3e3e3;
  border: 1px solid #bbb;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px; }
  button.minimal:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer; }
  button.minimal:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000; }

.button.itunes {
  background-color: #52a8e8;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
  background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
  background-image: linear-gradient(top, #52a8e8, #377ad0);
  border-top: 1px solid #4081af;
  border-right: 1px solid #2e69a3;
  border-bottom: 1px solid #20559a;
  border-left: 1px solid #2e69a3;
  border-radius: 16px;
  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font: normal 11px/1 "lucida grande", sans-serif;
  padding: 3px 5px;
  text-align: center;
  text-shadow: 0 -1px 1px #3275bc;
  width: 112px;
  -webkit-background-clip: padding-box; }

.button.itunes:hover {
background-color: #3e9ee5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
border-top: 1px solid #2a73a6;
border-right: 1px solid #165899;
border-bottom: 1px solid #07428f;
border-left: 1px solid #165899;
-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
box-shadow: inset 0 1px 0 0 #62b1e9;
cursor: pointer;
text-shadow: 0 -1px 1px #1d62ab;
-webkit-background-clip: padding-box; }
.button.itunes:active {
background: #3282d3;
border: 1px solid #154c8c;
border-bottom: 1px solid #0e408e;
-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
text-shadow: 0 -1px 1px #2361a4;
-webkit-background-clip: padding-box; }

.button[disabled].itunes,
.button[disabled].itunes:hover,
.button[disabled].itunes:active {
  background-color: #dadada;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dadada), color-stop(100%, #f3f3f3));
  background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -moz-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -ms-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -o-linear-gradient(top, #dadada, #f3f3f3);
  background-image: linear-gradient(top, #dadada, #f3f3f3);
  border-top: 1px solid #c5c5c5;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #cecece;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #8f8f8f;
  cursor: not-allowed;
  text-shadow: 0 -1px 1px #ebebeb; }

button.itunes::-moz-focus-inner {
  border: 0;
  padding: 0; }


/* iHover Effect 
 http://gudh.github.io/ihover/dist/index.html 
**/

.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ih-item a {
color: #333;
}
.ih-item a:hover {
text-decoration: none;
}
.ih-item img {
width: 100%;
height: 100%;
}


.ih-item.square {
position: relative;
width: 150px; /* 216px */
height: 150px;
/*border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);*/
}
.ih-item.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}


.ih-item.square.effect3 {
overflow: hidden;
}
.ih-item.square.effect3.colored .info {
background: #1a4a72;
}
.ih-item.square.effect3 .img {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect3 .info {
height: 65px;
background: #333333;
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.ih-item.square.effect3 .info h3 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 15px; /* 17px */
padding: 10px 10px 0 4px;
margin: 4px 0 0 0;
}
.ih-item.square.effect3 .info p {
font-style: italic;
font-size: 12px;
position: relative;
color: #bbb;
padding: 5px;
text-align: center;
}
.ih-item.square.effect3 a:hover .info {
visibility: visible;
opacity: 1;
}

.ih-item.square.effect3.bottom_to_top .info {
top: auto;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.ih-item.square.effect3.bottom_to_top a:hover .img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}
.ih-item.square.effect3.bottom_to_top a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}

.ih-item.square.effect3.top_to_bottom .info {
bottom: auto;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.ih-item.square.effect3.top_to_bottom a:hover .img {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}
.ih-item.square.effect3.top_to_bottom a:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}