Difference between revisions of "Template:BGIC China"

 
(72 intermediate revisions by the same user not shown)
Line 6: Line 6:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1400px; margin-top:-7px; margin-left:-30px;}
+
#content { padding:0px; width:101.7%; margin-top:-5px; margin-left:-24px;}
−
body {background-color:white; }
+
body {background-color:black; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 +
/********************************* MENU ********************************/
 +
/* Wrapper for the menu */
 +
.menu_wrapper {
 +
width:150px;
 +
height:100vh;
 +
position:fixed;
 +
padding:0px;
 +
float:left;
 +
background-color:#f2f2f2;
 +
text-align:left;
 +
}
  
 +
/* styling for the menu items */
 +
.menu_item {
 +
width:100%;
 +
margin:-2px 0px 0px -20px;
 +
padding: 10px 10px; 
 +
border-bottom: 1px solid #d3d3d3;
 +
font-weight:bold;
 +
color:#000000;
 +
cursor: pointer;
 +
}
 +
 +
/* when hovering on a menu item */
 +
.menu_item:hover {
 +
color:#000000;
 +
background-color: #72c9b6;
 +
}
 +
 +
/* decoration icon for the menu buttons*/
 +
.icon {
 +
float:right; 
 +
font-size:16px;
 +
font-weight:bold;
 +
}
 +
 +
/* this is the icon for when the content is collapsed */
 +
.plus::before {
 +
content: "+";
 +
}
 +
/* this is the icon for when the content is expanded */
 +
.less::before {
 +
content: "–";
 +
}
 +
 +
/* styling for the ul that creates the buttons */
 +
ul.menu_items {
 +
width:100%;
 +
margin-left:0px;
 +
padding:0px;
 +
list-style: none;
 +
}
 +
 +
/* styling for the li that are the menu items */
 +
.menu_items li {
 +
width:100%;
 +
margin-top:-2px;
 +
padding: 15px 0px 15px 15px ;
 +
display:block;
 +
border-bottom: 1px solid #d3d3d3; 
 +
text-align:left;
 +
font-weight:bold;
 +
text-decoration:none;
 +
color:#000000;
 +
list-style-type:none;
 +
cursor:pointer;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
 +
 +
.menu_item a {
 +
width: 100%;
 +
margin-left: -20px;
 +
padding: 11px 90px 12px 20px;
 +
text-decoration: none;
 +
color:black;
 +
}
 +
 +
/* When hovering on a menu item */
 +
.menu_items li:hover {
 +
background-color:#72c9b6;
 +
color: #000000;
 +
}
 +
 +
/* styling for the submenus */
 +
.submenu {
 +
width:100%;
 +
display: none; 
 +
font-weight:bold;
 +
cursor:pointer;
 +
 +
}
 +
 +
/* moving the margin for the submenu ul list */
 +
ul.submenu {
 +
width: 100%;
 +
margin: 10px 0px -11px 0px;
 +
list-style: none;
 +
}
 +
 +
/*styling for the submenu buttons */
 +
.submenu li {
 +
width: 100%;
 +
margin-left: 10px;
 +
margin-bottom: 0px;
 +
}
 +
 +
 +
/* hover state for the submenu buttons */
 +
.submenu li a {
 +
width: 100%;
 +
padding: 5px 10px;
 +
display: inline-block;
 +
border-bottom: 1px solid #d3d3d3;
 +
background-color:white;
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 +
 +
 +
.submenu li a:hover  {
 +
background-color:#000000;
 +
color: #72c9b6;
 +
}
 +
 +
 +
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
 +
.collapsable_menu_control {
 +
width:100%;
 +
padding: 15px 0px;
 +
display:none;
 +
background-color:#000000;
 +
text-align:center; 
 +
font-weight:bold;
 +
color:#72c9b6;
 +
cursor:pointer;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* when hovering on that button */
 +
.collapsable_menu_control:hover {
 +
background-color: #72c9b6;
 +
color:#000000; 
 +
}
  
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/
Line 16: Line 166:
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 
.content_wrapper {
 
.content_wrapper {
−
width: 85%;
+
width: 100%;
 
margin-left:150px;
 
margin-left:150px;
 
padding:10px 0px;  
 
padding:10px 0px;  
Line 36: Line 186:
 
.full_size img {  
 
.full_size img {  
 
padding: 10px 15px;
 
padding: 10px 15px;
−
width:96.5%;  
+
width:100%;  
 
}
 
}
  
 
.half_size {
 
.half_size {
−
width: 50%;  
+
width: 100%;  
 
}
 
}
 
.half_size img {  
 
.half_size img {  
 
padding: 10px 15px;
 
padding: 10px 15px;
−
width: 93%;  
+
width: 100%;  
 
}
 
}
  
Line 53: Line 203:
  
 
.highlight {  
 
.highlight {  
−
width: 90%;  
+
width: 100%;  
 
margin: auto;  
 
margin: auto;  
 
padding: 15px 5px;
 
padding: 15px 5px;
Line 63: Line 213:
 
display: block;
 
display: block;
 
margin: 5px 15px;
 
margin: 5px 15px;
−
width: 95%;
+
width: 100%;
 
font-weight:bold;
 
font-weight:bold;
 
}
 
}
Line 126: Line 276:
 
/* Table */
 
/* Table */
 
.content_wrapper table {  
 
.content_wrapper table {  
−
width: 97%;  
+
width: 100%;  
 
margin:15px 10px;  
 
margin:15px 10px;  
 
border: 1px solid #d3d3d3;  
 
border: 1px solid #d3d3d3;  
Line 152: Line 302:
 
.button_click {  
 
.button_click {  
 
margin: 10px auto;
 
margin: 10px auto;
−
padding: 15px; width:12%;   
+
padding: 15px; width:100%;   
 
text-align:center;  
 
text-align:center;  
 
font-weight:bold;  
 
font-weight:bold;  
Line 172: Line 322:
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
  
−
/* IF THE SCREEN IS LESS THAN 1000PX */
 
  
−
@media only screen and (max-width: 1000px) {
 
−
 
−
#content {width:100%; }
 
−
.menu_wrapper {width:15%;}
 
−
.content_wrapper {margin-left: 15%;}
 
−
.menu_item {display:block;}
 
−
.icon {display:none;}
 
−
.highlight {padding:10px 0px;}
 
−
}
 
−
 
−
 
−
/* IF THE SCREEN IS LESS THAN 680PX */
 
−
 
−
@media only screen and (max-width: 680px) {
 
−
.collapsable_menu_control { display:block;}
 
−
.menu_item {display:none;}
 
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
 
−
.content_wrapper {width:100%; margin-left:0px;}
 
−
.column.half_size {width:100%; }
 
−
.column img { width: 100%; padding: 5px 0px;}
 
−
.icon {display:block;}
 
−
.highlight {padding:15px 5px;}
 
−
}
 
  
 
</style>
 
</style>
Line 207: Line 333:
  
 
<!-- This tells the browser that your page is responsive -->
 
<!-- This tells the browser that your page is responsive -->
−
 
−
 
  
  

Latest revision as of 19:24, 27 July 2016