cuchulublog/media/css/layout.css

436 lines
5.3 KiB
CSS

body {
margin: 0px;
background: #fbfbfb;
background-image:url('../images/background.png');
font-family: "Roboto Slab";
}
.container-top {
width:100%;
}
.container {
max-width:1240px;
min-width:1024px;
margin-left:auto;
margin-right:auto;
/*border: solid #ff0 1px;*/
box-sizing: border-box;
min-height:100vh;
/*height:100%;*/
}
.column_left {
width:25%;
/*border: solid #f00 1px;*/
box-sizing: border-box;
float:left;
display:block;
}
.column_content {
box-sizing: border-box;
float:right;
width:75%;
/*border: solid #00f 1px;*/
display:block;
}
nav#nav_home {
float:right;
/*border: solid #f00 4px;*/
display: inline-block;
position:relative;
font-size:20px;
}
nav#nav_home ul {
list-style-type: none;
padding:0px;
margin:0px;
width:100%;
}
nav#nav_home li {
/*border: solid #ff0 1px;*/
display: inline-flex;
padding: 0px;
/*vertical-align: middle !important;*/
align-items: center;
justify-content: center;
height:50px;
margin: 0px;
}
nav#nav_mobile ul {
list-style-type: none;
padding:0px;
margin:0px;
width:100%;
}
nav#nav_mobile li {
display:block;
color: #fff;
}
nav#nav_mobile li a{
display:block;
width:100%;
background:#6e84ff;
color: #fff;
padding:5px 10px;
border: solid #fbfbfb;
border-width: 1px 0px 0px 0px;
}
nav#nav_mobile li a:active{
background:#7f95ff;
}
nav#nav_mobile li a i{
display:inline-block;
width:20px;
text-align:center;
}
.header_nav {
background: #253062;
color: #fff;
height:50px;
/**/
}
.header_pc {
background-image: url('../images/background_home.jpg');
}
#pc_logo {
width:600px;
position:relative;
top:15px;
border: solid #f00 1px;
}
.right_flex {
display: inline-flex;
align-items: center;
justify-content:right;
position:relative;
/*border: solid #f11 4px;*/
width:100%;
/*height:50px;*/
}
.center_flex {
display: inline-flex;
align-items: center;
justify-content:center;
position:relative;
/*border: solid #f11 4px;*/
width:100%;
/*height:50px;*/
}
.left_flex {
display: inline-flex;
align-items: center;
justify-content:left;
position:relative;
/*border: solid #f11 4px;*/
width:100%;
/*height:50px;*/
}
nav#nav_home a {
color: #fff;
display: inline-flex;
align-items: center;
justify-content:right;
height:100%;
width:100%;
padding:0px 20px;
text-decoration: none;
}
nav#nav_home a:hover {
background: #fff;
color: #000;
}
#logo {
position:relative;
}
#logo img {
width:250px;
}
.home_line_separator {
width:100%;
height:25px;
background: #000000;
/*border: solid #cbcbcb;
border-width: 1px 0px;*/
}
#content_home {
width:90%;
margin-left:auto;
margin-right: auto;
clear:both;
}
a {
text-decoration:none;
}
.blog_post_name {
font-size:26px;
}
article {
margin-bottom:15px;
border: solid #cbcbcb;
border-width: 0px 0px 1px 0px;
}
.column_50 {
width:50%;
box-sizing: border-box;
float:left;
}
#footer_page {
padding: 10px 15px;
background: #000628;
color: #fff;
text-align:center;
}
.content_section {
background: #fff;
padding:10px 15px;
box-sizing: border-box;
border: solid #cbcbcb 1px;
border-radius: 5px;
}
.content_section_left {
margin-right:5px;
}
.content_section_right {
margin-left:5px;
}
/* Forms */
input[type=text], input[type=password]{
width:100%;
font-size:24px;
border-radius:5px;
border: solid #cbcbcb 1px;
}
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 0px;
}
input[type=radio] {
bottom: 2px;
}
button, a.button {
color: #fff;
background: #000;
border-width:0px;
padding:10px;
font-size:20px;
display: inline-block;
cursor: pointer;
}
a.button {
text-decoration: none;
padding:10px !important;
margin: 21px 0px !important;
}
.form label {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
text-align: left;
width: 300px;
padding-right: 20px;
}
.form textarea {
width:100%;
height:150px;
clear:both;
}
.form p {
clear: left;
}
.error {
font-weight:bold;
color: #f00;
}
#nav_home_mobile {
display:none;
}
/*Layout*/
@media only screen and (max-width: 1040px) {
nav#nav_home {
display: none;
}
.container {
width:100%;
max-width:100%;
min-width:100%;
}
#nav_home_mobile {
display:inline-block;
position:absolute;
/*width:50px;*/
/*border: solid #f00 1px;*/
right:5px;
/*right:50px;*/
}
#nav_home_mobile a {
color: #fff;
display:block;
font-size: 32px;
}
.column_50 {
width:100%;
margin-top:15px;
}
.logo {
/*width:200px;
position:absolute;
top:0px;
left:0px;
z-index:20;
clear:both;*/
width:100%;
}
#menu_big {
display:none;
}
}