website/cc17/assets/styles/site.css

@import url('../fonts/fantastique-sans/stylesheet.css');

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  GENERAL                                                                  *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

html {
    box-sizing: border-box;
    font-family: 'Fantasque Sans Mono', monospace;
}

*, *:before, *:after {
  box-sizing: inherit;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  PAGE                                                                     *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

body {
    margin: auto;
    padding: 2rem 0.5rem;
}

.main-container
{
	width:46rem;
	font-weight: normal;
	 margin: auto;
}

.main-container.home
{
	width:20rem;
	margin: auto;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  HEADER                                                                   *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

header {
    margin-bottom: 2rem;
}

header > img,
header > h1 {
    display: inline-block;
    vertical-align: middle;
}

header > img {
    width: 4rem;
    margin-right: 1rem;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  NAVBAR                                                                   *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

nav {
    margin-bottom: 2rem;
}

nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    display: inline-block;
    margin-right: 0.8rem;
    color: #378ab4;
}

nav > ul > li:before {
    content: "+";
    margin-right: 0.3rem;
    color: #000000;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  TEXT                                                                     *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


h1 {
    margin-top: 0;
    margin-bottom: 0.3rem;
    font-size: 4rem;
}

h2
{
	font-size:1.15rem;
	color: #ffffff;
    background: #378ab4;
	display:inline-block;
	font-weight:400;
	margin: 1rem 0;
}

p, li {
    font-size: 1.3rem;
}

p {
    margin-bottom: 2rem;
}


p > * {
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    font-weight: bold;
}

p > a{
    color: #ffffff;
    background: #378ab4;
    padding-bottom: 0.1rem;
}

p > strong, li > strong {
    background: #000000;
    color: #ffffff;
    margin: 0;
    padding: 0.1rem 0;
    font-weight: normal;
}





/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  ASCII                                                                    *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
.letterhead 
{
    margin-bottom: 2rem;
	display:table;
	width:100% !important;
	font-size:1.1rem;
}


.letterhead > span.ascii, span.ascii
{
  white-space: pre-wrap;
  background: #000000;
  color: #ffffff;
  font-weight:700;
  /*outline: 3px solid #000000;*/	
  position: relative;
  line-height: 1;
  color: #fff;
  display: inline;
  border: 0 solid #000;
  border-width: 0.15em 0; /* 0.25em is roughly equal to one space character. */	
 
}

.letterhead > span.ascii:after, span.ascii:after{
  background-color: #000;
}

.letterhead > span.ascii:after, span.ascii:after 
{
  content: "";
  position: absolute;
  top: -0.1em;
  right: 100%;
  bottom: -0.1em;
  width: 0.1em;
}



.letterhead > span.ascii.shadow, span.ascii.shadow
{
  text-shadow:
    0 1px #378ab4,
    1px 0 #5dabcd,
    1px 2px #378ab4,
    2px 1px #5dabcd,
    2px 3px #378ab4,
    3px 2px #5dabcd,
    3px 4px #378ab4,
    4px 3px #5dabcd,
    4px 5px #378ab4,
    5px 4px #5dabcd,
    5px 6px #378ab4,
    6px 5px #5dabcd,
    6px 7px #378ab4,
    7px 6px #5dabcd,
    7px 8px #378ab4,
    8px 7px #5dabcd;
	/*outline: 12px solid #000000;*/
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  COLUMNS FESTIVAL                                                                  *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
p.festival
{
	font-size:0.9rem;
	margin-bottom:1rem;
}

p.festival > strong
{
    font-size:1.1rem;
	text-align:center;
}

.col-pagination p
{
	font-size:0.9rem;
	margin-bottom:1rem;
}

.col-pagination p.room
{
	font-size:0.9rem;
	margin:0.5rem 0;	
}

.col-pagination li
{
	font-size:0.9rem;
	margin-bottom:0.3rem;
}

.col-pagination  li > strong
{
	font-size:1rem;
	text-align:center;
}



 .col-pagination
{
	display:flex;
	 display: -webkit-flex;
}
 
.col
{
	-webkit-flex: 1;
    flex: 1;	
	padding-right: 5%;
}

.col.last{
	padding-right: 0;
	}

.col p.room span.ascii
{
	margin-right:10px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  FOOTER                                                                   *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

footer {
	font-weight: normal;
	text-align:left;
	margin-top: -3.5rem;
}

footer > img,
footer > h1 {
    display: inline-block;
    vertical-align: middle;
}

footer > h1, footer  a  {
	font-size:2rem;	
}

footer > img {
    width: 2.5rem;
    margin-right: 0;
}

	
 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  MEDIA QUERY                                                                 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
@media(max-width:768px){
.main-container{
	width:98% !important;
	padding:0 2%;
}

.main-container.home
{
	width:20rem !important;
}

.letterhead 
{
	font-size:0.9rem;
}
}

@media(max-width:635px){
.col-pagination
{
	display:block;
}
.col
{
	width:100% !important;	
	padding: 0;
}

.letterhead 
{
	font-size:0.45rem;
}
footer {
	
	margin-top: 2rem;
}

}