/* Index.php Design */

/* #################################################### */
/* #################################################### */

#content_startup1 { /* Sticky Notes */
min-width:750px;
width:95%;
height:325px;
margin:0 auto;
position: relative;
border-bottom:1px solid #313131;
/*background-color: rgba(255, 0, 0, 0.1);*//*DEV*/
}
#content_startup2 { /* Recent Articles */
min-width:750px;
width:95%;
min-height:275px;
border-bottom:1px solid #313131;
margin:0 auto;
position: relative;
/* background-color:rgba(150,150,0,0.1); */
}

/* #################################################### */
/* == New Infobox Design == */
.infoboxNew {
    /* http://www.w3schools.com/cssref/pr_pos_vertical-align.asp */
    vertical-align: middle;/* Default: Baseline (we don't want baseline, so fuck off baseline) */
    color: #8e8e8e;
    max-width: 275px;
    width: 25%;
    height: 225px;
    margin: 0 4%;
    display: inline-block;
    position: relative; top: 35px;
    border-radius: 2px;
    background-color: #4a4a4a;
    box-shadow: 2px 5px 25px #000;
}

/* infobox Header */
.infoboxHeader {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
    letter-spacing: 1px;
    font-weight: bold;
    position: relative; top: 0;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background-color: #111;
}

/* infobox Body */
.infoboxBody::before {
    content: "";
    width: 100%;
    height: 5px;
    margin: 0 auto;
    position: absolute; top: -5px; left: 0; right: 0;
    background-color: #0e0e0e;
}
.infoboxBody {
    width: 100%;
    height: 170px;
    text-align: left;
    font-size: 1.05em;
    position: relative; top: 5px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: #111;
}

/* infobox Content (text, list, ..) */
.infoboxBody > span {
    position: relative; top: 5px; left: 5px;
    padding: 5px;
    margin-bottom: 5px;
    display: inline-block;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.25);
}
.infoboxBody > a {
    font-size: 0.8em;
    position: relative; left: 5px;
    padding: 5px;
    display: inline-block;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.25);
}
.infoboxBody > ul li {
    list-style: square;
    line-height: 1.2;
}

.infoboxNotes {
    display: inline-block;
}

/* http://stackoverflow.com/a/6898097/4738259 => Antialiasing */
.tiltLeft {
    transform: rotate(-5deg) translateZ(1px) translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-background-clip: content-box;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    outline: 1px solid transparent;
}
.tiltRight {
    transform: rotate(5deg) translateZ(1px) translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-background-clip: content-box;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    outline: 1px solid transparent;
}
/* #################################################### */

/* == Infobox OLD == */
.infobox01_container {
position:absolute; top:0px; left:6%;
width:226px;
transform:rotate(-4deg);
transition:0.3s;
transition-delay:0.3s;
/* background-color:red; */
}
.infobox03_container {
position:absolute; top:0px; right:6%;
width:226px;
transform:rotate(5deg);
transition:0.3s;
transition-delay:0.3s;
/* background-color:blue; */
}
.infobox_stats {
position:relative; left:5px;
text-align:left;
float:left;
}
.infobox_stats > span {
/* background:linear-gradient(to bottom, rgba(100,0,0,0.25) 0%, rgba(100,0,0,0.1) 50%, rgba(100,0,0,0.25) 100%); */
background-color:rgba(0,0,0,0.25);
border-radius:5px;
padding:4px;
}
.infobox01_container:hover, .infobox02_container:hover, .infobox03_container:hover {
/* transform:rotate(0deg); */
}

.infobox {
width:220px;
height:225px;
position:relative; left:3px;
display:block;
}
.triangle-l {
border-color:transparent transparent transparent #222;
border-style:solid;
border-width:13px;
height:0;
width:0;
transform:rotate(-45deg);
position:absolute; left:-10px; top:18px;
z-index:1;
}
.triangle-r {
border-color:transparent #222 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
transform:rotate(45deg);
position:absolute; right:-10px; top:18px;
z-index:1;
}
.infobox_content {
height:100%;
width:100%;
/* background-color:#333; */
background:linear-gradient(to bottom, rgb(20,20,20) 0%, rgba(25,25,25,0.85) 5%, rgba(25,25,25,0.75) 75%, rgba(25,25,25,0.5) 100%);
box-shadow:0 0 10px #000;
position:relative;
border-radius:0 0 7px 7px;
z-index:10;
}
.infobox_content h3 {
background-color:#222;
position:relative; top:10px; left:-15px;
width:250px;
box-shadow:0 3px 4px #111;
font-size:20px;
padding-top:1px;
padding-bottom:1px;
border-radius:1px;
font-family:CS_Font;
}
.infobox_content span {

}

.rc_info {
float:left;
text-align:left;
position:relative; left:5px; top:5px;
line-height:20px;
}

.rc_info p {

}

/* #################################################### */
/* #################################################### */

/* == RecentArticles - Index.php == */
#recentArticles_Title {
    color: #aaa;
    font-size: 28px;
    letter-spacing: 2px;
    display: block;
    position: relative;
    padding-top: 20px;
    padding-bottom: 15px;
    text-shadow: 0 0 5px #000;
}
.recentArticlesLine {
    width: 98%;
    height: 1px;
    background: linear-gradient(to right, rgba(255,50,50,0.1) 0%, rgba(150,0,0,0.8) 50%, rgba(255,50,50,0.1) 100%);
    border: none;
    position: relative;
}
/* Article Design */
.recentArticle {
    min-width: 375px;
    width: 45%;
    height: 150px;
    position: relative; top:15px;
    background-color: rgba(25, 0, 0, 0.5);
    border: 1px solid rgba(21, 21, 21, 0.5);
    display: inline-block;
    text-align: left;
    margin: 0 10px;
    margin-bottom: 30px;
    transition: 0.4s;
}
.recentArticle:hover {
    background-color: rgba(100, 0, 0, 0.2);
    border: 1px solid #777;
    box-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 7px #000;
}
.recentArticle:hover .recentArticleDate {
    opacity: 1;
}
.recentArticleDate {
    color: #bbb;
    font-size: 15px;
    font-family: Roboto;
    display: inline;
    position: absolute; right: 1px; top: 1px;
    padding: 2px;
    opacity: 0.3;
    background-color: #111;
    transition: opacity 0.3s;
}
.recentArticleName {
font-size:25px;
font-family:CS_Font;
color:#ccc;
border-bottom:1px solid #444;
padding:7px;
padding-right:0;
overflow:auto;
position:relative;
}
.recentArticleDesc {
font-size:17px;
color:#bbb;
border-bottom:1px solid #444;
padding:7px;
padding-right:0;
height:65px;
}
.recentArticleTags {
font-size:15px;
color:#aaa;
padding:7px;
padding-right:0;
}
/* End 'Recent Articles' - Index.php */

/* ===== MEDIA RULES ===== */
@media only screen and (max-width: 1355px) {
	.infoboxNew {
		font-size: 90%;
	}
    .tiltLeft {
        font-size: 85%;
    }
}
/* #################################################### */
/* #################################################### */