148 lines
1.8 KiB
CSS
148 lines
1.8 KiB
CSS
|
* {
|
||
|
margin:0;
|
||
|
padding:0;
|
||
|
}
|
||
|
h2 {
|
||
|
padding:1em 0 0 0;
|
||
|
}
|
||
|
p {
|
||
|
line-height:1.4em;
|
||
|
}
|
||
|
p + p {
|
||
|
text-indent:2em;
|
||
|
}
|
||
|
body {
|
||
|
font-size:100%;
|
||
|
text-align:center;
|
||
|
background:#ddd;
|
||
|
}
|
||
|
pre {
|
||
|
display:block;
|
||
|
margin:1em 0 0 0;
|
||
|
width:488px;
|
||
|
}
|
||
|
pre code {
|
||
|
background:#eee;
|
||
|
display:block;
|
||
|
padding:10px;
|
||
|
}
|
||
|
.r {
|
||
|
float:right;
|
||
|
padding:0 0 10px 20px;
|
||
|
}
|
||
|
|
||
|
/* Landscape mode (default) */
|
||
|
#wrap {
|
||
|
margin:0 auto;
|
||
|
width:1024px;
|
||
|
position:relative;
|
||
|
overflow:hidden;
|
||
|
text-align:left;
|
||
|
background:#fff;
|
||
|
}
|
||
|
#header {
|
||
|
float:left;
|
||
|
width:1024px;
|
||
|
padding:10px 0 20px 0;
|
||
|
background:#fff;
|
||
|
border-bottom:1px solid #000;
|
||
|
}
|
||
|
#header h1 {
|
||
|
padding:10px 30px 0 30px;
|
||
|
}
|
||
|
#header p {
|
||
|
padding:0 30px;
|
||
|
line-height:1.4em;
|
||
|
}
|
||
|
#content {
|
||
|
float:left;
|
||
|
width:1024px;
|
||
|
background:#eee;
|
||
|
position:relative;
|
||
|
left:768px;
|
||
|
}
|
||
|
#main {
|
||
|
float:left;
|
||
|
width:708px;
|
||
|
position:relative;
|
||
|
right:738px;
|
||
|
padding:20px 0;
|
||
|
}
|
||
|
#side {
|
||
|
float:right;
|
||
|
width:216px;
|
||
|
position:relative;
|
||
|
right:788px;
|
||
|
padding-bottom:20px;
|
||
|
}
|
||
|
#sidea,
|
||
|
#sideb,
|
||
|
#sidec {
|
||
|
clear:left;
|
||
|
float:left;
|
||
|
width:216px;
|
||
|
}
|
||
|
#footer {
|
||
|
clear:both;
|
||
|
float:left;
|
||
|
width:1024px;
|
||
|
border-top:1px solid #000;
|
||
|
background:#ddd;
|
||
|
}
|
||
|
#footer p {
|
||
|
padding:20px 30px;
|
||
|
}
|
||
|
|
||
|
@media only screen and (orientation:portrait){
|
||
|
/* portrait mode */
|
||
|
#header,
|
||
|
#wrap,
|
||
|
#footer {
|
||
|
width:768px;
|
||
|
}
|
||
|
#content {
|
||
|
left:0;
|
||
|
background:#fff;
|
||
|
}
|
||
|
#main {
|
||
|
float:left;
|
||
|
width:708px;
|
||
|
position:relative;
|
||
|
right:0;
|
||
|
left:30px;
|
||
|
padding:20px 0;
|
||
|
}
|
||
|
#side {
|
||
|
clear:left;
|
||
|
float:left;
|
||
|
width:768px;
|
||
|
right:0;
|
||
|
padding-bottom:20px;
|
||
|
background:#eee;
|
||
|
}
|
||
|
#sidea {
|
||
|
clear:none;
|
||
|
width:216px;
|
||
|
float:left;
|
||
|
position:relative;
|
||
|
left:30px;
|
||
|
padding-top:20px;
|
||
|
}
|
||
|
#sideb {
|
||
|
clear:none;
|
||
|
width:216px;
|
||
|
float:left;
|
||
|
position:relative;
|
||
|
left:60px;
|
||
|
padding-top:20px;
|
||
|
}
|
||
|
#sidec {
|
||
|
clear:none;
|
||
|
width:216px;
|
||
|
float:right;
|
||
|
position:relative;
|
||
|
right:30px;
|
||
|
padding-top:20px;
|
||
|
}
|
||
|
}
|