-#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:800px;background-color:white;position:relative}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection,#map-area-container #new-area-section .map-interest-selection{margin-top:45px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child),#map-area-container #new-area-section .map-interest-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a,#map-area-container #new-area-section .map-interest-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-interest-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:0px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit;max-width:415px}#map-area-container #area-list .record-container{margin-bottom:0px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white;align-items:center}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer;background-color:#f8f8f8}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#map-area-container #area-list .record-container:nth-child(even) .area-record{background-color:#E0F7F7}.area-buttons{padding-bottom:10px !important;min-height:66px;max-width:500px;float:right}.area-buttons #area-update{margin-top:10px;float:right;margin-left:10px}.area-buttons #area-reset{margin-top:10px;background-color:rgba(244,67,54,0.8);margin-bottom:10px;display:none}.edit-field{background-color:rgba(30,202,162,0.1) !important}.error-field{background-color:rgba(244,67,54,0.1) !important}
+#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:1000px;background-color:white;position:relative}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection,#map-area-container #new-area-section .map-interest-selection{margin-top:45px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child),#map-area-container #new-area-section .map-interest-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a,#map-area-container #new-area-section .map-interest-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-interest-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:0px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit;max-width:415px}#map-area-container #area-list .record-container{margin-bottom:0px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white;align-items:center}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer;background-color:#f8f8f8}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#map-area-container #area-list .record-container:nth-child(even) .area-record{background-color:#E0F7F7}.area-buttons{padding-bottom:10px !important;min-height:66px;max-width:500px;float:right}.area-buttons #area-update{margin-top:0px;float:right;margin-left:10px}.area-buttons #area-reset{margin-top:10px;background-color:rgba(244,67,54,0.8);margin-bottom:10px;display:none}.edit-field{background-color:rgba(30,202,162,0.1) !important}.error-field{background-color:rgba(244,67,54,0.1) !important}.add-map-container{padding:10px}
-<div id="map-area-container">
+<div id="map-area-container" data-mapID="0">
<h5>Map Areas</h5>
<div id="new-area-section">
<div class="row">
- <div class="input-container area-buttons">
- <button id="area-update" class="btn" data-option="add">Add Area</button>
- <button id="area-reset" class="btn" data-option="add">Nevermind</button>
+ <div class="s12 col row input-container">
+ <div class="add-map-container">
+ <a class="btn-floating btn-small waves-effect waves-light red"><i class="material-icons">add</i></a>
+ <span>New Map </span>
+ <div class="input-container area-buttons">
+ <button id="area-update" class="btn" data-option="add">Add Area</button>
+ <button id="area-reset" class="btn" data-option="add">Nevermind</button>
+ </div>
+ </div>
</div>
- <div class="s12 l6 col">
+
+ <div class="s12 l6 col area-settings">
<div class="row input-container">
<div class="input-field col s12 ">
<input id="area-name" class="area-name validate" type="text" value="" required="" aria-required="">
</div>
</div>
-
<div class="row input-container">
<div class="input-field col s12 map-page-selection">
<select id="map-page-dropdown">
</div>
</div>
-
-
</div>
- <div class="s12 l6 col">
+ <div class="s12 l6 col area-settings">
<div class="row input-container">
<div class="input-field col s12 map-color-selection">
<div id="map-hover-color">
</div>
</div>
</div>
-
</div>
</div>
<div id="list-header" style="display: flex;">