/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
body {
font-size: 1.05em;
line-height: 1.25em;
font-family: Helvetica Neue, Helvetica, Arial;
background: #f9f9f9;
color: #555;
margin: 0 auto 0 auto;
}
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #444;
}
img {
width: 100%;
}
header {
background: #fff;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 10px;
float: left;
width: 280px;
background: url(../img/logo.png) no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 55px;
height: 55px;
background: #fff url(../images/mm.png) center;
}
#wrap {
overflow: hidden;
margin: 0px 5%;
text-align: left;
}
.box {
width: 300px;
padding-bottom: 300px;
color: #FFF;
position: relative;
float: left;
}
.innerContent {
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
background: #66F;
padding: 10px;
}
div.blog {
margin: 5px;
float: left;
width: 95%;
}
div.blogImage {
margin: 5px;
border: 1px solid #ccc;
float: left;
height: 300px;
}
div.gallery {
margin: 5px auto;
border: 1px solid #ccc;
float: left;
width: 300px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
border: 1px solid #ccc;
height: 280px;
}
div.desc {
padding: 15px;
text-align: center;
height: 70px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
.current {
color: #2262AD;
text-decoration: overline;
}
section {
margin: 10px 10px 10px;
max-width: 95%;
position: relative;
padding: 10px
}
h1 {
font-size: 2em;
color: #2262AD;
line-height: 1.15em;
margin: 5px 0 ;
}
h2 {
font-size: 1.6em;
color: #2262AD;
line-height: 1.15em;
margin: 5px 0 ;
}
h3 {
font-size: 1em;
color: #2262AD;
line-height: 1.15em;
margin: 5px 0 ;
}
h4 {
font-size: .8em;
color: #2262AD;
line-height: 1.15em;
margin: 5px 0 ;
}
h5 {
font-size: .8em;
color: #2262AD;
line-height: 1.15em;
margin: 5px 0 ;
}
p {
line-height: 1.45em;
margin-bottom: 5px;
}
.tbtn:hover {
opacity: 0.3;
}
.datelabel {
display:none;
}
.apptitle {
font-size: .7em;
}
.arrow {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
}
.arrow-right {
border-left: 15px solid #000;
right: 0;
}
.arrow-left {
border-right: 15px solid #000;
left: 0;
}
.container {
margin: 5% auto;
font-size: 24px;
position: relative;
width: 90%;
}
.header {
text-align: center;
}
/*
.pcontent {
background-color:green;
position:relative;
}
*/
.a1 {
-moz-border-radius: 15px;
border-radius: 15px;
width:90%;
height: auto%;
text-align:center;
top:85px;
background: lightskyblue;
background: -webkit-linear-gradient(lightskyblue, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(lightskyblue, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(lightskyblue, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(lightskyblue, white); /* Standard syntax */
}
.q1 {
-moz-border-radius: 15px;
border-radius: 15px;
background-color: lightskyblue;
background: -webkit-linear-gradient(lightskyblue, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(lightskyblue, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(lightskyblue, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(lightskyblue, white); /* Standard syntax */
width:435px;
height:400px;
position: absolute;
top:185px;
left:330px;
}
.s1 {
-moz-border-radius: 15px;
border-radius: 15px;
background-color: lime;
background: -webkit-linear-gradient(lime, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(lime, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(lime, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(lime, white); /* Standard syntax */
width:280px;
height:65px;
position: absolute;
top:85px;
left:15px;
}
.a2 {
-moz-border-radius: 15px;
border-radius: 15px;
background-color: pink;
background: -webkit-linear-gradient(pink, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(pink, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(pink, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(pink, white); /* Standard syntax */
width:180px;
height:500px;
position: absolute;
top:85px;
left:800px;
}
.e1 {
-moz-border-radius: 15px;
border-radius: 15px;
background-color: orange;
background: -webkit-linear-gradient(orange, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(orange, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(orange, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(orange, white); /* Standard syntax */
width:280px;
height:400px;
position: absolute;
top:185px;
left:15px;
}
.b1 {
-moz-border-radius: 15px;
border-radius: 15px;
background-color: silver;
background: -webkit-linear-gradient(silver, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(silver, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(silver, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(silver, white); /* Standard syntax */
width:965px;
height:1000px;
position: absolute;
top:615px;
left:15px;
}
/*MEDIA QUERY*/
@media only screen and (max-width : 850px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
position: absolute;
top: 1em;
right: 1em;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: ghostwhite;
border: 5px solid #444;
right: 0px;
top: 71px;
width: 50%;
border-radius: 6px 0 6px 6px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
/*
// Handle with javascript.
nav:hover ul {
display: block;
}
*/
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
.datelabel {
display:block;
font-size: .7em;
}
h1 {
font-size: 2em;
color: #2262AD;
line-height: 1.15em;
margin: 20px 0 ;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
.a1 {
background-color: goldenrod;
width:85%;
height:80px;
position: absolute;
top:50px;
left:2%;
}
.a2 {
background-color: pink;
width:85%;
height:80px;
position: absolute;
top:175px;
left:2%;
}
.e1 {
background-color: orange;
width:85%;
height:400px;
position: absolute;
top:300px;
left:2%;
}
.q1 {
background-color: skyblue;
width:85%;
height:400px;
position: absolute;
top:745px;
left:2%;
}
.s1 {
background-color: lime;
width:85%;
height:65px;
position: absolute;
top:1190px;
left:2%;
}
.b1 {
background-color: silver;
width:85%;
height:1000px;
position: absolute;
top:1300px;
left:2%;
}
}