Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported.
@charset "UTF-8"; @import "compass/css3"; body { background-color:#B6C3D3; } #wrapper { width:100%; margin-top:0.03%; margin-right:auto; margin-left:auto; } header { background-color:#FFFFFF; padding:0.1% 0% 0.1% 0%; margin:1% 5% 2% 5%; font-family:Georgia; color:#EB984E; letter-spacing:5px; text-align:center; } #menu { float:center; position: relative; list-style-type: none; display: inline; padding:0; } #menu ul { height: 2%; float:inherit; padding:0; } #menu ul li { font: 16px Georgia, "Times New Roman", Times, serif; display:inline; float:center; line-height:2%; background-color:#333333; color:#EB984E; list-style-type:none; margin: 10% 2% 10% 2%; outline-style: groove; outline-color:#CC9999; outline-width:thin; } #menu ul li a { padding: 0% 2% 0% 2%; text-align:center; background-color:#333333; color:#EB984E; text-decoration:none; } #menu ul li a:hover { background-color:#333333; color:#34495E ; } #menu ul li a:link { background-color:#333333; color:#EB984E; } ;#menu ul li a:visited { color: #34495E } #nav { display: inline-block; list-style-type: none; float:center; position:relative; padding:0; } #main { background-color:#FFFFFF; height:400px; padding:25px; margin:10px 0px 20px 50px; float:center; width:60%; font-family:Verdana; color:#403D54; font-size:14px; line-height: 22px; } #one { background-color:#FFFFFF; height:40%; padding:25px; margin:10px 0px 20px 20px; float:left; width:35%; font-family:Georgia; color:#403D54; font-size:14px; line-height: 22px; } #two { background-color:#FFFFFF; height:40%; padding:25px; margin:10px 20px 20px 0px; float:right; width:35%; clear:right; font-family:Georgia, "Times New Roman", Times, serif; color:#403D54; font-size:14px; line-height: 22px; word-wrap: break-word; } #sidebar { background-color:#FFFFFF; height:400px; padding:25px; margin:10px 0px 20px 50px; float:left; width:20%; font-family:Georgia; color:#403D54; font-size:14px; line-height:22px; text-align:center; } #bannerimage { width: 100%; height: auto; background-position: center; } img { max-width:100%; height:auto; max-height:100%; } .img-circle { background:url(P1050610.JPG); border-radius: 50%; } .homeImageLink { position: absolute; top: 45%; left: 0; text-align: center; width: 100%; } .homeImageLink span { color: blue; font-family:Palatino; font-weight: 300; font-style: italic; text-transform: uppercase; letter-spacing: 15px; pointer-events: none; } .img-container { position:relative; } #bg { position: fixed; } #bg div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; } #bg td { text-align:center; vertical-align:middle; } #bg img { margin:0 auto; min-height:50%; min-width:50%; } #cont { position:absolute; top:0;left:0; z-index:70; overflow:auto; } /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (Image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */ .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .cursor { cursor: pointer } .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } * { box-sizing: border-box; } /* The actual timeline (the vertical ruler) */ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline::after { content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px; } /* Container around content */ .container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } /* The circles on the timeline */ .container::after { content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: white; border: 4px solid #EB984E; top: 15px; border-radius: 50%; z-index: 1; } /* Place the container to the left */ .left { left: -25%; } /* Place the container to the right */ .right { left: 25%; } /* Add arrows to the left container (pointing right) */ .left::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white; } /* Add arrows to the right container (pointing left) */ .right::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Fix the circle for containers on the right side */ .right::after { left: -16px; } /* The actual content */ .content { padding: 20px 30px; background-color: white; position: relative; border-radius: 6px; display:inline-block; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media all and (max-width: 600px) { /* Place the timelime to the left */ .timeline::after { left: 31px; } /* Full-width containers */ .container { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .container::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Make sure all circles are at the same spot */ .left::after, .right::after { left: 15px; } /* Make all right containers behave like the left ones */ .right { left: 0%; } } /* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; display: none; } .accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ } input { display: none; word-wrap: break-word; visibility: hidden; } label { display: inline-block; word-wrap: break-word; padding: 0.5em; text-align: center; border-bottom: 1px solid #CCC; color: #666; } label:hover { color: #000; display: inline-block; word-wrap: break-word; } label::before { font: 16px Georgia, "Times New Roman", Times, serif; content: "-"; vertical-align: text-top; display: inline-block; word-wrap: break-word; width: 20px; height: 20px; margin-right: 3px; background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%); } #expand { display:inline-block; text-align:center; word-wrap: break-word; overflow: hidden; transition: height 0.5s; color: #000; } #toggle:checked ~ #expand { height: 0px; display: inline-block; word-wrap: break-word; } #toggle:checked ~ label::before { content: "+"; display: inline-block; word-wrap: break-word; } #expand1 { display:inline-block; text-align:center; word-wrap: break-word; overflow: hidden; transition: height 0.5s; color: #000; } #toggle1:checked ~ #expand1 { height: 0px; display: inline-block; word-wrap: break-word; } #toggle1:checked ~ label::before { content: "+"; display: inline-block; word-wrap: break-word; } #expand2 { display:inline-block; text-align:center; word-wrap: break-word; overflow: hidden; transition: height 0.5s; color: #000; } #toggle2:checked ~ #expand2 { height: 0px; display: inline-block; word-wrap: break-word; } #toggle2:checked ~ label::before { content: "+"; display: inline-block; word-wrap: break-word; } #expand3 { display:inline-block; text-align:center; word-wrap: break-word; overflow: hidden; transition: height 0.5s; color: #000; } #toggle3:checked ~ #expand3 { height: 0px; display: inline-block; word-wrap: break-word; } #toggle3:checked ~ label::before { content: "+"; display: inline-block; word-wrap: break-word; } #expand4 { display:inline-block; text-align:center; word-wrap: break-word; overflow: hidden; transition: height 0.5s; color: #000; } /* Dropdown Button */ .dropbtn { font: 16px Georgia, "Times New Roman", Times, serif; background-color: #333333; color: #EB984E; margin: 10% 2% 10% 2%; padding: 0% 30% 0% 30%; outline-style: groove; outline-color:#CC9999; outline-width:thin; font-size: 16px; border: none; } /* The container
- needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #333333; min-width: 160px; box-shadow: 10% 2% 10% 2% rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { font: 16px Georgia, "Times New Roman", Times, serif; color: #EB984E; padding: 0% 2% 0% 2%; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #34495E;} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content {display: block;} /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn {background-color: #34495E ;} #logout_form input[type="submit"] { width:250px; margin-top:10px; height:40px; font-size:16px; background:none; border:2px solid white; color:white; } #login_form { margin-top:200px; background-color:white; width:350px; margin-left:310px; padding:20px; box-sizing:border-box; box-shadow:0px 0px 10px 0px #3B240B; } #login_form h1 { margin:0px; font-size:25px; color:#8A4B08; } #login_form input[type="password"] { width:250px; margin-top:10px; height:40px; padding-left:10px; font-size:16px; } #login_form input[type="submit"] { width:250px; margin-top:10px; height:40px; font-size:16px; background-color:#8A4B08; border:none; box-shadow:0px 4px 0px 0px #61380B; color:white; border-radius:3px; } #login_form p { margin:0px; margin-top:15px; color:#8A4B08; font-size:17px; font-weight:bold; } #toggle4:checked ~ #expand4 { height: 0px; display: inline-block; word-wrap: break-word; } #toggle4:checked ~ label::before { content: "+"; display: inline-block; word-wrap: break-word; } footer { background-color:#333333; padding:15px 0px 15px 0px; margin:15px 15px 15px 15px; clear:both; font-family:Georgia; font-size:11px; color:#EB984E; text-align:center; }