@import "seoul-map.css";
@import "blogcard.css";

/*
 * Globals
 */
 
/* Links */
a, a:focus, a:hover {
	color: #fff;
}

 
#ci {
     max-width: 67%;
	max-height: 67%;
}

/* Custom default button */
.btn-default, .btn-default:hover, .btn-default:focus {
	color: #333;
	text-shadow: none; /* Prevent inheritence from `body` */
	background-color: #fff;
	border: 1px solid #fff;
}

/* Base structure */
html, body {
	height: 100%;
	background-color: 
	/*
	#333;
    */
    #292c31;
    
    /* Grid
    background: url(/static/img/grid_guide-1400-12-91-28.png) center;
    background: url(/static/img/grid_guide-1280-12-81-28.png) center;
    background-repeat: no-repeat repeat;
    */
}

body {
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
	display: table;
	width: 100%;
	height: 100%; /* For at least Firefox */
	min-height: 100%;
	-webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
	box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
}

.site-wrapper-inner {
 	display: table-cell;
	vertical-align: top;
}

.cover-container {
	margin-right: auto;
	margin-left: auto;
}

/* Padding for spacing */
.inner {
	padding: 20px;
}

/* Header */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper>.container {
	padding-right: 0;
	padding-left: 0;
}

.navbar-wrapper .navbar {
	padding-right: 15px;
	padding-left: 15px;
}

.navbar-wrapper .navbar .container {
	width: auto;
}

/* Involved drop down */
 .navbar-nav li {
 	text-align: center; 
}

/* .dropdown-menu li a{
 	text-align: center; 
}
 */ 
/* .dropdown-header {
 	text-align: center; 
}
 */
 
/* Cover */
.cover {
	padding: 0 20px;
}

.cover .btn-lg {
	padding: 10px 20px;
	font-weight: bold;
}

/* Footer */
.mastfoot {
	color: #999; /* IE8 proofing */
	color: rgba(255, 255, 255, .5);
}

p.footer {
    color:#fff;	
}

.pointColor {
	color:#b1e81e;
}

/* Affix and center */
 
 
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	
  margin-bottom: 60px;
  
  /* debug
  border: dotted;
  border-color: red;
  */
 }

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  /* debug 
  border: dotted;
  border-color: blue;
  */
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
/* debug
  border: dotted;
  border-color: yellow;
*/
}

@media screen and (max-width: 768px) {
	.carousel .item {
		height: 250px; 
	}
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
	.carousel .item {
		height: 350px; 
	}
}

.carousel-inner  {
	/* debug
	border: dotted;
	border-color: green;
	*/
}
 
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  
  min-width: 100%;
  /* blew code is needed to not show empty spaces while it is transforming*/
  min-height: 100%; 
  
  max-width: 100%; 
  max-height: 100%; 
 }


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


.img-circle {
/* 	Debug
	border: 1px dashed;
	
 */
 }

/* Featurettes
------------------------- */
.featurette-image {
/* debug
	border: 1px dashed;
*/
}

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

/* TABLES -----------------------------------------*/
.pop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    border-bottom:5px solid #F94E5B;
    border-radius: 0 0 8px 8px;
    background: #F94E5B;
    color: white;
    font-size: 0.8em;
}
 
.pop_table caption{
    height: 2.5em;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #FFF;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: #F94E5B;
    color: white;
}
 
/* caption 이 모두 같은색이었으면 좋겠음. 
.pop_table caption:before {
    content: '';
    display: block;
    height: 8px;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background-color: #000;
}
*/
 
.pop_table th {
    padding: 15px;
    border: none;
    background: #FEB337;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid #FFF;
}
 
.pop_table td {
    padding: 15px;
    border: none;
    text-align: left;
    vertical-align: baseline;
    border-bottom: 2px solid #FFF;
}
 
.pop_table tr:last-child th,
.pop_table tr:last-child td {
    border-bottom: none;
    border-bottom: 2px solid #FFF;
}

/* CONTENT AREA 
-------------------------------------------------- */
section {
    background-color: 
    /*
    #3b3f47;	
    #292c31;
    #5d626d;
    */
    #2f3238;
    height: 100%; /* 언제나 컨텐츠 크기 만큼 꽉 채워야 하기 때문 */
}

div.aside-container {
    display: flex;        
    flex-direction: column;
    justify-content:space-around;
    align-content: space-around;
    height: 100%;
}

div.content-container {
    display: flex;        
    flex-direction: column;
}

#player_ranking_dashboard_area {
    width: 100%; 	
    height: 440px;
    overflow: hidden;
}

#status_summary_dashboard_area {
    width: 100%; 	
    height: 440px;
    overflow: hidden;
}

.contest-advertise-primary-content {
    flex:1;
    display:flex;
    justify-content: center;
    align-items: center;
    height:400px;
}

.contest-advertise-secondary-content {
    flex:1;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    height:500px;
}

#popular-contest-list {
    flex:1;		
}

#monthly-contest-list {
    flex:1;		
}

.item1-2x1-space {
    flex:1;
    min-width:45%;
    max-width:45%;
}

.item1-2x2-space {
    flex:1;
    min-width:45%;
    max-width:45%;
    max-height:45%;
}

.item-full-space {
    width:95%;
    height:95%;
}

/* MODAL INFO ------------------------------------ */

/* Work around for adding right-padding on body */
body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}

body.modal-open ::-webkit-scrollbar{
  display: none; 
}

#modalInfoPage .modal-header {
    border-bottom-style: none;
}

#modalInfoPage .modal-body {
    padding-top: 0;
	color: black;
}

#modalInfoPage .title-info-section {
    display: flex;
}

#modalInfoPage .title-info-section>div:first-of-type {
    flex: 3;
    margin-top: -12%;         
}

#modalInfoPage .title-info-section>div:first-of-type img{
    width: 100%;
    height: auto;
}

#modalInfoPage .title-info-section>div:last-of-type {
    flex: 7;
    margin-left: 3%;
}

/* Declare heights because of positioning of img element */
#modalInfoPage .carousel .item {
  height: 300px;
  background-color: #777;
}

#modalInfoPage .info-container {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
}

#modalInfoPage .title-info-section .title {
    text-align: left;
}

#modalInfoPage .title-info-section .info {
    text-align: left;
    float: left;
}

#modalInfoPage .title-info-section .info-table {
    margin-top: 1em;
    display: flex;
    justify-content: space-around;
}

.info-page-breadcrumb { 
    background: rgba(255,255,255,0);
    border: 0px solid rgba(255, 255, 255, 0); 
    border-radius: 0px; 
    display: block;
    margin-top: -5%;         
    margin-left: 30%;
    display: flex;
    position: relative;
    z-index:1;
}
.info-page-breadcrumb li {font-size: 16px;}
.info-page-breadcrumb a {color: inherit;}
.info-page-breadcrumb a:hover {color: rgba(255, 165, 0, 1);}
.info-page-breadcrumb>.active {color: rgba(255, 165, 0, 1);}
.info-page-breadcrumb>li+li:before {color: rgba(255, 255, 255, 1); content: "\007C\00a0";}

#modalInfoPage .detail-section {
    background: white;
    color: black;
    text-align: left;
    align-items: stretch;
    margin-top: 1%;
}

#modalInfoPage .detail-section .content-container{
    flex:7;
    display: block;
    border-top: 1px solid;
    border-right: 1px solid;
    padding-top: 1.5em;
}

#modalInfoPage .detail-section .aside-container{
    flex:3;
    height: 100%;
    border-top: 1px solid;
    padding-top: 1.5em;
}

#modalInfoPage .detail-section .aside-container .panel-default {
    background-color: #eee;
    min-height: 4em;
    margin: 7% 0 7% 7%;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
/* Tablets sm */
@media ( min-width : 768px) {
	/* Navbar positioning foo */
	.navbar-wrapper {
		margin-top: 20px;
	}
	.navbar-wrapper .container {
		padding-right: 15px;
		padding-left: 15px;
	}
	.navbar-wrapper .navbar {
		padding-right: 0;
		padding-left: 0;
	}

	/* The navbar becomes detached from the top, so we round the corners */
	.navbar-wrapper .navbar {
		border-radius: 4px;
	}

	/* Bump up size of carousel content */
	.carousel-caption p {
		margin-bottom: 20px;
		font-size: 21px;
		line-height: 1.4;
	}
	.featurette-heading {
		font-size: 50px;
	}
	
	/*Pull out the header and footer*/
	/* result right-sided.
    .masthead {
		position: fixed;
		top: 0;
	}
	*/
	.mastfoot {
		position: fixed;
		bottom: 0;
	}

	/* Start the vertical centering */
	.site-wrapper-inner {
		vertical-align: middle;
	}

	/* Handle the widths */
	.masthead, .mastfoot, .cover-container {
		/*Must be percentage or pixels for horizontal alignment*/
		width: 100%;
	}
	.masthead-brand {
		float: left;
	}
	.masthead-nav {
		float: right;
	}
    
    section {
        display: block;
    }
    
    div.dashboard-primary-content {
        width:100%;
    }
    
    div.dashboard-secondary-content {
        width:100%;
        display: flex;
        align-items:center;
    }
    
}

@media ( min-width : 768px) and ( max-width : 991px) {
    div.aside-container {
        position:sticky;
        top:0;
    }
}

/* Pc md */
@media ( min-width : 992px) {
	.featurette-heading {
		margin-top: 120px;
	}
	.masthead, .mastfoot, .cover-container {
		width: 700px;
	}
    
    section {
        display: flex;
        align-items:center;
    }

    div.content-container {
        flex-direction: row;
        justify-content:space-between;
        height: 512px;
    }
    
    div.dashboard-primary-content {
        width:60%;
    }
    
    div.dashboard-secondary-content {
        width:40%;
    }
    
    .contest-advertise-primary-content {
        height: auto;
    }
    
    .contest-advertise-secondary-content {
        height: auto;
    }
}

@media ( min-width : 1080px) {
   .container {
    width: 992px;
  }
}

/* Pc large lg */
@media ( min-width : 1200px) {
   .container {
    width: 1180px;
  }
}

@media (min-width: 1400px) {
  .container {
    width: 1280px;
  }
}

/* Pc large x-lg */
@media (min-width: 1600px) {
  .container {
    width: 1480px;
  }
}

/* DEBUG -------------------------*/
.debug1 {
    outline: black dotted thin;
}

.debug2 {
    outline: red dotted thin;
}

.debug3 {
    outline: blue dotted thin;
}

.debug4 {
    outline: brown dotted thin;
}

.debug5 {
    outline: green dotted thin;
}